背景：

用于公司項目，產品訴求：

1，可編譯，高性能。

2，簡單/靈活的include

3，簡潔的語法

?

故決定自行開發一個引擎名為：Elapse

?

?

需求樣例：渲染一個數據表格：

模板：

<table><thead><tr><th>姓名</th><th>性別</th><th>生日</th></tr></thead><tbody>${forarr #userList as user}<tr><td>${user.name}</td><td>${user.sex}</td><td>${user.birthday}</td></tr>${/forarr}</tbody></table>

?

注入到模板的數據：

{"userList": [{"name": "小明","sex": "男","birthday": "1989-10-29"},{"name": "小紅","sex": "女","birthday": "1989-10-1"}]}

??

渲染代碼：

var template = $("#template").val();var json = $.parseJSON($("#json").val());//渲染代碼開始Elapse.renderFromSource({source: template,data: json,complete: function (text) {$("#result").html(text);}});//渲染代碼結束

?

渲染結果：

?

<table><thead><tr><th>姓名</th><th>性別</th><th>生日</th></tr></thead><tbody><tr><td>小明</td><td>男</td><td>1989-10-29</td></tr><tr><td>小紅</td><td>女</td><td>1989-10-1</td></tr></tbody></table> ?

簡單的變量訪問機制：

?

訪問用戶變量：${#userList} ${#userList.length}訪問JS全局變量：${@location.href}訪問系統生成的臨時變量： ${curUser} ?

?

為常用需求優化的關鍵字：

循環數組：

${forarr #userList as user}列表長度為:${#userList.length},現在循環到了${user#index},值:${user}${/forarr}

??

循環對象：

${foreach #colors as color}顏色${color#key}的十六進制值為:${color}${/foreach} ??

? 單純循環：

循環十次:${loop 10 as ls}循環步進為${ls#step},循環到了${ls},循環到${ls#over}即結束。${/loop}循環十次，每次遞增2:${loop 10,2 as ls}循環步進為${ls#step},循環到了${ls},循環到${ls#over}即結束。${/loop}循環十次，每次遞增2,初始值為5:${loop 10,2,5 as ls}循環步進為${ls#step},循環到了${ls},循環到${ls#over}即結束。${/loop}

?

while循環：

${while true}一次循環立馬退出${break}${/while}

if語句：

${if #userList.length == 3}用戶列表長度為3${/if}

?

else語句：

${if #userList.length == 3}用戶列表長度為3${else}用戶列表長度不為3${/if} ??

elseif語句：

${if #userList.length == 3}用戶列表長度為3${elseif #userList.length == 0}用戶列表長度為0${else}用戶列表長度不為3${/if}

?

switch語句：

${switch #userList.length}${case 0}用戶列表長度為空。${break}${case 1}用戶列表長度為1。${break}${case 2}用戶列表長度為2。${break}${case 3}用戶列表長度為3。${break}${default}神馬啊。。。${/switch} ?

定義變量：

將一個變量賦null:${eval #userList[0] = null}定義一個變量,必須定義在#下:${eval #myvar = "hello world!"}

?

給模板命名（注冊模板）：

設置模板的name為“userlist”${name userlist} ?

簡單的模板包含：

包含名稱為“userlist”的模板：${include userlist}包含名稱為“userlist”的模板,并且向其注入一些數據：${include userlist:#userList}

?

系統如何找到包含的模板？：

Elapse.setLoader({loader: function (name, setter) { //設置loader函數，當系統需要的模板未注冊的話，會調用此方法。//name: 需要的模板的名稱//setter: 接收模板方法。//定義你的獲取方式：來自dom、來自遠程。。。我這里是來自遠程。 $.ajax({url: "/getTemplate",data: "name=" + name,type: "get",dataType: "text",success: function (source) {setter(source);}});}});//你只需要滿足loader的調用即可，只有當以上代碼的“setter”參數接收了模板源文件，系統才認為得到了此模板。你對模板加載大可放心，一切都由引擎調度好了。

?

最終產品特點：

? ? ? ? 1，語法簡單。由于我們是基于JS語法，并做增強，所以學習成本低。且功能強大。

? ? ? ? ? 2，可編譯，高性能。經測試，編譯后的運行效率和市面上大部分模板引擎效率持平，或更高。

? ? ? ? ? 3，簡單的include。只需配置一個loader（加載器），便可支持各種模板來源，并自動從來源獲取模板。

?

詳細文檔見附件，打開guide.html即文檔，勿用ie查看，文檔樣式不兼容。

項目開源，github：https://github.com/yinhang/Elapse

?

歡迎你的使用，并期待加入此項目一同開發。

?

總結

以上是生活随笔為你收集整理的JavaScript模板引擎 - Elapse的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。