前言
我们在做前端开发时，经常需要根据后台返回的json数据动态生成html并插入到页面中显示。最简单的方法就是通过jQuery去遍历数据拼接html，如以下：
但是，这种通过拼接html的方式使用在比较简单的结构还好；如果结构比较复杂，拼接的时候还得注意引号之间的嵌套，而且代码维护起来也比较困难，代码可读性也差。因此使用模板引擎可以帮我们很好的避免这个问题。
常用的模板引擎有artTemplate、Jade、Mustache、doT.js、juicer等，此编文章仅介绍doT.js的使用。
简介
官方Github：https://github.com/olado/doT
doT.js快速，体积小并不依赖其他插件。
使用方法
配置
doT.templateSettings默认配置:
doT.templateSettings = {
evaluate: /\{\{([\s\S]+?)\}\}/g,
interpolate: /\{\{=([\s\S]+?)\}\}/g,
encode: /\{\{!([\s\S]+?)\}\}/g,
use: /\{\{#([\s\S]+?)\}\}/g,
define: /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
iterate: /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
varname: 'it',
strip: true,
append: true,
selfcontained: false
};
如果你想使用自己的分隔符，可以根据自己需求修改doT.templateSettings中的正则。
以下是默认的分隔符列表:
{{ }}：用于求值(evaluate)
{{= }}：用于插值(interpolate)
{{! }}： 用于插值编码(encode)
{{# }}：用于编译时求值/包含局部模板(use)
{{## #}}：用于编译时定义(define)
{{? }}：用于条件语句(conditional)
{{~ }}：用于数组迭代(iterate)
其他说明
varname : 模板数据引用变量名
strip : 控制空白字符, true:全部去掉空格; false:保留空格
append : 性能优化设置。通过它调整性能，根据使用的 javascript 引擎和模板的大小，append 设置成 false，可能会产生更好的效果
模板编译函数
function(tmpl, c, def)
tmpl : 模板文本
c : 自定义编译设置，如果为 null，用到 doT.templateSettings
def : 编译时求值的数据
默认情况下，调用此函数编译产生的方法有一个参数data，命名为it，即默认配置的varname。
插值(evaluation)
用法：{{= }}
创建模板，默认情况下，模板中的数据用it作为引用，可修改配置中的varname来改变变量名；
使用：
var message = {
msg: 'Hello world.',
code: 200
};
//使用doT.template(tplText)函数，tplText为模板文本
var tpl = doT.template($("#testTpl").text()); //某些浏览器可能会取不到模板内容，可用$("#testTpl").html()
//传入数据获取html
var html = tpl(message);
console.log(html);
结果输出：
Hello world. 200
求值(evaluate)
用法：{{ }}，可在表达式中使用js脚本
创建模板：
使用：
var result = {
status: true,
error: ''
};
var tpl = doT.template($("#testTpl2").text());
var html = tpl(result);
console.log(html);
结果输出：
操作成功
条件语句(conditional)
用法：{{? }}
在上个 求值(evaluate) 例子中的模板恰好是条件判断，我们可以用{{? }}改写模板以达到一样的效果：
使用方法参考求值(evaluate)例子，最后输出html是一样的。
数组迭代(iterate)
用法：{{~ }}
创建模板：
使用：
var data = {
status: true,
msg: 'success',
list: [{
id: 1,
name: 'zhangsan',
email: '[email protected]'
}, {
id: 2,
name: 'lisi',
email: '[email protected]'
}]
};
var tpl = doT.template($("#testTpl3").html());
var html = tpl(data);
console.log(html);
结果输出：
1 zhangsan [email protected] 2 lisi [email protected]
编译时包含模板和编译时定义
用法：{{# }}和{{## #}}
创建模板：
使用：
var work = {
title: '完善项目一需求提取',
content: '请研发部争取在月底前提取项目一需求',
dealine: '2017-11-25 23:00'
};
var def = {
header: $('#testHeaderTpl').text(),
body: $('#testPageTpl5').text()
};
var tpl = doT.template($("#testBodyTpl").html(), null, def);
var html = tpl(work);
console.log(html);
结果输出：
工作内容：
以下使用'testHeaderTpl'模板内容：
标题：完善项目一需求提取
请研发部争取在月底前提取项目一需求 截止时间：2017-11-25 23:00 以下是编译时定义
更多用法可参考官方说明：http://olado.github.io/doT/
参考
http://olado.github.io/doT/
原文：https://www.lwhweb.com/2017/11/25/dot-js/