原文地址：https://blog.lanweihong.com/posts/16522/前言我们在做前端开发的时候，经常需要根据模板动态生成html后台返回的json数据插入到页面显示。最简单的方法是通过jQuery遍历数据拼接html，如下：不过，这种拼接html的方式，对于比较简单的结构来说还是不错的；如果结构比较复杂，拼接的时候要注意引号之间的嵌套，代码比较难维护，代码可读性也差。所以使用模板引擎可以帮助我们很好的避免这个问题。常用的模板引擎有artTemplate、Jade、Mustache、doT.js、juicer等，本文只介绍doT.js的使用。介绍官方Github：https://github.com/olado/doTdoT.js速度快，体积小，不依赖其他插件。使用方法配置doT.templateSettings默认配置：doT.templateSettings={evaluate:/\{\{([\s\S]+?)\}\}/g,interpolate:/\{\{=([\s\S]+?)\}\}/g，编码：/\{\{!([\s\S]+?)\}\}/g，使用：/\{\{#([\s\S]+?)\}\}/g，定义：/\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g，条件：/\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g，迭代：/\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,varname:'it',strip:true,append:true,selfcontained:false};如果要使用selfseparator，可以根据自己的需要修改doT.templateSettings中的regularity。以下是默认的分隔符列表：{{}}：用于求值（evaluate）{{=}}：用于插值（interpolate）{{!}}:用于插值编码(encode){{#}}:用于编译时评估/包含本地模板(use){{###}}:用于编译时定义(define){{?}}：用于条件语句（conditional）{{~}}：用于数组迭代（iterate）的其他指令varname：模板数据引用变量名strip：控制空白字符，true：去除所有空格；false：保留空格append：性能优化设置。通过它调整性能，根据使用的javascript引擎和模板的大小，append设置为false，可能会产生更好的效果模板编译函数function(tmpl,c,def)tmpl:模板文本c:自定义编译设置，如果为null，则使用doT.templateSettingsdef：编译时评估的数据。默认情况下，调用该函数编译出的方法有一个名为data的参数，即默认配置的varname。插值（求值）用法：{{=}}创建模板。默认情况下，模板中的数据使用它作为参考。可以修改配置中的varname来改变变量名；Use:varmessage={msg:'Helloworld.',code:200};//使用doT.template(tplText)函数，tplText为模板文本vartpl=doT.template($("#testTpl").text());//有些浏览器浏览器可能获取不到模板内容，可以使用$("#testTpl").html()//传入数据获取htmlvarhtml=tpl(message);console.log(html);结果输出：
