crel

Apa

Utilitas pembuatan DOM yang kecil, sederhana, dan cepat

Mengapa

Menulis HTML itu bodoh. Ini lambat, berantakan, dan tidak boleh dilakukan dalam JavaScript.

Cara terbaik untuk membuat elemen DOM adalah melalui document.createElement , tetapi membuat banyak elemen DOM adalah hal yang membosankan.

Crel membuat proses ini lebih mudah.

Inspirasi diambil dari singkat, tetapi Crel tidak akan mengacaukan pendengar acara dalam DOM Anda yang buruk, dan ini lebih kecil, lebih cepat, dll...

log perubahan

Lihat log perubahan

Menginstal

Untuk browserifikasi:

npm i crel

 let crel = require ( 'crel' ) ;

Untuk AMD:

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

Menggunakan ES6+:

 import crel from 'crel' ;

Untuk gaya tag skrip standar:

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

Penggunaan

Sintaksis:

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

di mana childN mungkin:

• elemen DOM,
• sebuah string, yang akan dimasukkan sebagai textNode ,
• null , yang akan diabaikan, atau
• Array yang berisi salah satu hal di atas

Contoh

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

// Do something with 'element'

Anda dapat menambahkan atribut yang memiliki tanda hubung atau kata kunci khusus pada namanya, dengan menggunakan string untuk kunci objek:

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

Anda dapat menentukan fungsionalitas khusus untuk kunci tertentu yang terlihat di objek atribut:

 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' ) ;
    }
} } ) ;

Anda dapat meneruskan elemen yang sudah tersedia ke Crel untuk mengubah atributnya/menambahkan elemen turunan ke dalamnya

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

Anda dapat menetapkan elemen anak ke variabel selama pembuatan:

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

Anda mungkin bisa menggunakan Crel untuk mengatur ulang elemen DOM yang ada..

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

Tapi jangan.

Dukungan proksi

Jika Anda menggunakan Crel di lingkungan yang mendukung Proksi, Anda juga dapat menggunakan API baru:

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

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

Dukungan peramban

Crel menggunakan fitur ES6, sehingga dapat berfungsi di semua browser yang selalu ada.

Sasaran

Mudah digunakan & Mungil

Kurang dari 1K diperkecil, sekitar 500 byte di-gzip === Smal

Cepat

Creel cepat. Bergantung pada browser apa yang Anda gunakan, itu ada di sana dengan panggilan langsung document.createElement : http://jsperf.com/dom-creation-libs/10

Lisensi

MIT