JavaScript模板引擎
参考文献：
高性能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空间、腾讯微博等大型网站中均能看到它们的身影。
简单来讲，模板引擎就是为了让动态页面渲染的时候，可以简化字符串的拼接操作的东西。比如我们需要在页面渲染一个列表：
<li>111</li>
<li>222</li>
<li>333</li>
那么我们直接用代码写，需要循环data，然后拼接每一个li的数据。
写惯了页面的同学，希望把代码逻辑直接写在一个html里面，只要更换数据源，就能输出不同的页面代码了。
比如我们可以这样写：
for(var i = 0; i < this.list.length; i++){
<li>this.list[i]</li>
}
但是这样的代码，是没法区分哪里是逻辑代码，哪里是html本身的代码的。所以我们加入了一些标记符，我们这里用<% %>来包裹住逻辑代码。
<%for(var i = 0; i < this.list.length; i++){%>
<li><%=this.list[i]%></li>
<%}%>
如果js可以理解这段代码，就可以通过变更数据源来更新模板内容了。
简单原理如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<!-- 定义一个模板文件 -->
<script id="mytemp" type="text/html">
<ul>
<% for(var i=0; i<data.length; i++) { %>
<li>
<span><%= data[i].username %></span>
</li>
<% } %>
</ul>
</script>
<script type="text/javascript">
function template(id, data) {
var str = document.getElementById(id).innerText;
str = "log(`"+str+"`)";//将整个模板使用log函数包围
str = str.replace(/<%=(.+)%>/g, "`); log($1); log(`");//处理<%= %>情况
//处理<%- %>情况,如src=<%- data[i].url %>
str = str.replace(/<%-(.+)%>/g, "`) ;log($1); log(`");
str = str.replace(/<%(.+)%>/g, "`); $1 log(`");//处理<% %>情况
console.log("处理后的str\n",str);
//使用``为了获取处理后的str
var funcstr = `
(function(data){
var htmlstr = "";
function log(str) {
htmlstr += str;
}
${str};
return htmlstr;
})
`;
console.log("拼接成可被eval解析的代码，其类型是"+typeof funcstr,funcstr);
var realfunc = eval(funcstr); //使用eval解析可执行的代码
console.log("eval解析字符串后生成的可执行代码,即函数",realfunc);
var res = realfunc(data);
console.log("执行函数返回的html字符串",res);
return res;
}
//通过调用template方法，向指定模板中填充数据，并返回html文本内容
var htmltext = template("mytemp", [{url: "xxxx", username:"yt"}, {url:"zzzzz", username: "mt"}]);
document.body.innerHTML = htmltext;
</script>
</html>