你的位置:首页 > Java教程

[Java教程]doT.js——前端javascript模板引擎问题备忘录


  我手里维护的一个项目,遇到一个问题:原项目的开发人员在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             &nbsp;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的资料倒是不多,如果,有缘人看到这里,希望这篇文字对你有所帮助。