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

doT.js——前端javascript模板引擎问题备忘录的更多相关文章

  1. 【Juicer】 一个高效、轻量的前端 (Javascript) 模板引擎

    引用地址:http://juicer.name/docs/docs_zh_cn.html * 一个完整的例子 HTML 代码: <script id="tpl" type=& ...

  2. 前端javascript模板

    doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的 ...

  3. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  4. JavaScript模板引擎

    JavaScript模板引擎实例应用   在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

  5. JavaScript模板引擎实例应用（转）

    本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...

  6. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  7. JavaScript模板引擎artTemplate.js——为什么使用模板引擎？

    作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...

  8. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  9. JavaScript模板引擎Template.js使用详解

    这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   template.js 一款 JavaScript 模板引 ...

随机推荐

  1. java线程间通信1--简单实例

    线程通信 一.线程间通信的条件 1.两个以上的线程访问同一块内存 2.线程同步,关键字 synchronized 二.线程间通信主要涉及的方法 wait(); ----> 用于阻塞进程 noti ...

  2. UVA - 1371 Period 二分+dp

    思路:设字符串x的长度为n,y的长度为m,那么答案一定在[0, m]之间,那么可以二分求答案. d(i, j)表示第一个串前i个字符至少需要经过多少次才能的到第二个串的前j个字符,转移方程d(i, j ...

  3. java的mac自动化-自动运行java程序

    本文旨在帮助读者介绍,如果一个测试工程师拿到了mac本,该如何在本地自动运行java代码 首先如图所示写下如下一段代码 package zlr;import org.junit.Test;public ...

  4. python 小练习之生成手机号码

    需求分析: 1 将固定的号码段放到list中 如:136 137 180 183等等 2 随机取8个数字元素 3 将固定号码段与随机产生的元素拼接在一起 4 写入文件 import stringdef ...

  5. WEB 小案例 -- 网上书城（二）

    寒假结束了,自己的颓废时间同样结束了,早该继续写博客了,尽管我的格式以及内容由于各种原因老被卡,但必须坚持写下去!!! 上次我们对于本案例的数据库部分进行了阐述,这次主要接着上次的内容分享本案例的翻页 ...

  6. 3.3.3 PCI设备对可Cache的存储器空间进行DMA读写

    PCI设备向"可Cache的存储器空间"进行读操作的过程相对简单.对于x86处理器或者PowerPC处理器,如果访问的数据在Cache中命中,CPU会通知FSB总线,PCI设备所访 ...

  7. Struts2实现文件上传（二）

    Struts2实现文件上传 文件上传页面 file.jsp: <%@ page language="java" import="java.util.*" ...

  8. servlet上传文件报错（三）

    1.具体报错如下 null null Exception in thread "http-apr-8686-exec-5" java.lang.OutOfMemoryError: ...

  9. java.io.FileNotFoundException: /opt/apache-tomcat-7.0.57/conf/server.xml (权限不够)

    1 错误描述 youhaidong@youhaidong:~$ cd /opt/apache-tomcat-7.0.57 youhaidong@youhaidong:/opt/apache-tomca ...

  10. C++遍历二维数组的四种方法

    #include <iostream> using std::cin; using std::cout; using std::endl; using std::string; using ...