Mustache 是個不錯的js模板引擎，源碼：https://github.com/janl/mustache.js
演示：http://mustache.github.com/#demo，不僅支持js，還有PHP/RUBY/nodejs等好多語言。市面上的JS模板引擎也不少了，在公司的項目中，考慮在mustache.js、jquery-tmpl兩個里面選擇，最后選擇了mustache，因為它支持的語言更多些，可以寫成JQ插件，不依賴其他庫，用在團隊比較適合，并且一些不錯的web項目也選擇了它，性能方面應該都不會有太大差距。

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

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

當遇到數據結構復雜 、大量頁面都需要這樣做的時候，js看起來可能非常亂，維護很不便。使用js模板引擎，可以方便的把view分離出來。
mustache的一些說明：http://mustache.github.com/mustache.5.html

if語句

因為是Logic-less templates，無邏輯，只有標簽，無if、for等，不過這些邏輯可以在寫在js里面。基本還是適合大部分場合了。如果使用if語句，可以在js里面做一些判斷增加一個has標簽，然后在模板里面調用，比如再模板里可以這樣：

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

 / 分類: 開發,實踐 / TrackBack標簽: javascript, 模板引擎

已有 2 條評論 »

  1. asinsasins

    這個模塊引擎我到不看好它，只是有很多語言的實現到是很通用，我到看中doT，性能上相當出色，可以看下這方面的測試 jsperf.com/adasdadsaddddddddddd/10

    1. kairyoukairyou

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