來(lái)源：http://h5apps.diandian.com/html/js_template.html

前端JS模板

后端模板技術(shù)有很多如Smarty，velocity等，前端模板概念和后端相同，也就是在前端來(lái)負(fù)責(zé)模板解析和數(shù)據(jù)渲染。

隨著前端ajax的應(yīng)用，無(wú)刷新頁(yè)面數(shù)據(jù)傳輸與渲染越發(fā)地頻繁化，傳統(tǒng)方式在數(shù)據(jù)渲染方面存在著一個(gè)主要問(wèn)題：繁瑣的數(shù)據(jù)渲染。各種循環(huán)操作的字符串拼接，元素創(chuàng)建插入，在需要修改時(shí)，都需要重新花費(fèi)不少時(shí)間與精力。

如果你還沒(méi)用過(guò)JS模板，那你可以在ajax交互性強(qiáng)以及需要頻繁渲染數(shù)據(jù)的項(xiàng)目做些嘗試，相信他一定會(huì)讓你有所收獲。

現(xiàn)有的JS模板很多,jquery template、kissy template、easy template、ace template,lite template等等，各有各的優(yōu)點(diǎn)，性能方面都蠻不錯(cuò)的。如果你想了解他們，請(qǐng)移步：http://www.baiduux.com/blog/2011/07/11/introduction-of-template/

這次項(xiàng)目中我也用到模板技術(shù)，用的是Mustache，了解twitter和豆瓣的人一定對(duì)他有所了解。Twitter在前端渲染和后端用的都是Mustache，這樣就可以保證一致，在不支持javascript的情況下，可以通過(guò)后臺(tái)渲染。豆瓣在豆瓣說(shuō)項(xiàng)目中用到了backbone和Mustache等等技術(shù)，克軍戲說(shuō)2010最牛逼的網(wǎng)站改版，除了豆瓣就是Twitter了，哈哈。。其實(shí)我覺(jué)得我還是非常仰慕豆瓣團(tuán)隊(duì)的，能很快的將新技術(shù)應(yīng)用到實(shí)際項(xiàng)目中（雖然backbone算不上新技術(shù)）。

跑題了，Mustache是一個(gè)Logic-less template，比如以上的jquery template時(shí)你的模板應(yīng)該如下：

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

我們一眼就能看出來(lái)， for循環(huán)讓模板看的沒(méi)有那么干凈沒(méi)有那么純粹。而Mustache寫法如下：

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

模板看起來(lái)很干凈，或許你會(huì)說(shuō)jquery template中可以構(gòu)建如下邏輯的模板，

<% 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是做不到，至少暫時(shí)沒(méi)實(shí)現(xiàn)，不過(guò)還是有很多人對(duì)它進(jìn)行了擴(kuò)展來(lái)支持簡(jiǎn)單的判斷：李牧（http://limu.iteye.com/blog/1064024）

在我的概念我也是覺(jué)得Mustache已經(jīng)夠用了，因?yàn)閿?shù)據(jù)邏輯不應(yīng)該讓模板來(lái)處理，模板應(yīng)該只關(guān)心模板解析和數(shù)據(jù)渲染。

Mustache既然是一個(gè)Logic-less的模板，那你就要在數(shù)據(jù)上多下功夫了，你可以閱讀如下的教程來(lái)運(yùn)用Mustache來(lái)處理數(shù)據(jù)，在這里就不在多說(shuō)了。

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

關(guān)于各個(gè)模板的性能，可以說(shuō)Mustache最慢的，而且它顯得有點(diǎn)重，但如果真要做一個(gè)所有頁(yè)面切換都是Ajax的應(yīng)用，Mustache是首選。

總結(jié)

以上是生活随笔為你收集整理的前端JS模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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