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

doT.js 模板引擎的使用

模版引擎之前在介绍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]);
}
});

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

已有 47 条评论 »

  1. leavingme leavingme

    Hi, 请教下jsperf为啥在IE下的数据那么少呢?

    1. kairyou kairyou

      @leavingme
      Hi, 说明用IE测试的人少~

  2. asins asins

    在11年3月份时开始使用doT,因为在一性能测试网站上看到它的性能对比,相当出色,源码中有些可以实现很多特殊的方法,我到是整理过一些,可以看看这里http://nootn.com/lab/js/doT/

    1. kairyou kairyou

      @asins
      之前都用mustache,经你的推荐现在也转用doT了。

  3. leavingme leavingme

    var obj = {
    success: true,
    data:[
    {title:'item1',message:11,comment:[{message: '111'},{message: '222'}]},
    {title:'item1',message:22}
    ]
    }

    其中的comment也是数组,这种怎么处理呢?

    1. kairyou kairyou

      @leavingme
      继续.xx下去就OK了。it.data.comment.xxx。

  4. leavingme leavingme

    今天在IE6下测试了mustache, doT, kissy template渲染同样的数据,kissy template最快,毫无鸭梨。

  5. lulu lulu

    大大我就是以前跟你要blog模版的家伙~嘿嘿
    看到你说js模版啊~
    其实性能最好的模版是Juicer
    地址在这里:juicer.name
    性能把mustache直流甩出好几条街。。。。
    介绍:www.benben.cc/blog/?p=390

    1. kairyou kairyou

      谢谢 Juicer之前看到过. 不过没对比过. 你发的网址都是打不开的.

    2. lulu lulu

      大大,我可以打开啊!
      打不开看这github.com/PaulGuo/Juicer

    3. kairyou kairyou

      嗯 谢谢, 当时估计是网络问题.
      Juicer的边界符自定义和语法我觉得挺不错, 虽然上手挺容易. 但比起doT, 我觉得还是没有足够多的更换理由. http://jsperf.com/dom-vs-innerhtml-based-templating/414 这里doT性能还是最佳, 当然性能不是唯一标准.
      刚又看了下doT的新文档, 新增的条件语句和array的语法{{~it.array :value:index}}不怎么样, 没Juicer好.

      1. lulu lulu

        哥哥,其实juicer的性能是最快的~
        看这里www.benben.cc/blog/?p=390
        但是我学艺不精,一直没有用好。
        求哥哥这个详细的教程,最好配合json,否则老在html里面写模板,怪麻烦的

      2. lulu lulu

        官方测试
        juicer.name/speedtest/
        问了一下度娘,貌似array在ie下的速度很快~~

      3. kairyou kairyou

        我在chrome和IE下看还是doT更快哦~
        juicer官网不是有完整的配合json的demo的吗? 模板引擎意义不就在于逻辑和表现分离吗, 你想把模版写在JS里面? 那还不如自己拼接字符串性能高呢.

  6. lulu lulu

    说一下作者的比较:
    Mustache支持多种语言,通用性不错,不过性能稍差,而且语法不支持高级特性,例如遍历的时候无法做if判断,也无法获得index索引值,jQuery tmpl依赖jQuery,缺乏可移植性,Kissy template虽然依赖Kissy, 不过性能和语法都值得推荐,doT/nTenjin 性能和灵活性都很不错,但是语法需要用原生的js来写,写好的模板代码可读性稍差。

    1. leavingme leavingme

      Kissy Template 的模版可以直接抽出来

  7. 啊

    模板有字符窜怎么办

    1. kairyou kairyou

      @啊
      没懂你意思, 例子里面本来就有字符串的.

添加新评论 »