简介

创建搜索最快和简洁的JavaScript模板函数，强调V8和nodejs下的性能，它在nodejs和浏览器上都显示了很好的性能。

dot.js速度快，体积小，没有依赖关系，源js代码只有140行

特性

无依赖

极其快速

自定义定界符 (custom delimiters)

运行时求值 (runtime evaluation)

运行时插值 (runtime interpolation)

编译时求值 (compile-time evaluation)

支持局部模板

支持条件语句

数组迭代器

编码

控制空白字符 - 全去或保留

流媒体友好

轻逻辑或者重逻辑，由你决定

doT.js详细使用介绍

安装方法

用于浏览器引入

javascript 文件：

自代码中使用

用于 Node.js

如果你打算在 Node.js 中使用 doT，可以通过 npm 安装 doT

npm install dot

在代码中使用require('dot')

调用方式

doT渲染模板分为2个阶段，这一点从它的使用方法中也能看出来：

//1. 编译模板函数

var tempFn = doT.template("

Here is a sample template {{=it.foo}}

");//2. 渲染模板函数

var resultText = tempFn({foo: 'with doT'});

这一点是与其他主流的模板引擎不同的。 在compile阶段，可以依赖其他模板文件，缓存模板等操作。还可以传入参数，通过条件判断生成模板内容。 在页面载入或是服务器启动时，根据一些环境变量或其他条件预先编译模板，可以进

一步提高模板渲染是的效率。

doT.template方法的第2个参数为配置项，第3个参数为编译时可接收的参数，参数在模板中被默认存储在def对象下，具体用法在{{#}}语法中介绍。

doT.template方法返回值为function类型：tempFn，tempFn接收的参数是模板渲染时可传入的数据(与前面编译时的数据不是同一份数据)。该数据在模板中被默认存储在it对象下具体用法在{{}}和{{=}}等语法中都会介绍。

doT.templateSettings - 默认编译设置

可以通过改变编译设置自定义 doT。这是默认设置：

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 中的正则表达式。

这是默认的定界符列表：

{{= }} 用于插值

{{ }} 用于求值

{{~ }} 数组迭代

{{? }} 条件语句

{{! }} 用于编码求值

{{# }} 用于编译时求值/引入和局部模板

{{## #}} 用于编译时定义

其他说明

varname : 模板数据引用变量名

默认情况，模板中的数据必须用 'it' 作为引用。修改设置中的 'varname'，可以改变默认的变量名。 例如，你可以把 'varname' 设置成 "foo, bar"，就可以传2个数据实例，通过 foo 和 bar 与模板建立关联。

strip : 控制空白字符, true:全部去掉空格; false:保留空格

append : 性能优化设置

通过它调整性能，根据使用的 javascript 引擎和模板的大小，append 设置成 false，可能会产生更好的效果。

selfcontained：依赖设置

如果 'selfcontained' 为 true，doT 将毫无依赖的产生函数。通常，doT 都是无依赖的，除非用到编码时，encodeHTML 会被加入。 如果 'selfcontained' 为 true，模板需要编码，encodeHTML 方法将被引入生成模板的函数中。

doT.template - 模板编译函数

调用此函数把你的模板编译成一个方法。

function(tmpl, c, def)

tmpl - 模板正文

c - 自定义编译设置，如果为 null，用到 doT.templateSettings

def - 编译时求值的数据(与前面编译时的数据不是同一份数据)

默认，产生的方法有一个参数 - data - 命名为 'it' 。修改 doT.templateSettings.varname，可以改变参数的名字和个数。

实例

插值(evaluation)

用法：{{= }}，输出表达式，{{= }} 将其中的内容直接输出到html中。其中可以是在{{ }}中定义的变量、通过函数传入在it中的变量、也可以是全局变量、甚至可以是一个立即执行的function的返回结果。 可以简单的理解为可以获取特定作

用于下变量的单行js语句

//模板字符串：

{{

it.a= 1;

a= 2;

}}

{{= it.a}} it.a = 1{{= a}} a = 2{{= window}} window = [objectWindow]

{{= (function(){return 123})()}} function(){return 123})() = 123

创建模板，默认情况下，模板中的数据用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脚本，代码片段，{{ }} 的用法非常灵活，里面可以直接写js语句。定义的变量可以直接在{{= }}中调用。也可以调用通过tempFn传入的数据(数据默认放在it对象内)。

//模板字符串：

{{var a = 1;

it.a= a + 1;

}}

{{= a}} //a 输出 1

{{= it.a}} //it.a 输出 2

也可以定义函数。并在其他的{{}} 区块内调用：

//模板字符串：

{{

function fn() {return 123}

}}

{{= fn()}} //fn 输出 123

也可以直接运行匿名函数

{{

(function() {

it.b= 123})();

}}

{{= it.b}} //it.b通过直接执行的匿名函数赋值为123

{{}}中的代码块随时可以被打断，插入dom片段等html内容：

//模板字符串：

{{var a = 3;if(a > 2) {

}}

a的值大于2

{{

}else{

}}

a的值小于2

{{

}

}}

此外，{{}}中也可以直接调用全局对象下的函数或变量。可以以此特点实现比较复杂的功能(通过专用的命名空间给doT模板提供一些过滤器等特色的支持等)。

注意：如果在tempFn函数的调用中不传参数或者传入的是undefined等空对象，则doT不会实例化it对象。此时在{{}}中赋值的it对象的值，{{=}}中无法拿到(js的值引用问题)。

创建模板：