可能你在使用最新最流行的 js 库,但是那些只做做简单事情的,一样不可忽略。
mustache.js 正是如此的模板引擎,最新更新是在六个月前,有些甚至是一年以上没有更新了,但是说到这个有什么用呢,大概是这样:
简单容易入手
没有复杂逻辑
避免拼接的渲染页面
缺点也是有的:
第一次渲染会有点慢
网络慢的情况也会慢
官方地址:https://github.com/janl/mustache.js ,内容网上总结的很好很多,下面这个就挺好,转来看看,部分进行了删减排版
以下来自博客园作者:zccst 地址:http://www.cnblogs.com/zccst/p/3760229.html
本文基本要点:
基本用法
使用模板(写在页面或异步获取)
集中变量定义
以下是公共文件:
1.最基础的用法
2.还可以使用模板
总结:两个基本素材:template, obj。前者和后者都可以简单,也可以复杂
Mustache替换:
渲染到页面:
3.template除了直接赋值和来自页面外,还可以异步获取。
总结:template有三种来源:
直接字符串
本页面中带ID的script
异步获取
4.几种变量
最基本变量 :{{ company }}
原样输出变量:{{{ company }}}或{{ &company }}
嵌套用点变量:{} {}
sections 部分
{{#person}} {{/person}}
1.当person是null, undefined, false, 0, NaN, "", [], 空列表时不渲染
2.当person不空时渲染一次或多次。如果其中某一些为空,则改行略过,其他行正常。
3.相反,就是输出空,仅在 section标签是null, undefined, false, 空list时
4.特殊情况:数组,里面每一项都是字符串时,可以用点代替
5.function
子模块(partials)和分隔符(delimiter)等
1.子模块(partials)
再举一例:
输出结果是:
Welcome, Joe! You just won $1000
2.分隔符(delimiter)
(1)写法1:默认的标签风格
3.预解析或缓存parse
mustache.js会在第一次读模板时缓存,第二次可加快速度,如果需要
Mustache.pars(template);
Mustache.render(template, view);
4.对应的插件
有jQuery,MooTools,Dojo,YUI,qooxdoo。可以使用Rake来built。
5.测试(单元测试和整体测试)
领取专属 10元无门槛券
私享最新 技术干货