crel

ماذا

أداة مساعدة صغيرة وبسيطة وسريعة لإنشاء DOM

لماذا

كتابة HTML أمر غبي. إنه بطيء وفوضوي ولا ينبغي إجراؤه في JavaScript.

أفضل طريقة لإنشاء عناصر DOM هي عبر document.createElement ، لكن إنشاء الكثير منها أمر شاق.

كريل يجعل هذه العملية أسهل.

تم أخذ الإلهام من الاقتضاب، لكن Crel لن يفسد مستمعيك السيئين للحدث في DOM، وهو أصغر وأسرع وما إلى ذلك...

سجل التغيير

عرض سجل التغيير

التثبيت

للمتصفح:

npm i crel

 let crel = require ( 'crel' ) ;

بالنسبة إلى أيه إم دي:

 require . config ( { paths : { crel : 'https://cdnjs.cloudflare.com/ajax/libs/crel/4.0.1/crel.min' } } ) ;
require ( [ 'crel' ] , ( crel ) => {
    // Your code
} ) ;

باستخدام ES6+:

 import crel from 'crel' ;

بالنسبة لنمط علامة البرنامج النصي القياسي:

 < script src =" crel.min.js " > </ script >

الاستخدام

بناء الجملة:

 // Returns a DOM element
crel ( tagName / domElement , attributes , child1 , child2 , childN ) ;

حيث قد يكون childN :

• عنصر DOM،
• سلسلة سيتم إدراجها كـ textNode ،
• null ، والذي سيتم تجاهله، أو
• Array تحتوي على أي مما سبق

أمثلة

 let element = crel ( 'div' ,
    crel ( 'h1' , 'Crello World!' ) ,
    crel ( 'p' , 'This is crel' ) ,
    crel ( 'input' , { type : 'number' } )
) ;

// Do something with 'element'

يمكنك إضافة سمات تحتوي على شرطات أو كلمات أساسية محجوزة في الاسم، باستخدام سلاسل لمفاتيح الكائنات:

 crel ( 'div' , { 'class' : 'thing' , 'data-attribute' : 'majigger' } ) ;

يمكنك تحديد وظائف مخصصة لبعض المفاتيح التي تظهر في كائن السمات:

 crel . attrMap [ 'on' ] = ( element , value ) => {
    for ( let eventName in value ) {
        element . addEventListener ( eventName , value [ eventName ] ) ;
    }
} ;
// Attaches an onClick event to the img element
crel ( 'img' , { on : {
    click : ( ) => {
        console . log ( 'Clicked' ) ;
    }
} } ) ;

يمكنك تمرير العناصر المتوفرة بالفعل إلى Crel لتعديل سماتها/إضافة عناصر فرعية إليها

 crel ( document . body , crel ( 'h1' , 'Page title' ) ) ;

يمكنك تعيين عناصر فرعية للمتغيرات أثناء الإنشاء:

 let button ;
let wrapper = crel ( 'div' ,
    button  = crel ( 'button' )
) ;

ربما يمكنك استخدام Crel لإعادة ترتيب عناصر DOM الموجودة.

 crel ( someDiv , crel ( someOtherDiv , anotherOne ) ) ;

لكن لا تفعل ذلك.

دعم الوكيل

إذا كنت تستخدم Crel في بيئة تدعم الوكلاء، فيمكنك أيضًا استخدام واجهة برمجة التطبيقات الجديدة:

 let crel = require ( 'crel' ) . proxy ;

let element = crel . div (
    crel . h1 ( 'Crello World!' ) ,
    crel . p ( 'This is crel' ) ,
    crel . input ( { type : 'number' } )
) ;

دعم المتصفح

يستخدم Crel ميزات ES6، لذا فهو يعمل في جميع المتصفحات دائمة الخضرة.

الأهداف

سهل الاستخدام وصغير الحجم

أقل من 1 كيلو بايت مصغر، حوالي 500 بايت مضغوطة بصيغة gzipped === Smal

سريع

كريل سريع. اعتمادًا على المتصفح الذي تستخدمه، فإنه موجود هناك من خلال استدعاءات document.createElement المباشرة: http://jsperf.com/dom-creation-libs/10

رخصة

معهد ماساتشوستس للتكنولوجيا