crel下載 - crel原始碼下載

crel

其他源碼

1.0.0

下載

克雷爾

什麼

一個小、簡單、快速的 DOM 創建實用程序

為什麼

編寫 HTML 是愚蠢的。它很慢、很混亂，不應該用 JavaScript 來完成。

製作 DOM 元素的最佳方法是透過document.createElement ，但用它來製作大量元素是乏味的。

Crel 讓這個過程變得更容易。

靈感來自簡潔，但 Crel 不會與糟糕的 DOM 內事件偵聽器搞混，而且它更小、更快等等…

變更日誌

查看變更日誌

安裝中

對於瀏覽器化：

npm i crel

 let crel = require ( 'crel' ) ;

對於 AMD：

 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，您也可以使用新的 API：

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

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