使用mustache js模板引擎

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使用较多的场合非常适用。以前我们可能会使用拼接的方法，比如：

    
   
   
   

     
    
    
    
var html=[];

     
    
    
    
html.push(‘<h1>’); html.push(‘header’); 

     
    
    
    
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标签，然后在模板里面调用，比如再模板里可以这样：

    
   
   
   

     
    
    
    
{{#hasValue}}

     
    
    
    
有{{value}}的情况

     
    
    
    
{{/hasValue}}

     
    
    
    
{{^hasThumb}}

     
    
    
    
无value，显示默认值

     
    
    
    
{{/hasThumb}}
    
   
   
   

发布时间: 2011-12-22 / 分类: 开发,实践 / TrackBack标签: javascript, 模板引擎

已有 2 条评论 »

1. asins
   2011-12-28 / 11:56 PM

   这个模块引擎我到不看好它，只是有很多语言的实现到是很通用，我到看中doT，性能上相当出色，可以看下这方面的测试 jsperf.com/adasdadsaddddddddddd/10

   1. kairyou
      2012-01-01 / 06:48 PM

      @asins
      THX,的确效率要高，发现这里有更多的对比：http://jsperf.com/dom-vs-innerhtml-based-templating/305。
      看上mustache也是看重他的通用性。抽时间研究下dot，可以的话转移到公司的项目中。