目前客戶端資源極為強大，而服務器資源也應不斷優(yōu)化，將頁面的html拼接轉(zhuǎn)接到客戶端完成，節(jié)省服務器資源，且更加易于維護，這為今后工作帶來了很大便利。
再可以將前后端代碼分離，崗位清晰，使后臺程序人員可更好的去完成邏輯運算，而前端人員崗位更加專精、統(tǒng)一。
js模板引擎越來越多的得到應用，如今已經(jīng)出現(xiàn)了幾十種js模板引擎，國內(nèi)各大互聯(lián)網(wǎng)公司也都開發(fā)了自己的js模板引擎（淘寶的kissy template，騰訊的artTemplate，百度的baiduTemplate等），如何從這么多紛繁的模板引擎中選擇一款適合自己的呢，筆者最近對主流的js模板引擎（mustache，doT，juicer，artTemplate，baiduTemplate，Handlebars，Underscore）做了一番調(diào)研，分享出來希望對大家有用。
從這幾個指標來比較js模板引擎：
1 文件大小 - 影響網(wǎng)絡傳輸時間 2 執(zhí)行速度（性能） - 影響響應速度，涉及模板解析和渲染 3 語法簡明/易用/靈活/自定義操作符 - 影響開發(fā)效率和維護難度 4 錯誤處理/調(diào)試 - 影響開發(fā)效率和維護難度 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 執(zhí)行速度（不要迷戀速度） 對于執(zhí)行速度，不得不提模板“編譯速度”和“渲染速度”。這幾個主流模板都支持將模板預編譯，然后再渲染。 這里有一篇文章《高性能JavaScript模板引擎原理解析》，說artTemplate的速度達到理論極限，實際說的是渲染速度，它的綜合速度并不快。 一般情況下，每頁面只有一兩個模板，執(zhí)行時間差別不大。 >>這里<<有個測試頁面，根據(jù)artTemplate的測試頁面《引擎渲染速度競賽》改的，揭示了幾個主流js模板引擎的性能情況，大致結(jié)果截圖如下：
3 語法 簡明/易用/靈活/自定義操作符 - 影響開發(fā)效率和維護難度
語法需要一段時間的使用經(jīng)驗才能更深切地體會到優(yōu)缺點，并且每個人喜歡的語法風格也不同，這部分可能略帶個人主觀色彩。 這幾個js模板引擎的語法可以粗略分為兩種，一種是類似javascript的語法（doT, artTemplate, underscore），另一種是與javascript差異較大的語法（Mustache, juicer, handlebars）。從易上手的角度來看，類javascript語法更容易被新手掌握，但是熟練掌握之后，各個模板的語法都能滿足我們的需求，可以按個人喜好來選擇。
Mustache聲稱是無邏輯（logic-less）模板，沒有for、if...else...語法，但實際可以實現(xiàn)循環(huán)和分支，還可以實現(xiàn)更復雜的邏輯。 doT模板語法靈活，閱讀起來很易懂。可以方便地改造成jquery插件。
<!--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 錯誤處理/調(diào)試 - 影響開發(fā)效率和維護難度 artTemplate 有詳細的錯誤提示信息，查錯方便，不影響后面代碼的繼續(xù)執(zhí)行 kissy template 錯誤信息直接輸出在頁面，而不是在控制臺。不影響后面代碼的繼續(xù)執(zhí)行 juicer 控制臺提示模板渲染出錯，不影響后面代碼的繼續(xù)執(zhí)行 mustache 沒有任何錯誤信息，不影響后面代碼的繼續(xù)執(zhí)行 其他控制臺報腳本錯誤 js執(zhí)行中斷，不知道是哪里出錯
5 安全- 很重要。是否防止XSS 以上幾個模板引擎全都支持html轉(zhuǎn)義，防止XSS
最終的一個對比：
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費用，即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網(wǎng)站建設。