前言

我们在做前端开发时，经常需要根据后台返回的json数据动态生成html并插入到页面中显示。最简单的方法就是通过jQuery去遍历数据拼接html，如以下：

<script>
    var data = {
        list: [{
            id: 1,
            name: 'zhangsan',
            email: 'zhangsan@lwhweb.com'
        }, {
            id: 2,
            name: 'lisi',
            email: 'lisi@lwhweb.com'
        }]
    };
    var html = '';
    $.each(data.list, function(index, item) {
        html += '<tr></tr>';
        html += '<td>' + item.id + '</td>';
        html += '<td>' + item.name + '</td>';
        html += '<td>' + item.email + '</td>';
        html += '</tr>'
    });
    $('#userList').empty();
    $('#userList').html(html); 
</script>

但是，这种通过拼接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:         /\{\}
</script>

使用：

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);

结果输出：

<h2>工作内容：</h2>  <h2>以下使用'testHeaderTpl'模板内容：</h2>  <h2>标题：完善项目一需求提取</h2>  请研发部争取在月底前提取项目一需求  <div>截止时间：2017-11-25 23:00 </div>   <h2>以下是编译时定义</h2> 

更多用法可参考官方说明：http://olado.github.io/doT/

参考

http://olado.github.io/doT/