crel

Quoi

Un petit utilitaire de création DOM simple et rapide

Pourquoi

Écrire du HTML est stupide. C'est lent, compliqué et ne devrait pas être fait en JavaScript.

La meilleure façon de créer des éléments DOM est via document.createElement , mais en créer beaucoup avec est fastidieux.

Crel facilite ce processus.

L'inspiration est venue du laconique, mais Crel ne se fout pas de vos mauvais auditeurs d'événements dans le DOM, et c'est plus petit, plus rapide, etc...

Journal des modifications

Afficher le journal des modifications

Installation

Pour navigateur:

npm i crel

 let crel = require ( 'crel' ) ;

Pour AMD :

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

Utilisation d'ES6+ :

 import crel from 'crel' ;

Pour le style de balise de script standard :

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

Usage

Syntaxe:

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

où childN peut être :

• un élément DOM,
• une chaîne, qui sera insérée en tant que textNode ,
• null , qui sera ignoré, ou
• un Array contenant l'un des éléments ci-dessus

Exemples

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

// Do something with 'element'

Vous pouvez ajouter des attributs comportant des tirets ou des mots-clés réservés dans le nom, en utilisant des chaînes pour les clés des objets :

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

Vous pouvez définir des fonctionnalités personnalisées pour certaines clés vues dans l'objet attributs :

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

Vous pouvez transmettre des éléments déjà disponibles à Crel pour modifier leurs attributs/leur ajouter des éléments enfants

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

Vous pouvez affecter des éléments enfants à des variables lors de la création :

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

Vous pourriez probablement utiliser Crel pour réorganiser les éléments DOM existants.

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

Mais non.

Prise en charge des proxys

Si vous utilisez Crel dans un environnement prenant en charge les proxys, vous pouvez également utiliser la nouvelle API :

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

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

Prise en charge du navigateur

Crel utilise les fonctionnalités ES6, il fonctionnera donc dans tous les navigateurs persistants.

Objectifs

Facile à utiliser et petit

Moins de 1 Ko minifié, environ 500 octets gzippés === Smal

Rapide

Crel est rapide. Selon le navigateur que vous utilisez, il se trouve là-haut avec les appels directs document.createElement : http://jsperf.com/dom-creation-libs/10

Licence

MIT