模版引擎之前在介紹mustache時(shí)已經(jīng)提到了。doT、mustache各有優(yōu)勢(shì)吧，如果用于JS環(huán)境，doT的性能更勝一籌，并且套語(yǔ)句更方便些。現(xiàn)在公司的mobile頁(yè)面已經(jīng)被我替換成doT了。

doT source: https://github.com/olado/doT
Docs: http://olado.github.com/doT/

doT上手比較容易，但之前熟悉了mustache，改用doT時(shí)有點(diǎn)不習(xí)慣，但用兩次就好了。

下載doT.js（里面有個(gè)doU.js不要用，doU.js是為了測(cè)試遺留問(wèn)題的）。舉個(gè)簡(jiǎn)單的使用例子：

HTML部分：

  1. <script id="J_tmpl" type="text/template">
  2. {{ if(it.success){ }}
  3.         <h2>results:</h2>
  4.         <ul>
  5.                 {{ for (var i = 0, l = it.data.length; i < l; i++) { }}
  6.                         <li>
  7.                                 <h5>{{=it.data[i].title}}</h5>
  8.                                 <p>{{!it.data[i].message}}</p>
  9.                         </li>
  10.                 {{ } }}
  11.         <ul>
  12. {{ }else{ }}
  13.         <h2>暫無(wú)數(shù)據(jù)</h2>
  14. {{ } }}
  15. </script>

JS部分：

  1. <script>
  2. var obj = {
  3.         success: true,
  4.         data:[
  5.                 {title:'item1',message:11},
  6.                 {title:'item1',message:22}
  7.         ]
  8. }
  9. var tmpl = document.getElementById('J_tmpl').innerHTML;
  10. var doTtmpl = doT.template(tmpl);
  11. console.log(doTtmpl(obj ));
  12. </script>

看了例子，就應(yīng)該會(huì)使用了。
{{=it.xx}} 取obj.xx的值
{{ }} 里面放if els / for 等表達(dá)式
{{!it.xx}} 取把obj.xx轉(zhuǎn)義后的值
這些基本夠用了，還有復(fù)雜的應(yīng)用，可以看doT主頁(yè)內(nèi)的examples、docs。
并且，可以很容易把doT寫成jquery插件：

  1. $.extend({
  2. tmpl: function(template, view){
  3.         return doT.template(template).apply(null,[view]);
  4. }
  5. });