我手里维护的一个项目，遇到一个问题：原项目的开发人员在Javascript中，大量的拼接HTML，导致代码极丑，极难维护。他们怎么能够忍受的了这么丑陋、拙劣的代码呢，也许是他们的忍受力极强，压根就没想去寻找解决方法。
可是，我，是万难不能接受这种丑陋的解决方式的。有没有优雅的解决方法呢，于是在网上搜索到了 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 遍历数组上面按照自己的理解，简单的翻译标记了一下大概意思，也不知对不对O(∩_∩)O~
主要就用到三个，{{= }}变量输出、{{? }}条件分支、和{{~ }}遍历数组。
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 </script> 22 </ul> 23 24 <script src="js/jquery-1.11.2.min.js"></script> 25 <script src="js/doT.min.js"></script> 26 </body> 27 28 <script type="text/javascript"> 29 $(function(){ 30 var data = [ 31 {name:'bananaplan', age:31}, 32 {name:'wangxiaozhu', age:18} 33 ]; 34 35 var tempFn = doT.template($('#test_tmpl').html()); 36 var resultText = tempFn(data); 37 38 console.log(resultText); 39 40 $('#list').html(resultText); 41 }); 42 43 function click_me(value) { 44 console.log(value); 45 alert(JSON.stringify(value)); 46 } 47 </script> 48 49 </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的过程中，也没有拦路虎了。
网上关于doT.js的资料倒是不多，如果，有缘人看到这里，希望这篇文字对你有所帮助。
587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
