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
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模板引擎问题备忘录的更多相关文章
- 【Juicer】 一个高效、轻量的前端 (Javascript) 模板引擎
引用地址:http://juicer.name/docs/docs_zh_cn.html * 一个完整的例子 HTML 代码: <script id="tpl" type=& ...
- 前端javascript模板
doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的 ...
- JavaScript模板引擎实例应用
在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...
- JavaScript模板引擎
JavaScript模板引擎实例应用 在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...
- JavaScript模板引擎实例应用（转）
本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
- JavaScript模板引擎artTemplate.js——为什么使用模板引擎？
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...
- Javascript模板引擎mustache.js详解
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
- JavaScript模板引擎Template.js使用详解
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引 ...
随机推荐
- Activiti中的各个service的作用
各个Service的作用: RepositoryService 管理流程定义 RuntimeService 执行管理,包括启动.推进.删除流程实例等操作 TaskService 任务管理 Histor ...
- TP3.2 中使用 PHPMailer 发送邮件
第一步.添加PHPMailer类库 http://pan.baidu.com/s/1o7Zc7V0 第二步.添加发送邮件函数 在common目录中的公共函数文件加入函数 <?php /***** ...
- 用感知机（Perceptron）实现逻辑AND功能的Python3代码
之所以写这篇随笔,是因为参考文章(见文尾)中的的代码是Python2的,放到Python3上无法运行,我花了些时间debug,并记录了调试经过. 参考文章中的代码主要有两处不兼容Python3,一个是 ...
- python 下载新的模块
首先, 进入到python的安装目录 在安装目录下有一个Scripts文件夹. 然后里面有一个pip.exe 文件, 这个文件就是执行安装包的. 执行: pip.exe install django ...
- JDBC底层原理
Class.forName(“com.mysql.jdbc.Driver”)是 强制JVM将com.mysql.jdbc.Driver这个类加载入内存,并将其注册到DriverManager类,然后根 ...
- Hive:子查询
Hive只支持在FROM子句中使用子查询,子查询必须有名字,并且列必须唯一:SELECT ... FROM(subquery) name ...
- JavaScript递归原理
JavaScript递归是除了闭包以外,函数的又一特色呢.很多开发新手都很难理解递归的原理,我在此总结出自己对递归的理解. 所谓递归,可以这样理解,就是一个函数在自身的局部环境里通过自身函数名又调用, ...
- 百度地图API-javascript-web地图的应用
html部分的代码 <div class="maxwidth"> <div class="address clearfix"> < ...
- 追溯 React Hot Loader 的实现
文:萝卜(沪江金融前端开发工程师) 本文原创,转载请注明作者及出处 如果你使用 React ,你可以在各个工程里面看到 Dan Abramov 的身影.他于 2015 年加入 facebook,是 R ...
- 实战DeviceIoControl 之六：访问物理端口
Q 在NT/2000/XP中,如何读取CMOS数据? Q 在NT/2000/XP中,如何控制speaker发声? Q 在NT/2000/XP中,如何直接访问物理端口? A 看似小小问题,难倒多少好汉! ...