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