來源：http://h5apps.diandian.com/html/js_template.html

前端JS模板

后端模板技術有很多如Smarty，velocity等，前端模板概念和后端相同，也就是在前端來負責模板解析和數據渲染。

隨著前端ajax的應用，無刷新頁面數據傳輸與渲染越發地頻繁化，傳統方式在數據渲染方面存在著一個主要問題：繁瑣的數據渲染。各種循環操作的字符串拼接，元素創建插入，在需要修改時，都需要重新花費不少時間與精力。

如果你還沒用過JS模板，那你可以在ajax交互性強以及需要頻繁渲染數據的項目做些嘗試，相信他一定會讓你有所收獲。

現有的JS模板很多,jquery template、kissy template、easy template、ace template,lite template等等，各有各的優點，性能方面都蠻不錯的。如果你想了解他們，請移步：http://www.baiduux.com/blog/2011/07/11/introduction-of-template/

這次項目中我也用到模板技術，用的是Mustache，了解twitter和豆瓣的人一定對他有所了解。Twitter在前端渲染和后端用的都是Mustache，這樣就可以保證一致，在不支持javascript的情況下，可以通過后臺渲染。豆瓣在豆瓣說項目中用到了backbone和Mustache等等技術，克軍戲說2010最牛逼的網站改版，除了豆瓣就是Twitter了，哈哈。。其實我覺得我還是非常仰慕豆瓣團隊的，能很快的將新技術應用到實際項目中（雖然backbone算不上新技術）。

跑題了，Mustache是一個Logic-less template，比如以上的jquery template時你的模板應該如下：

<% for (var i=0;i<list.length;i++){ %><li><a href="<%=list[i].url%>"> <%=list[i].name%></a></li><% } %>

我們一眼就能看出來， for循環讓模板看的沒有那么干凈沒有那么純粹。而Mustache寫法如下：

{{#list}}<li><a href="{{url}}"> {{name}}</a></li> {{/list}}

模板看起來很干凈，或許你會說jquery template中可以構建如下邏輯的模板，

<% for (var i=0;i<list.length;i++){ %><% if (i<100) { %><li>小于100 這里是第<%=i%>列：<%=list[i]%></li><% } else{ %><li>不小于100 這里是第<%=i%>列：<%=list[i]%></li><% } %><% } %>

顯然Mustache是做不到，至少暫時沒實現，不過還是有很多人對它進行了擴展來支持簡單的判斷：李牧（http://limu.iteye.com/blog/1064024）

在我的概念我也是覺得Mustache已經夠用了，因為數據邏輯不應該讓模板來處理，模板應該只關心模板解析和數據渲染。

Mustache既然是一個Logic-less的模板，那你就要在數據上多下功夫了，你可以閱讀如下的教程來運用Mustache來處理數據，在這里就不在多說了。

https://github.com/janl/mustache.js

關于各個模板的性能，可以說Mustache最慢的，而且它顯得有點重，但如果真要做一個所有頁面切換都是Ajax的應用，Mustache是首選。

總結

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

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