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 相符的元素數組。