我手里維護的一個項目，遇到一個問題：原項目的開發人員在Javascript中，大量的拼接HTML，導致代碼極丑，極難維護。他們怎么能夠忍受的了這么丑陋、拙劣的代碼呢，也許是他們的忍受力極強，壓根就沒想去尋找解決方法。
可是，我，是萬難不能接受這種丑陋的解決方式的。有沒有優雅的解決方法呢，於是在網上搜索到了doT.js。
doT.js的主頁很簡潔，就一個頁面，研究了一下，就順利的上手了，相當的簡單易用。主要分兩步走。
1、寫模板
寫模板，就用官方文檔里提供給你的三板斧就搞定了，當然總共不止三個：
{{ }} for evaluation 模板標記符
{{= }} for interpolation 變量輸出顯示，默認變量名叫it
{{! }} for interpolation with encoding 編碼轉義后輸出顯示
{{# }} for compile-time evaluation/includes and partials 輸出顯示預定義（還沒用過）
{{## #}} for compile-time defines 預定義（還沒用過）
{{? }} for conditionals 條件分支，if條件的簡寫
{{~ }} for array iteration 遍歷數組
上面按照自己的理解，簡單的翻譯標記了一下大概意思。主要就用到三個，{{= }}變量輸出、{{? }}條件分支、和{{~ }}遍歷數組。
2、調用模板，生成最終的HTML，把HTML放到對應的地方去就可以了
調用模板，這沒啥好說的，把官方代碼拷貝過來就行了。
下面是一個完整的代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test</title> 5 </head> 6 <body> 7 <h1>this is doT.js test.</h1> 8 9 <ul id="list"> 10 <!-- 下面是模板，一般推薦寫在<head>里，我比較喜歡寫在相對應的標簽里 --> 11 <script id="test_tmpl" type="text/x-dot-template"> 12 {{? it && it.length > 0}} 13 {{~ it :value}} 14 <li> 15 name: <a href="javascript:click_me({{!JSON.stringify(value)}})">{{=value.name}}</a> 16 17 age: {{=value.age}} 18 </li> 19 {{~}} 20 {{??}} 21 <li>there is no data.</li> 22 {{!alert('no data')}} 23 {{?}} 24 </script> 25 </ul> 26 27 <script src="js/jquery-1.11.2.min.js"></script> 28 <script src="js/doT.min.js"></script> 29 </body> 30 31 <script type="text/javascript"> 32 $(function(){ 33 var data = [ 34 {name:'bananaplan', age:31}, 35 {name:'wangxiaozhu', age:18} 36 ]; 37 38 var tempFn = doT.template($('#test_tmpl').html()); 39 var resultText = tempFn(data); 40 41 console.log(resultText); 42 43 $('#list').html(resultText); 44 }); 45 46 function click_me(value) { 47 console.log(value); 48 alert(JSON.stringify(value)); 49 } 50 </script> 51 52 </html>
代碼沒什么難度，先寫模板，然后調用模板，生成最終想要的HTML代碼段，最后將其放到對應的dom節點下即可。
但在這個看似簡單的過程中，我遇到並解決了一個問題。
請注意第15行，原來不是這么寫的，而是這樣的:
name: <a href="javascript:click_me({{=value}})">{{=value.name}}</a>
我的意思是，想把整個對象傳遞給click_me函數，但是這么寫報錯，於是想那能不能先傳json字符串過去，然后在函數里自己再parse一下，於是就改成了下面這樣：
name: <a href="javascript:click_me({{=JSON.stringify(value)}})">{{=value.name}}</a>
結果，還是報錯。注意，上面這段代碼里，我用的是{{= }}，而不是{{! }}。因為沒有將引號之類的編碼，所以會報錯，最后，我改成了下面這個最終版的，就ok了：
name: <a href="javascript:click_me({{!JSON.stringify(value)}})">{{=value.name}}</a>
所以，如果想傳遞對象，需要將json對象轉為字符串，並且編碼之后才行。
如此，解決了我的一大問題，不用費勁的拼接HTML了，並且在使用doT.js的過程中，也沒有攔路虎了。
補充：請注意一下20~22行，這是一個else分支，用{{??}}表示。另外，我還特意寫了這行代碼：{{!alert('no data')}}，是為了說明在其中可以支持js代碼，非常的靈活。
但遺憾的是，剛剛我研究了一下{{## #}}和{{# }}預定義的用法，實在是魯鈍，尚未全完領悟，這塊高級用法，請參見官方指南。
基本用法－》https://github.com/olado/doT/blob/master/examples/browsersample.html
高級用法－》https://github.com/olado/doT/blob/master/examples/advancedsnippet.txt
網上關於doT.js的資料倒是不多，如果，有緣人看到這里，希望這篇文字對你有所幫助。