js模板引擎介紹搜集

ThinkTank_引擎 2015-03-12

展開全文

1 文件大小（壓縮后）

Mustache：5k

doT：4k

juicer：7.65k

artTemplate(騰訊)：5k

baiduTemplate(百度)：3k

Underscore(Arale)：11.7k - 不只是模板,，還包含很多js語(yǔ)言增強(qiáng)功能

Handlebars(Arale)：30.5k

2 執(zhí)行速度（不要迷戀速度）

對(duì)于執(zhí)行速度,，不得不提模板“編譯速度”和“渲染速度”。這幾個(gè)主流模板都支持將模板預(yù)編譯,，然后再渲染,。

這里有一篇文章《高性能JavaScript模板引擎原理解析》，說artTemplate的速度達(dá)到理論極限,，實(shí)際說的是渲染速度,，它的綜合速度并不快。

一般情況下,，每頁(yè)面只有一兩個(gè)模板,，執(zhí)行時(shí)間差別不大。

>>這里<<有個(gè)測(cè)試頁(yè)面,，根據(jù)artTemplate的測(cè)試頁(yè)面《引擎渲染速度競(jìng)賽》改的,，揭示了幾個(gè)主流js模板引擎的性能情況，大致結(jié)果截圖如下：

可以看出artTemplate,juicer,doT比其他模板引擎快很多,。

3 語(yǔ)法 簡(jiǎn)明/易用/靈活/自定義操作符 - 影響開發(fā)效率和維護(hù)難度

語(yǔ)法需要一段時(shí)間的使用經(jīng)驗(yàn)才能更深切地體會(huì)到優(yōu)缺點(diǎn),，并且每個(gè)人喜歡的語(yǔ)法風(fēng)格也不同，這部分可能略帶個(gè)人主觀色彩,。

這幾個(gè)js模板引擎的語(yǔ)法可以粗略分為兩種,，一種是類似javascript的語(yǔ)法（doT, artTemplate, underscore），另一種是與javascript差異較大的語(yǔ)法（Mustache, juicer, handlebars）,。從易上手的角度來(lái)看,，類javascript語(yǔ)法更容易被新手掌握,，但是熟練掌握之后，各個(gè)模板的語(yǔ)法都能滿足我們的需求,，可以按個(gè)人喜好來(lái)選擇,。

Mustache聲稱是無(wú)邏輯（logic-less）模板，沒有for,、if...else...語(yǔ)法,，但實(shí)際可以實(shí)現(xiàn)循環(huán)和分支，還可以實(shí)現(xiàn)更復(fù)雜的邏輯,。

doT模板語(yǔ)法靈活,，閱讀起來(lái)很易懂。可以方便地改造成jquery插件,。

