Fork me on GitHub doT.js

精巧快速的 JavaScript 模板引擎
Node.js 和浏览器同样适用。

起源

doT.js 灵感来源于搜寻基于 V8 和 Node.js ,强调性能,最快速最简洁的 JavaScript 模板函数。 它在 Node.js 和浏览器两端都彰显出卓越的性能。

在我搜寻期间,两款模板引擎引起了我的注意,激发了创造 doT 的灵感。

第一个是 jQote2,一个 jQuery 插件,它使用字符串拼接,避免使用 'with' 声明,它是首个追求速度的引擎。
第二个是 underscore.js ,其中有一个设计精巧、扩展友好的模板函数。

doT.js 快速,小巧且毫无依赖。

来源

github.com/olado/doT

作者 Laura Doktorova, 基于 MIT 协议

特性

使用 亲手试试,编辑输入然后看编译结果

模板

编译时定义 (def)

doT.template 编译结果

数据

结果

编译时求值 vs 运行时求值

如果你使用编译时求值,可以进一步提升性能。在每次执行时,你想使用的模板中的数据未改变时,非常适用。可考虑定义变量或者常量。

同样适用于静态编译局部模板。多个页面引入相似的 header 和 footer 时非常方便。 doT 也可以自定义局部模板。

这里是如何使用变量定义和局部模板的 进阶示例更多示例

基准测试

doT 在 jsperf 上面的首次测试
这是一些针对最新升级引擎的 测试结果
人们会不断添加新的 javascript 模板引擎测试。

追加的测试放在 github

运行测试衡量编译后模板的执行结果:
浏览器端:在 benchmarks/index.html 目录或者点这里
Node 环境:运行 node benchmarks/templatesBench.js

运行测试衡量编译速度:
浏览器端:benchmarks/genspeed.html 目录
Node 环境:运行 node benchmarks/compileBench.js

安装

用于 Node.js

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

> npm install dot

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

用于浏览器

引入 javascript 文件:

<script type="text/javascript" src="doT.js"></script>

示例

// 1. 编译模板函数
var tempFn = doT.template("<h1>Here is a sample template {{=it.foo}}</h1>");
// 2. 多次使用模板函数
var resultText = tempFn({foo: 'with doT'});

API

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

这是默认的定界符列表:

{{ }}用于求值(evaluation)
{{= }}用于插值(interpolation)
{{! }}用于编码求值
{{# }}用于编译时求值/引入和局部模板
{{## #}}用于编译时定义
{{? }}条件语句
{{~ }}数组迭代

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

使用 'strip' 选项控制空白字符,true - 全部去掉,false - 保留。

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

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

doT.template - 模板编译函数

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

function(tmpl, c, def) 默认,产生的方法有一个参数 - data - 命名为 'it' 。修改 doT.templateSettings.varname,可以改变参数的名字和个数。

Node 模块支持 dot 模板的自动编译

你可以预编译所有模板生成兼容 commonJS,浏览器和 AMD 的模块。

var dots = require("dot").process({ path: "./views"});

将编译指定路径下的 .def.dot.jst 文件。 详情

基本用法:

	var dots = require("dot").process({path: "./views"});
	// using .jst files
	var render = require('./views/mytemplate');
	render({foo:"hello world"});
	// using .dot files
	dots.mydottemplate({it: "dot"});

以上代码片段将:

这里是 代码示例, 注意在输出目录有个 index.js 文件。它可以这么用:
	var render = require('./views');
	render.templateOne(data);
	render.templateTwo(data);

有个 CLI 工具可以做同样的编译

./bin/dot-packer -s examples/views -d out/views

express 示例

许多人把 doT 用于 express。
我添加了最佳方法示例:doT 用于 express

问题

github.com/olado/doT/issues

历史

2011-1-10 首次发布
2014-12-2 最新版本:1.0.3

作者

@olado
doT.js by Laura Doktorova, MIT license