تنزيل Cample.js - تنزيل رمز المصدر Cample.js

Cample.js

مكونات الطرف الثالث

3.2.1-beta.1

تنزيل

cample

CAMPLE.JS - واحدة من أسرع الأطر بدون DOM افتراضية على الإنترنت!

الموقع • الوثائق • أمثلة • مصدر أمثلة

نسخة ألفا

حول CAMPLE.JS؟

Cample.js هو إطار JavaScript مفتوح المصدر لإنشاء واجهات المستخدم. يعمل الإطار على نهج قائم على المكون ، حيث يمكن ربط كل مكون عن طريق استيراد الحالة الحالية وتصديرها. لا يستخدم Cample.js DOM الظاهري للتفاعل مع DOM الحقيقي ، مما يجعل عملية التفاعل أسرع بكثير.

الميزة الرئيسية

رسم تخطيطي للأداء من أطر JavaScript والمكتبات.
النتائج بناءً على 123 إصدار

تثبيت

لإنشاء تطبيق ، من الأفضل استخدام أمر CAMPLE-Start الرسمي لإنشاء "نقطة انطلاق" ، يختار من نوعين متاحين حاليًا.

npx cample-start

يعتمد قالبان رئيسيان على حزامتي الوحدة النمطية مثل WebPack و Parcel. لتحديد واحد منهم من القائمة في المحطة ، يمكنك تحديد الأنسب. كلهم لديهم دعم رسمي.

أيضًا ، لتثبيت الإطار فقط ، يمكنك استخدام الأمر التالي:

npm i cample

مع هذا التثبيت ، ستظل الوظائف متاحة مباشرة من الوحدة النمطية. التثبيت باستخدام Cample-Start يحدد ببساطة ملفات البدء للتطبيق.

ابدء

بعد تعيين نقطة انطلاق التطبيق ، سيحتوي ملف JS على الرمز التالي ، أو نفس الرمز ، ولكن مع استيراد HTML.

جافا سكريبت

 const newComponent = component (
  "new-component" ,
  `<div class="component">
    <div class="clicks" data-value="{{dynamicData}}">Clicks:{{dynamicData}}</div>
    <button class="button">Click</button>
  </div>` ,
  {
    script : ( { element , functions } ) => {
      const button = element . querySelector ( ".button" ) ;
      const updateFunction = ( ) => {
        functions ?. updateClicks ( ( data ) => {
          return data + 1 ;
        } ) ;
      } ;
      button . addEventListener ( "click" , updateFunction ) ;
    } ,
    data : ( ) => {
      return {
        dynamicData : 0 ,
      } ;
    } ,
    dataFunctions : {
      updateClicks : "dynamicData"
    } ,
  }
) ;
cample ( "#app" , {
  trimHTML : true ,
} ) . render (
`<template data-cample="new-component">
</template>` ,
  {
    newComponent
  }
) ;

HTML

 < div id =" app " > </ div >

يمكنك تغيير هذا الرمز إلى أي شيء آخر تريده. يتم تقديم هذا الرمز كمثال على كيفية عمل الإطار.

الرابط مقال: البدء.

التفاعل

يتم فهم التفاعل في الإطار على أنها القدرة ، استجابة لتغييرات البيانات ، لتحديث أجزاء من رمز JavaScript أو عقد HTML التي استخدمت هذه البيانات تلقائيًا.

يوضح هذا الرسم التخطيطي أنه يتم تحديث البيانات عند استخدام وظيفة تقوم بتحديثها. هذا هو ، يبدو الأمر كما لو تم إنشاء تحديث بيانات واحد. في الإصدارات المستقبلية ، قد يتغير الهيكل قليلاً بسبب معالجة البيانات غير المتزامنة.

الرابط المقال: التفاعل.