crel

Что

Небольшая, простая и быстрая утилита для создания 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 в среде, поддерживающей прокси, вы также можете использовать новый API:

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

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

Поддержка браузера

Crel использует функции ES6, поэтому он будет работать во всех вечнозеленых браузерах.

Цели

Простой в использовании и крошечный

Минифицировано менее 1 КБ, сжато около 500 байт === Smal

Быстрый

Крел быстрый. В зависимости от того, какой браузер вы используете, он имеет прямые вызовы document.createElement : http://jsperf.com/dom-creation-libs/10

Лицензия

Массачусетский технологический институт