Mustache 是個(gè)不錯(cuò)的js模板引擎，源碼：https://github.com/janl/mustache.js
演示：http://mustache.github.com/#demo，不僅支持js，還有PHP/RUBY/nodejs等好多語言。市面上的JS模板引擎也不少了，在公司的項(xiàng)目中，考慮在mustache.js、jquery-tmpl兩個(gè)里面選擇，最后選擇了mustache，因?yàn)樗С值恼Z言更多些，可以寫成JQ插件，不依賴其他庫(kù)，用在團(tuán)隊(duì)比較適合，并且一些不錯(cuò)的web項(xiàng)目也選擇了它，性能方面應(yīng)該都不會(huì)有太大差距。

js模板引擎可以把模板分離出來，在ajax使用較多的場(chǎng)合非常適用。以前我們可能會(huì)使用拼接的方法，比如：

  1. var html=[];
  2. html.push(‘<h1>’); html.push(‘header’); 
  3. html = html.push(‘</h1>’).join(‘’);

當(dāng)遇到數(shù)據(jù)結(jié)構(gòu)復(fù)雜 、大量頁(yè)面都需要這樣做的時(shí)候，js看起來可能非常亂，維護(hù)很不便。使用js模板引擎，可以方便的把view分離出來。
mustache的一些說明：http://mustache.github.com/mustache.5.html

if語句

因?yàn)槭荓ogic-less templates，無邏輯，只有標(biāo)簽，無if、for等，不過這些邏輯可以在寫在js里面。基本還是適合大部分場(chǎng)合了。如果使用if語句，可以在js里面做一些判斷增加一個(gè)has標(biāo)簽，然后在模板里面調(diào)用，比如再模板里可以這樣：

  1. {{#hasValue}}
  2. 有{{value}}的情況
  3. {{/hasValue}}
  4. {{^hasThumb}}
  5. 無value，顯示默認(rèn)值
  6. {{/hasThumb}}

 / 分類: 開發(fā),實(shí)踐 / TrackBack標(biāo)簽: javascript, 模板引擎

已有 2 條評(píng)論 »

  1. asinsasins

    這個(gè)模塊引擎我到不看好它，只是有很多語言的實(shí)現(xiàn)到是很通用，我到看中doT，性能上相當(dāng)出色，可以看下這方面的測(cè)試 jsperf.com/adasdadsaddddddddddd/10

    1. kairyoukairyou

      @asins
      THX,的確效率要高，發(fā)現(xiàn)這里有更多的對(duì)比：http://jsperf.com/dom-vs-innerhtml-based-templating/305。
      看上mustache也是看重他的通用性。抽時(shí)間研究下dot，可以的話轉(zhuǎn)移到公司的項(xiàng)目中。