2024年 3月
 123
45678910
11121314151617
18192021222324
25262728293031

近期发布

近期评论

    2024 年 3 月 22 日

    Neusofts

    科技改变生活,创新引领未来

    Mustache js模板引擎

    Mustache 是个不错的js模板引擎,源码:https://github.com/janl/mustache.js
    演示:http://mustache.github.com/#demo,不仅支持js,还有 PHP/RUBY/nodejs 等好多语言。市面上的JS模板引擎也不少了,在公司的项目中,考虑在 mustache.jsjquery-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}}

    各语言演示http://mustache.github.com/

    DEMOhttp://mustache.github.com/#demo