模版引擎之前在介绍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, view){
- return doT.template(template).apply(null,[view]);
- }
- });