专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

使用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}}

/ 分类: 开发,实践 / TrackBackhttps://xhl.me/archives/mustache-template/trackback标签: javascript, 模板引擎

已有 5 条评论 »

  1. asins asins

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

    1. kairyou kairyou

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

  2. 浮山狼 浮山狼

    最近实现了一个js template函数 ,相当精简只有465个字节。
    http://www.fushanlang.com/blog/the-most-lightweight-javascript-template-function-2321/

    保持了js原生语法, 大家可以择优用一下。

  3. rankbill.com rankbill.com

    原来是林科大的学长啊,学习了,可否交换下友情链接,蓝克比尔http://www.rankbill.com

    1. kairyou kairyou

      @rankbill.com
      你好, blog没有天天来看, 做首页的?

添加新评论 »