一、介绍
dot.js是一个简约而强大的JavaScript模板引擎。它采用了逻辑分离和动态输出的方法，拥有体积小，速度快，兼容性好等优点，可以胜任大部分前端模板渲染需求。在该模板引擎的创作者，美国人 West Suitor强调，他的初衷是让编程变得更简单。这一点在dot.js的语法看上去十分清爽的同时也体现了出来。
二、安装和基础使用
安装和基础使用都非常简单，我们可以通过npm快速安装：
npm install doT --save
然后就可以在JavaScript中使用了：
// 引入dot模块
const doT = require('dot');
// 创建模板
const template = doT.template("Hello {{=it.name}}!");
// 渲染模板
console.log(template({ name: 'world' })); // 输出 Hello world!
我们可以看到doT.template()方法传入的是一个字符串模板，在渲染时，{{=it.name}}代表模板变量，后面的代码则是需要渲染的数据。
另外，极其重要的一点是，模板引擎默认是不支持转义HTML的，所以需要使用{{! }}代替{{ }}。
三、语法
在doT的语法上，不同于其他模板语言（如Jinja2），它采用了比较自然的JavaScript语法。
1. 循环语句
在doT中，我们可以通过for循环语句来循环一个数组或对象。例如：
{{~it.people :value:index}}
{{=index}}. {{=value.name}} - {{=value.age}}
{{~}}
在这个例子中，我们可以看到通过{{~it.people}}来循环一组数据，在循环内部，可以使用{{= }}来输出变量值。注意，这里的冒号(:)和tilda(~)是中间没有空格的。
2. 分支语句
我们可以通过简单的if语句来实现模板分支。例如：
{{? it.gift }}
I have a present for you!
{{??}}
Sorry, no gift this year.
{{?}}
在这个例子中，我们看到了一般if格式。
3. 子模板
我们可以通过{{#def.load()}}来实现子模板的功能。例如：
{{#def.body()}}
Hello {{=it.name}}!
{{#def.body()}}
在这个例子中，我们看到了如何向子模板传递参数、调用子模板及如何定义加载子模板的主模板函数。
四、编译选项
从3.0.0版本开始，doT支持了更多的编译选项，包括以下内容：
- evaluate: 最初和最后的代码应该是plain文本还是编译代码。
- interpolate: 输出的是否需要检查HTML转义。
- encode: 替换HTML实体中需要处理的字符。
- use: 用于在jsp、aspx等自定义标签模板格式中。
- define: 定义一个模板function()。使用它可以在多次请求中重复使用它。
- string: 对于浏览器和可能需要支持IE低级浏览器的旧版本（即IE6/7/8），需要转义正斜杠。因为正斜杠在JavaScript和正则表达式中都有特殊任务，所以很容易出现语法问题。这个选项在渲染时应该启用。
- strip: 删除模板中不需要的换行符及空格，以减少模板的大小。
这里，我们以使用strip编译选项为例，来实现缩减模板空格和换行符：
// 创建模板（使用strip编译选项）
const template = doT.template(
'\n' +
'{{~it.people :value:index}}\n' +
'
{{=index}}. {{=value.name}} - {{=value.age}}
\n' +
'{{~}}\n' +
'
原创文章，作者：ZUER，如若转载，请注明出处：https://www.506064.com/n/147836.html
微信扫一扫 
支付宝扫一扫 