doT.js前端渲染引擎解析

一、背景

　　doT.js 灵感来源于搜寻基于 V8 和 Node.js ，强调性能，最快速最简洁的 JavaScript 模板函数。 它在 Node.js 和浏览器两端都彰显出卓越的性能。 在我搜寻期间，两款模板引擎引起了我的注意，激发了创造 doT 的灵感。
　　第一个是 jQote2，一个 jQuery 插件，它使用字符串拼接，避免使用 'with' 声明，它是首个追求速度的引擎。 
　　第二个是 underscore.js ，其中有一个设计精巧、扩展友好的模板函数。doT.js 快速，小巧且毫无依赖。
　　前端渲染有很多框架，而且形式和内容在不断发生变化。这些演变的背后是设计模式的变化，而归根到底是功能划分逻辑的演变：MVC—>MVP—>MVVM（忽略最早混在一起的写法，那不称为模式）。近几年兴起的React、Vue、Angular等框架都属于MVVM模式，能帮我们实现界面渲染、事件绑定、路由分发等复杂功能。但在一些只需完成数据和模板简单渲染的场合，它们就显得笨重而且学习成本较高了。

　　例如，在美团外卖的开发实践中，前端经常从后端接口取得长串的数据，这些数据拥有相同的样式模板，前端需要将这些数据在同一个样式模板上做重复渲染操作。

　　解决这个问题的模板引擎有很多，doT.js（出自女程序员Laura Doktorova之手）是其中非常优秀的一个。下表将doT.js与其他同类引擎做了对比：

　　

　　从上可以看出doT.js更值得推荐，它的主要优势在于：

1. 小巧精简，源代码不超过两百行，6KB的大小，压缩版只有4KB；
2. 支持表达式丰富，涵盖几乎所有应用场景的表达式语句；
3. 性能优秀；
4. 不依赖第三方库。

二、DOT.js的API标签介绍

　　1、{{ }} JS原生态代码
　　2、{{= }} 变量运算，赋值 {{=it.f1 + it.f2}}
　　3、{{! }} 赋值并且编码
　　4、{{# }}
　　5、{{## #}}
　　6、{{? }} 条件语句
　　7、{{~ }} 循环
　　注：其实条件语句和循环可以用{{if}}{{else if}}{{for(var i=0;i

　　以上代码可以看出doT.js的设计思路：将数据注入到预置的视图模板中渲染，返回HTML代码段，从而得到最终视图。

　　

　　和后端渲染不同，doT.js的渲染完全交由前端来进行，这样做主要有以下好处：

1. 脱离后端渲染语言，不需要依赖后端项目的启动，从而降低了开发耦合度、提升开发效率；
2. View层渲染逻辑全在JavaScript层实现，容易维护和修改；
3. 数据通过接口得到，无需考虑后端数据模型变化，只需关心数据格式。

　　

三、DOT.js使用方法

 　　1、最常规用法{{=it.attr}}　　　

　　运行的结果如下图：

　　

 
　　2、循环数组{{~}}　　

　　运行结果如下：
　　

　　3、条件渲染{{？}}{{？？}}，相当于原生的if else if　　
　　运行模式：　　

格式：
{{? }} if
{{?? }} else if
{{??}} else

数据源：{“name”:”Jake”,”age”:31}
区域：

模板：

调用方式：
var dataEncode = {“uri”:”http://grycheng.com/?keywords=Yoga”,”html”:”
html元素
”};
var EncodeText = doT.template($(“#encodetmpl”).text());
$(“#encode”).html(EncodeText(dataEncode));

　　运行结果如下：
　　　　
　　
　　
　　4、编码渲染{{!}},主要是为了防止代码注入以保障安全，如传入一个HTML片段或js片段，它会以字符串的形式渲染　　

　　运行结果如下：
　　

　　5、支持共用模块定义{{##def.}}定义，{{#def.}}引用模块　　

　　运行结果如下：
　　
　　注：模块定义也可以一个json数据定义，再在生成模板函数函数的时候传入即可，示例如下，其中tmpljson就是在外面以json定义的模块：　　

　　

　　6、用原生的循环，条件渲染，灵活调用　　

　　 

四、参考

http://jinlong.github.io/doT/
https://github.com/olado/doT
https://qiaolevip.github.io/frontend-template-engines/doT.html

 

转载于:https://www.cnblogs.com/molao-doing/articles/6779959.html