Ein kleines, einfaches und schnelles Dienstprogramm zur DOM-Erstellung
HTML zu schreiben ist dumm. Es ist langsam, chaotisch und sollte nicht in JavaScript durchgeführt werden.
Der beste Weg, DOM-Elemente zu erstellen, ist über document.createElement
, aber viele davon damit zu erstellen ist mühsam.
Crel erleichtert diesen Prozess.
Die Inspiration wurde von Laconic übernommen, aber Crel wird sich nicht mit Ihren schlechten In-DOM-Ereignis-Listenern anlegen, und es ist kleiner, schneller usw.
Änderungsprotokoll anzeigen
Für browserify:
npm i crel
let crel = require ( 'crel' ) ;
Für AMD:
require . config ( { paths : { crel : 'https://cdnjs.cloudflare.com/ajax/libs/crel/4.0.1/crel.min' } } ) ;
require ( [ 'crel' ] , ( crel ) => {
// Your code
} ) ;
Mit ES6+:
import crel from 'crel' ;
Für den Standard-Skript-Tag-Stil:
< script src =" crel.min.js " > </ script >
Syntax:
// Returns a DOM element
crel ( tagName / domElement , attributes , child1 , child2 , childN ) ;
wobei childN
sein kann:
textNode
eingefügt wird,null
, was ignoriert wird, oderArray
das eines der oben genannten enthält let element = crel ( 'div' ,
crel ( 'h1' , 'Crello World!' ) ,
crel ( 'p' , 'This is crel' ) ,
crel ( 'input' , { type : 'number' } )
) ;
// Do something with 'element'
Sie können Attribute hinzufügen, deren Namen Bindestriche oder reservierte Schlüsselwörter enthalten, indem Sie Zeichenfolgen für die Objektschlüssel verwenden:
crel ( 'div' , { 'class' : 'thing' , 'data-attribute' : 'majigger' } ) ;
Sie können benutzerdefinierte Funktionen für bestimmte Schlüssel definieren, die im Attributobjekt angezeigt werden:
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' ) ;
}
} } ) ;
Sie können bereits verfügbare Elemente an Crel übergeben, um deren Attribute zu ändern bzw. untergeordnete Elemente hinzuzufügen
crel ( document . body , crel ( 'h1' , 'Page title' ) ) ;
Sie können Variablen während der Erstellung untergeordnete Elemente zuweisen:
let button ;
let wrapper = crel ( 'div' ,
button = crel ( 'button' )
) ;
Sie könnten Crel wahrscheinlich verwenden, um vorhandene DOM-Elemente neu anzuordnen.
crel ( someDiv , crel ( someOtherDiv , anotherOne ) ) ;
Aber nicht.
Wenn Sie Crel in einer Umgebung verwenden, die Proxies unterstützt, können Sie auch die neue API verwenden:
let crel = require ( 'crel' ) . proxy ;
let element = crel . div (
crel . h1 ( 'Crello World!' ) ,
crel . p ( 'This is crel' ) ,
crel . input ( { type : 'number' } )
) ;
Crel verwendet ES6-Funktionen und funktioniert daher in allen immer neuen Browsern.
Weniger als 1 KB minimiert, ca. 500 Byte gzippt === Klein
Crel ist schnell. Je nachdem, welchen Browser Sie verwenden, gibt es dort oben direkte document.createElement
-Aufrufe: http://jsperf.com/dom-creation-libs/10
MIT