ดาวน์โหลด crel - ดาวน์โหลด crel ซอร์สโค้ด

crel

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

เครล

อะไร

ยูทิลิตี้การสร้าง DOM ขนาดเล็ก เรียบง่าย และรวดเร็ว

ทำไม

การเขียน HTML เป็นเรื่องโง่ มันช้า ยุ่งเหยิง และไม่ควรทำใน JavaScript

วิธีที่ดีที่สุดในการสร้างองค์ประกอบ DOM คือผ่าน document.createElement แต่การใช้องค์ประกอบเหล่านี้เป็นจำนวนมากนั้นน่าเบื่อ

Crel ทำให้กระบวนการนี้ง่ายขึ้น

แรงบันดาลใจมาจากการพูดน้อย แต่ 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 ในสภาพแวดล้อมที่รองรับ Proxies คุณยังสามารถใช้ API ใหม่ได้:

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

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