前端渲染引擎的优势分析

“React、Vue、Angular等均属于MVVM模式，在一些只需完成数据和模板简单渲染的场合，显得笨重且学习成本较高，而解决该问题非常优秀框架之一是doT.js，本文将对它进行详解。 ”
　　背景
　　前端渲染有很多框架，而且形式和内容在不断发生变化。这些演变的背后是设计模式的变化，而归根到底是功能划分逻辑的演变：MVC—》MVP—》MVVM（忽略最早混在一起的写法，那不称为模式）。近几年兴起的React、Vue、Angular等框架都属于MVVM模式，能帮我们实现界面渲染、事件绑定、路由分发等复杂功能。但在一些只需完成数据和模板简单渲染的场合，它们就显得笨重而且学习成本较高了。
　　例如，在美团外卖的开发实践中，前端经常从后端接口取得长串的数据，这些数据拥有相同的样式模板，前端需要将这些数据在同一个样式模板上做重复渲染操作。
　　解决这个问题的模板引擎有很多，doT.js（出自女程序员Laura Doktorova之手）是其中非常优秀的一个。下表将doT.js与其他同类引擎做了对比：
　　
　　可以看出，doT.js表现突出。而且，它的性能也很优秀，本人在Mac Pro上的用Chrome浏览器（版本为：56.0.2924.87）上做100条数据10000次渲染性能测试，结果如下：
　　
　　从上可以看出doT.js更值得推荐，它的主要优势在于：
　　小巧精简，源代码不超过两百行，6KB的大小，压缩版只有4KB；
　　支持表达式丰富，涵盖几乎所有应用场景的表达式语句；
　　性能优秀；
　　不依赖第三方库。
　　本文主要对doT.js的源码进行分析，探究一下这类模板引擎的实现原理。
　　如何使用
　　如果之前用过doT.js，可以跳过此小节，doT.js使用示例如下：
　　《 type=“text/html” id=“tpl”》 《div》 《a》name：{{= it.name}}《/a》 《p》age：{{= it.age}}《/p》 《p》hello：{{= it.sayHello（） }}《/p》 《select》 {{~ it.arr:item}} 《option {{？item.id == it.stringParams2}}selected{{？}} value=“{{=item.id}}”》 {{=item.text}} 《/option》 {{~}} 《/select》 《/div》《/》《》 $（“#app”）.html（doT.template（$（“#tpl”）.html（））（{ name：‘stringParams1’， stringParams1：‘stringParams1_value’， stringParams2:1， arr：［{id:0，text：‘val1’}，{id:1，text：‘val2’}］， sayHello:function （） { return this［this.name］ } }））;《/》
　　可以看出doT.js的设计思路：将数据注入到预置的视图模板中渲染，返回HTML代码段，从而得到最终视图。
　　下面是一些常用语法表达式对照表：