参考文献：

高性能JavaScript模板引擎原理解析:

http://cdc.tencent.com/2012/06/15/%e9%ab%98%e6%80%a7%e8%83%bdjavascript%e6%a8%a1%e6%9d%bf%e5%bc%95%e6%93%8e%e5%8e%9f%e7%90%86%e8%a7%a3%e6%9e%90/

art-template:   https://aui.github.io/art-template/docs/

github:https:   //github.com/aui/art-template

JavaScript 的模板引擎是什么：https://www.zhihu.com/question/53133191/answer/133811281

         随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，与此同时 javascript MVC 思想也开始流行起来。javascript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，近一年来在开源社区中更是百花齐放，在 Twitter、淘宝网、新浪微博、腾讯QQ空间、腾讯微博等大型网站中均能看到它们的身影。

简单来讲，模板引擎就是为了让动态页面渲染的时候，可以简化字符串的拼接操作的东西。比如我们需要在页面渲染一个列表：

111
222
333

列表中的数据是动态获取的一个数组data=['111','222','333']。

那么我们直接用代码写，需要循环data，然后拼接每一个li的数据。

写惯了页面的同学，希望把代码逻辑直接写在一个html里面，只要更换数据源，就能输出不同的页面代码了。

比如我们可以这样写：

for(var i = 0; i < this.list.length; i++){  
this.list[i]
}

当更换this.list的数据后，就可以获得不同的结果了。

但是这样的代码，是没法区分哪里是逻辑代码，哪里是html本身的代码的。所以我们加入了一些标记符，我们这里用<% %>来包裹住逻辑代码。

<%for(var i = 0; i < this.list.length; i++){%>  
<%=this.list[i]%>
<%}%>

这段代码我们可以加在script标签内，修改type为text/html或者其它格式，在需要使用的时候，通过dom获取到里面的文本内容。

如果js可以理解这段代码，就可以通过变更数据源来更新模板内容了。

简单原理如下：