背景：

用于公司項目，產(chǎn)品訴求：

1，可編譯，高性能。

2，簡單/靈活的include

3，簡潔的語法

?

故決定自行開發(fā)一個引擎名為：Elapse

?

?

需求樣例：渲染一個數(shù)據(jù)表格：

模板：

<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>

?

注入到模板的數(shù)據(jù)：

{"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);}});//渲染代碼結(jié)束

?

渲染結(jié)果：

?

<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}訪問系統(tǒng)生成的臨時變量： ${curUser} ?

?

為常用需求優(yōu)化的關(guān)鍵字：

循環(huán)數(shù)組：

${forarr #userList as user}列表長度為:${#userList.length},現(xiàn)在循環(huán)到了${user#index},值:${user}${/forarr}

??

循環(huán)對象：

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

? 單純循環(huán)：

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

?

while循環(huán)：

${while true}一次循環(huán)立馬退出${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!"}

?

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

設(shè)置模板的name為“userlist”${name userlist} ?

簡單的模板包含：

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

?

系統(tǒng)如何找到包含的模板？：

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

?

最終產(chǎn)品特點：

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

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

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

?

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

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

?

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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。