element creator

元素创建者

一个有助于轻松创建交互式 HTML 元素（虚拟 dom）的库。受到 MithrilJs 框架的启发。

• 安装
• 示例
• 文档

安装

element-creator 可在 NPM 上使用并作为 Javascript 库使用。

在 NPM 上安装

 npm install element-creator

或者包含在 unpkg 上的 html 文件中

 < script  type =" text/javascript " src =" https://unpkg.com/[email protected]/build/element-creator.min.js " > </ script > 

示例：

位于build/index.html的一页内容示例。或者下面的快速演示

 // using node with es6, otherwise var e = require('element-creator');
import e from 'element-creator' ;

var myDiv = e ( 'div#myElement.class__1[name=awesome-div]' , 'My awesome div' , {
    on : { 'click' : function ( e ) {
        alert ( 'You have clicked on My awesome div' ) ;
    } }
} )

上面的变量myDiv生成带有支持警报消息的click事件的div html 元素。

 < div id =" myElement " class =" class__1 " name =" awesome-div " > My awesome div </ div > 

文档

element-creator 包含Elementextended （或包装器），它将交互函数（例如.find 、 .all ）包装/添加到标准元素和ElementCreator ，它创建 HTML 元素，然后包装并返回 ElementExtended 元素。

元素生成器

 // vdom return new element
var vdom = e ( elementString , children , options )

在哪里：

• elementString是指定元素参数创建的字符串，其模式如下：

{elementType}{(*)elementId}{(*)elementClasses}{(*)elementAttributes}

(*) 是可选的

参数	默认	描述	例子
元素类型	分区	元素的类型或元素的标签类型	p或h1 。使用默认值以防留空
元素ID		元素的id	#firstParagraph
元素类		元素类	.class__1或多个类.class__1.class_2
元素属性		元素属性	[name=title]或多个属性[name=title,ref=titleRef]

• children是保留在元素内部的文本节点或 html 元素。

• 选项操作系统其他配置包括：

  • on：添加事件监听器
  • attrs：元素的属性
  • data：元素的数据

元素扩展

 // wrappedElement return a html element within the html body with more interactive functions
var wrappedElement = e . wrap ( querySelector , isMultiple )

在哪里：

• querySelector是标准查询选择器字符串，例如h1将查找标题h1 ， .class__1将查找具有类.class__1的任何元素。
• isMultiple默认为false 。如果设置为true它将返回与 querySelector 匹配的元素数组。