前端模板引擎doT.js的使用

前言

我们在做前端开发时，经常需要根据后台返回的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:         /\{\{#([\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来改变变量名；

<script type="text/x-dot-template" id="testTpl">
    <div>{{= it.msg }}</div>
    <div>{{= it.code }}</div>
</script>

使用：

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

结果输出：

<div class="msg">Hello world.</div> <div class="code">200</div> 

求值(evaluate)

用法：{{ }}，可在表达式中使用js脚本

创建模板：

<script type="text/x-dot-template" id="testTpl2">
    {{ if (it.status == true) { }}
        <div class="success">操作成功</div>
    {{ } else { }}
        <div class="error">操作错误</div>
    {{ } }}
</script>

使用：

var result = {
    status: true,
    error: ''
};
var tpl = doT.template($("#testTpl2").text());
var html = tpl(result);
console.log(html);

结果输出：

<div class="success">操作成功</div>  

条件语句(conditional)

用法：{{? }}

在上个 求值(evaluate) 例子中的模板恰好是条件判断，我们可以用{{? }}改写模板以达到一样的效果：

<script type="text/x-dot-template" id="testTpl2">
    {{? it.status == true }}
        <div class="success">操作成功</div>
    {{?? }}
        <div class="error">操作错误</div>
    {{? }}
</script>

使用方法参考求值(evaluate)例子，最后输出html是一样的。

数组迭代(iterate)

用法：{{~ }}

创建模板：

<script type="text/x-dot-template" id="testTpl3">
    {{~ it.list:item:index }}
        <tr>
            <td>{{= index + 1 }}</td>
            <td>{{= item.name }}</td>
            <td>{{= item.email }}</td>
        </tr>
    {{~ }}
</script>

使用：

var data = {
    status: true,
    msg: 'success',
    list: [{
        id: 1,
        name: 'zhangsan',
        email: 'zhangsan@lwhweb.com'
    }, {
        id: 2,
        name: 'lisi',
        email: 'lisi@lwhweb.com'
    }]
};
var tpl = doT.template($("#testTpl3").html());
var html = tpl(data);
console.log(html);

结果输出：

<tr> <td>1</td> <td>zhangsan</td> <td>zhangsan@lwhweb.com</td> </tr>  <tr> <td>2</td> <td>lisi</td> <td>lisi@lwhweb.com</td> </tr>

编译时包含模板和编译时定义

用法：{{# }}和{{## #}}

创建模板：

<script type="text/x-dot-template" id="testHeaderTpl">
           <h2>标题：{{= it.title }}</h2>
</script>

<script type="text/x-dot-template" id="testPageTpl5">
    <h2>以下使用'testHeaderTpl'模板内容：</h2>
    {{#def.header }}
    {{= it.content }}
    {{#def.injectIntoHeader || '' }}
</script>

<script type="text/x-dot-template" id="testBodyTpl">
    <h2>工作内容：</h2>
    {{#def.body }}
    <h2>以下是编译时定义</h2>
    {{##def.injectIntoHeader:
        <div>截止时间：{{= it.dealine }} </div>
    #}}
</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/

原文地址：https://www.lwhweb.com/2017/11/25/dot-js/