crelダウンロード - crelソースコードのダウンロード

crel

その他のソースコード

1.0.0

ダウンロード

クレル

何

小さく、シンプルで、高速な DOM 作成ユーティリティ

なぜ

HTMLを書くのは愚かです。これは遅くて面倒なので、JavaScript で実行すべきではありません。

DOM 要素を作成する最良の方法はdocument.createElementを使用することですが、それを使用して多数の要素を作成するのは面倒です。

Crel を使用すると、このプロセスが簡単になります。

インスピレーションは laconic から得られましたが、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' } )
) ;