[javascript] view plaincopy 
<!--Mustache 的模板 -->   
<script id="Mustache" type="text/tmpl">   
<ul>   
    {{#list}}   
        <li>{{{index}}}. 用戶: {{{user}}}/ 網(wǎng)站：{{{site}}}</li>   
    {{/list}}   
</ul>   
</script>   
   
<!-- doT 的模板 -->   
<script id="doT" type="text/tmpl">   
<ul>   
    {{ for (var val, i = 0, l = it.list.length; i < l; i ++) { }}   
        {{ val = it.list; }}   
        <li>{{=val[i].index}}. 用戶: {{=val[i].user}}/ 網(wǎng)站：{{=val[i].site}}</li>   
    {{ } }}   
</ul>   
</script>   
   
<!--juicer 的模板 -->   
<script id="juicer" type="text/tmpl">   
<ul>   
    {@each list as val}   
        <li>val.index.用戶:
{val.user}/ 網(wǎng)站：$${val.site}</li>   
    {@/each}   
</ul>   
</script>   
   
<!-- artTemplate 的模板 -->   
<script id="template" type="text/tmpl">   
<ul>   
    <% for (i = 0, l = list.length; i < l; i ++) { %>   
        <li><%=list[i].index%>. 用戶: <%=list[i].user%>/ 網(wǎng)站：<%=list[i].site%></li>   
    <% } %>   
</ul>   
</script>   
   
<!-- underscore 的模板 -->   
<script id="underscoreTemplate" type="text/tmpl">   
<ul>   
    <% for (var i = 0, l = list.length; i < l; i ++) { %>   
        <li><%=list[i].index%>. 用戶: <%=list[i].user%>/ 網(wǎng)站：<%=list[i].site%></li>   
    <% } %>   
</ul>   
</script>   
   
<!-- Handlebars 的模板 -->   
<script id="Handlebars" type="text/tmpl">   
<ul>   
    {{#list}}   
        <li>{{{index}}}. 用戶: {{{user}}}/ 網(wǎng)站：{{{site}}}</li>   
    {{/list}}   
</ul>   
</script>  

4 錯(cuò)誤處理/調(diào)試 - 影響開發(fā)效率和維護(hù)難度

artTemplate 有詳細(xì)的錯(cuò)誤提示信息,，查錯(cuò)方便，不影響后面代碼的繼續(xù)執(zhí)行

kissy template 錯(cuò)誤信息直接輸出在頁(yè)面,，而不是在控制臺(tái),。不影響后面代碼的繼續(xù)執(zhí)行

juicer 控制臺(tái)提示模板渲染出錯(cuò),，不影響后面代碼的繼續(xù)執(zhí)行

mustache 沒有任何錯(cuò)誤信息,，不影響后面代碼的繼續(xù)執(zhí)行

其他控制臺(tái)報(bào)腳本錯(cuò)誤 js執(zhí)行中斷，不知道是哪里出錯(cuò)

5 安全- 是否防止XSS

以上幾個(gè)模板引擎全都支持html轉(zhuǎn)義,，防止XSS

最終的一個(gè)對(duì)比：

,、、,、,、、,、,、、,、,、、,、,、、,、,、、,、,、,、、,、,、、,、,、、,、,、、,、,、、,、,、、,、,、、,、,、、,、,、、,、,、

**********************************************************************************************

、,、,、、,、,、、,、,、、,、,、,、、,、,、、,、,、、,、,、、,、,、、,、,、、,、,、、,、,、、,、、,、,、、,、,、、,、,、、,、

介紹 X 款 JavaScript 的模板引擎,。（排名不分先后順序）

1. Mustache

基于javascript 實(shí)現(xiàn)的模板引擎,類似于 Microsoft’s jQuery template plugin,但更簡(jiǎn)單易用!

2. EasyTemplate

在使用過Freemarker模板后，感覺它的語(yǔ)法比較樸實(shí),，平易近人,，容易上手,，于是決定按它的語(yǔ)法風(fēng)格實(shí)現(xiàn)一個(gè)前端的模板引擎，這就有了下面的EasyTemplate! EasyTemplate模板的函數(shù)大小為1.34k（未壓縮）,，暫時(shí)只實(shí)現(xiàn)了 list,，list index，if elseif else等功能,，應(yīng)該可以滿足大部分的使用需求了,。 EasyTemplate模板引擎的解析速度測(cè)試，渲染1000行數(shù)據(jù),，在不同的瀏覽器中,，平均速度大約在30豪秒以內(nèi)（測(cè)試機(jī)器性能較弱）。

3. jSmart

jSmart 是著名的 PHP 模板引擎 Smarty 的 JavaScript 移植版本,。

4. Trimpath

Trimpath JavaScript 是個(gè)輕量級(jí)的,，基于JavaScript的，跨瀏覽器,，采用APL/GPL開放源代碼協(xié)議的,，可以讓你輕松進(jìn)行基于模板編程方式的純JS引擎。新浪的評(píng)論系統(tǒng)使用的就是此模板,。

5. jade

Jade是受Haml的影響以JavaScript實(shí)現(xiàn)用于node的高性能模板引擎,。

6. Hogan.js

來(lái)自 Twitter 的 JavaScript 模板引擎。

7. Handlebars

Handlebars 是一個(gè) JavaScript 的頁(yè)面模板庫(kù)

Javascript-280 in Useful JavaScript and jQuery Tools, Libraries, Plugins

8. doT.js

doT.js 包含為瀏覽器和Node.js 準(zhǔn)備的 JavaScript 模板引擎,。

9. dom.js

dom.js 是一款可用在客戶端和服務(wù)器端的 JavaScript 模板引擎

10. Plates.js

Plates.js 是一個(gè)輕量級(jí),、無(wú)邏輯、DSL 的 JavaScript 模板引擎,。

11. ICanHaz.js

ICanHaz.js 是一個(gè)簡(jiǎn)單而且功能強(qiáng)大的客戶端的 JavaScript 模板引擎,。

12. dotpl-js

Dotpl-JS 是一個(gè)純javascript模板引擎,支持IF和FOR關(guān)鍵字，多循環(huán)銜套及字段渲染,，跨瀏覽器支持,。是一個(gè)實(shí)用的javascipt工具,頁(yè)面靜態(tài)化利器!

13. EJS

EJS 可以將數(shù)據(jù)和模板合并然后生成 HTML 文本。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買等信息,，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請(qǐng)點(diǎn)擊一鍵舉報(bào),。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： ThinkTank_引擎 > 《JavaScript》

舉報(bào)/認(rèn)領(lǐng)