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，可以的话转移到公司的项目中。