java dot模板怎么使用_前端模板引擎doT.js的使用

前言

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

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 += '

html += '

html += '

html += '

html += ''

});

$('#userList').empty();

$('#userList').html(html);

但是，这种通过拼接html的方式使用在比较简单的结构还好；如果结构比较复杂，拼接的时候还得注意引号之间的嵌套，而且代码维护起来也比较困难，代码可读性也差。因此使用模板引擎可以帮我们很好的避免这个问题。

常用的模板引擎有artTemplate、Jade、Mustache、doT.js、juicer等，此编文章仅介绍doT.js的使用。

简介

doT.js快速，体积小并不依赖其他插件。

使用方法

配置

doT.templateSettings默认配置:

doT.templateSettings = {

evaluate: /{{([sS]+?)}}/g,

interpolate: /{{=([sS]+?)}}/g,

encode: /{{!([sS]+?)}}/g,

use: /{{#([sS]+?)}}/g,

define: /{{##s*([w.$]+)s*(:|=)([sS]+?)#}}/g,

conditional: /{{?(?)?s*([sS]*?)s*}}/g,

iterate: /{{~s*(?:}}|([sS]+?)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);

结果输出：

求值(evaluate)

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

创建模板：

{{ if (it.status == true) { }}

{{ } else { }}

{{ } }}

使用：

var result = {

status: true,

error: ''

};

var tpl = doT.template($("#testTpl2").text());

var html = tpl(result);

console.log(html);

结果输出：

条件语句(conditional)

用法：{{? }}

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

{{? it.status == true }}

{{?? }}

{{? }}

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

数组迭代(iterate)

用法：{{~ }}

创建模板：

{{~ it.list:item:index }}

{{~ }}

使用：

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

结果输出：

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

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

创建模板：

标题：{{= it.title }}

以下使用'testHeaderTpl'模板内容：

{{#def.header }}

{{= it.content }}

{{#def.injectIntoHeader || '' }}

工作内容：

{{#def.body }}

以下是编译时定义

{{##def.injectIntoHeader:

#}}

使用：

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'模板内容：

标题：完善项目一需求提取

以下是编译时定义