前阵子参考别人的文章自己理解了一下模板引擎的实现，虽然是照着敲了一边，但是自己也加深了理解吧。
原文链接
自己的代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表达式</title>
</head>
<body><div id="app"><% if(this.age>34) {%><p>我的年龄是<% this.age %></p><% } %><div><% name %></div><% for(var m=0;m< this.list.length;m++){ %><p><% this.list[m] %></p><% } %><ul><% for(var pro=0;pro< this.skills.length; pro++){ %><li style="font-size:<% this.age%>px;"><% for(var cit=0;cit< this.skills[pro].city.length;cit++){ %><span><% cit+1 %>:<% this.skills[pro].city[cit] %></span><% } %></li><% } %></ul>
</div>
<script>/*src:http://www.jb51.net/article/52491.htm* 一个字符串是由n个字符组成的。在每个字符之前和之后，都有一个空字符。这样，一个由n个字符组成的字符串就有n+1个空字符串。我们来看一下“ABhedeCD”这个字符串：* 所有的e编号的位置都是空字符。表达式(?!hede).会往前查找，看看前面是不是没有“hede”字串，如果没有(是其它字符)，那么.(点号)就会匹配这些其它字符。这种正则表* 达式的“查找”也叫做“zero-width-assertions”(零宽度断言)，因为它不会捕获任何的字符，只是判断。在上面的例子里，每个空字符都会检查其前面的字符串是否不是‘hede'，* 如果不是，这.(点号)就是匹配捕捉这个字符。表达式(?!hede).只执行一次，所以，我们将这个表达式用括号包裹成组(group)，然后用*(星号)修饰——匹配0次或多次：* */let str = `I'm singing while you're dancing.`;let reg = /\b\w+(?=ing)/g;function render(tpl, data) {tpl = tpl.replace(/>/g, '>').replace(/</g, '<');tpl = tpl.replace(/(\n*)/g, '');var reg = /<%([^%>]+)?%>/g;var reg=/<%([^%>]|((?!%>).)*)%>/gvar code = 'var r=[];\n',cursor = 0,match;var reg2 = /(for|{|}|if|else|break|switch|case).*/;var add = function (line, js) {if (!js) {var mm = line.replace(/"/g, '\\"');code += 'r.push("' + mm + '");\n';// 把匹配的第一个标签放进数组如<p>，以字符串的形式} else {if (reg2.test(line)) {code += line + '\n';} else {code += 'r.push(' + line + ');\n';}// 例如tpl=<p><%name%></p>// match[0]为<%name%>,cursor=0,match.index=3,下一次是11 也就是从</p>的< 开始}}while (match = reg.exec(tpl)) {// match[1]匹配的变量名字add(tpl.slice(cursor, match.index))add(match[1], true);cursor = match.index + match[0].length;console.log(tpl.slice(cursor, match.index))}code += 'r.push("' + tpl.substr(cursor, tpl.length - cursor) + '");\n';code += 'return r.join("")';console.log(code)var result = new Function(code.replace(/[\r\t\n]/g, '')).apply(data);return result;}let data = {name: 'zxf',age: 35,list: ['1', '2', '3'],showSkills: true,skills: [{name:'河南',city:['郑州','洛阳','新乡']},{name:'广州',city:['深圳','东莞','揭阳']}],}document.querySelector('#app').innerHTML = render( document.querySelector('#app').innerHTML, data)
</script>
</body>
</html>
)
