js模板引擎介紹蒐集

時間 2019-11-30

原文原文鏈接

js模板引擎愈來愈多的獲得應用，現在已經出現了幾十種js模板引擎，國內各大互聯網公司也都開發了本身的js模板引擎（淘寶的kissy template，騰訊的artTemplate，百度的baiduTemplate等），如何從這麼多紛繁的模板引擎中選擇一款適合本身的呢，筆者最近對主流的js模板引擎（ mustache，doT，juicer，artTemplate，baiduTemplate，Handlebars， Underscore ）作了一番調研，分享出來但願對你們有用。

從這幾個指標來比較js模板引擎：

1 文件大小 - 影響網絡傳輸時間

2 執行速度（性能） - 影響響應速度，涉及模板解析和渲染

3 語法簡明/易用/靈活/自定義操做符 - 影響開發效率和維護難度

4 錯誤處理/調試 - 影響開發效率和維護難度

5 安全（XSS） - 是否防止XSS

1 文件大小（壓縮後）

Mustache：5k

doT：4k

juicer：7.65k

artTemplate(騰訊)：5k

baiduTemplate(百度)：3k

Underscore(Arale)：11.7k - 不僅是模板，還包含不少js語言加強功能

Handlebars (Arale) ： 30.5k

2 執行速度（不要迷戀速度）

對於執行速度，不得不提模板「編譯速度」和「渲染速度」。這幾個主流模板都支持將模板預編譯，而後再渲染。

這裏有一篇文章《高性能JavaScript模板引擎原理解析》，說artTemplate的速度達到理論極限，實際說的是渲染速度，它的綜合速度並不快。

通常狀況下，每頁面只有一兩個模板，執行時間差異不大。

>>這裏<<有個測試頁面，根據artTemplate的測試頁面《引擎渲染速度競賽》改的，揭示了幾個主流js模板引擎的性能狀況，大體結果截圖以下：

能夠看出artTemplate,juicer,doT比其餘模板引擎快不少。

3 語法 簡明/易用/靈活/自定義操做符 - 影響開發效率和維護難度

語法須要一段時間的使用經驗才能更深切地體會到優缺點，而且每一個人喜歡的語法風格也不一樣，這部分可能略帶我的主觀色彩。

這幾個js模板引擎的語法能夠粗略分爲兩種，一種是相似javascript的語法（doT, artTemplate, underscore），另外一種是與javascript差別較大的語法（Mustache, juicer, handlebars）。從易上手的角度來看，類javascript語法更容易被新手掌握，可是熟練掌握以後，各個模板的語法都能知足咱們的需求，能夠按我的喜愛來選擇。

Mustache 聲稱是無邏輯（logic-less）模板，沒有for、if...else...語法，但實際能夠實現循環和分支，還能夠實現更復雜的邏輯。

doT 模板語法靈活，閱讀起來很易懂。能夠方便地改形成jquery插件。

[javascript] view plain copy

<script id="Mustache" type="text/tmpl">
<ul>
{{#list}}
<li>{{{index}}}. 用戶: {{{user}}}/ 網站：{{{site}}}</li>
{{/list}}
</ul>
</script>
<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}}/ 網站：{{=val[i].site}}</li>
{{ } }}
</ul>
</script>
<script id="juicer" type="text/tmpl">
<ul>
{@each list as val}
<li>$${val.index}. 用戶: $${val.user}/ 網站：$${val.site}</li>
{@/each}
</ul>
</script>
<script id="template" type="text/tmpl">
<ul>
<% for (i = 0, l = list.length; i < l; i ++) { %>
<li><%=list[i].index%>. 用戶: <%=list[i].user%>/ 網站：<%=list[i].site%></li>
<% } %>
</ul>
</script>
<script id="underscoreTemplate" type="text/tmpl">
<ul>
<% for (var i = 0, l = list.length; i < l; i ++) { %>
<li><%=list[i].index%>. 用戶: <%=list[i].user%>/ 網站：<%=list[i].site%></li>
<% } %>
</ul>
</script>
<script id="Handlebars" type="text/tmpl">
<ul>
{{#list}}
<li>{{{index}}}. 用戶: {{{user}}}/ 網站：{{{site}}}</li>
{{/list}}
</ul>
</script>

4 錯誤處理/調試 - 影響開發效率和維護難度

artTemplate 有詳細的錯誤提示信息，查錯方便，不影響後面代碼的繼續執行

kissy template 錯誤信息直接輸出在頁面，而不是在控制檯。不影響後面代碼的繼續執行

juicer 控制檯提示模板渲染出錯，不影響後面代碼的繼續執行

mustache 沒有任何錯誤信息，不影響後面代碼的繼續執行

其餘控制檯報腳本錯誤 js執行中斷，不知道是哪裏出錯

5 安全- 是否防止XSS

以上幾個模板引擎全都支持html轉義，防止XSS

最終的一個對比：

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

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

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

介紹 X 款 JavaScript 的模板引擎。（排名不分前後順序）javascript

1. Mustachehtml

基於javascript 實現的模板引擎,相似於 Microsoft’s jQuery template plugin,但更簡單易用!前端

2. EasyTemplatejava

在使用過Freemarker模板後，感受它的語法比較樸實，平易近人，容易上手，因而決定按它的語法風格實現一個前端的模板引擎，這就有了下面的EasyTemplate! EasyTemplate模板的函數大小爲1.34k（未壓縮），暫時只實現了 list，list index，if elseif else等功能，應該能夠知足大部分的使用需求了。 EasyTemplate模板引擎的解析速度測試，渲染1000行數據，在不一樣的瀏覽器中，平均速度大約在30豪秒之內（測試機器性能較弱）。node

3. jSmartjquery

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

4. Trimpathgithub

Trimpath JavaScript 是個輕量級的，基於JavaScript的，跨瀏覽器，採用APL/GPL開放源代碼協議的，可讓你輕鬆進行基於模板編程方式的純JS引擎。新浪的評論系統使用的就是此模板。編程

5. jade瀏覽器

Jade是受Haml的影響以JavaScript實現用於node的高性能模板引擎。

6. Hogan.js

來自 Twitter 的 JavaScript 模板引擎。

7. Handlebars

Handlebars 是一個 JavaScript 的頁面模板庫

8. doT.js

doT.js 包含爲瀏覽器和Node.js 準備的 JavaScript 模板引擎。