模版引擎之前在介绍mustache时已经提到了。doT、mustache各有优势吧,如果用于JS环境,doT的性能更胜一筹,并且套语句更方便些。现在公司的mobile页面已经被我替换成doT了。
doT source: https://github.com/olado/doT
Docs: http://olado.github.com/doT/
doT上手比较容易,但之前熟悉了mustache,改用doT时有点不习惯,但用两次就好了。
下载doT.js(里面有个doU.js不要用,doU.js是为了测试遗留问题的)。举个简单的使用例子:
HTML部分:
<script id="j-tmpl" type="text/template"> {{ if(it.success){ }} <h2>results:</h2> <ul> {{ for (var i = 0, l = it.data.length; i < l; i++) { }} <li> <h5>{{=it.data[i].title}}</h5> <p>{{!it.data[i].message}}</p> </li> {{ } }} <ul> {{ }else{ }} <h2>暂无数据</h2> {{ } }} </script>
JS部分:
<script> var obj = { success: true, data:[ {title:'item1',message:11}, {title:'item1',message:22} ] } var tmpl = document.getElementById('j-tmpl').innerHTML; var doTtmpl = doT.template(tmpl); console.log(doTtmpl(obj )); </script>
看了例子,就应该会使用了。
{{=it.xx}} 取obj.xx的值
{{ }} 里面放if els / for 等表达式
{{!it.xx}} 取把obj.xx转义后的值
这些基本够用了,还有复杂的应用,可以看doT主页内的examples、docs。
并且,可以很容易把doT写成jquery插件:
$.extend({ tmpl: function(template, data){ return doT.template(template).apply(null,[data]); } });
Hi, 请教下jsperf为啥在IE下的数据那么少呢?
@leavingme
Hi, 说明用IE测试的人少~
在11年3月份时开始使用doT,因为在一性能测试网站上看到它的性能对比,相当出色,源码中有些可以实现很多特殊的方法,我到是整理过一些,可以看看这里http://nootn.com/lab/js/doT/
@asins
之前都用mustache,经你的推荐现在也转用doT了。
var obj = {
success: true,
data:[
{title:'item1',message:11,comment:[{message: '111'},{message: '222'}]},
{title:'item1',message:22}
]
}
其中的comment也是数组,这种怎么处理呢?
@leavingme
继续.xx下去就OK了。it.data.comment.xxx。
今天在IE6下测试了mustache, doT, kissy template渲染同样的数据,kissy template最快,毫无鸭梨。
大大我就是以前跟你要blog模版的家伙~嘿嘿
看到你说js模版啊~
其实性能最好的模版是Juicer
地址在这里:juicer.name
性能把mustache直流甩出好几条街。。。。
介绍:www.benben.cc/blog/?p=390
谢谢 Juicer之前看到过. 不过没对比过. 你发的网址都是打不开的.
大大,我可以打开啊!
打不开看这github.com/PaulGuo/Juicer
嗯 谢谢, 当时估计是网络问题.
Juicer的边界符自定义和语法我觉得挺不错, 虽然上手挺容易. 但比起doT, 我觉得还是没有足够多的更换理由. http://jsperf.com/dom-vs-innerhtml-based-templating/414 这里doT性能还是最佳, 当然性能不是唯一标准.
刚又看了下doT的新文档, 新增的条件语句和array的语法{{~it.array :value:index}}不怎么样, 没Juicer好.
哥哥,其实juicer的性能是最快的~
看这里www.benben.cc/blog/?p=390
但是我学艺不精,一直没有用好。
求哥哥这个详细的教程,最好配合json,否则老在html里面写模板,怪麻烦的
官方测试
juicer.name/speedtest/
问了一下度娘,貌似array在ie下的速度很快~~
我在chrome和IE下看还是doT更快哦~
juicer官网不是有完整的配合json的demo的吗? 模板引擎意义不就在于逻辑和表现分离吗, 你想把模版写在JS里面? 那还不如自己拼接字符串性能高呢.
说一下作者的比较:
Mustache支持多种语言,通用性不错,不过性能稍差,而且语法不支持高级特性,例如遍历的时候无法做if判断,也无法获得index索引值,jQuery tmpl依赖jQuery,缺乏可移植性,Kissy template虽然依赖Kissy, 不过性能和语法都值得推荐,doT/nTenjin 性能和灵活性都很不错,但是语法需要用原生的js来写,写好的模板代码可读性稍差。
Kissy Template 的模版可以直接抽出来
模板有字符窜怎么办
@啊
没懂你意思, 例子里面本来就有字符串的.