简易js模板引擎
前阵子参考别人的文章自己理解了一下模板引擎的实现，虽然是照着敲了一边，但是自己也加深了理解吧。
自己的代码：
<!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=/<%([^%>]|((?!%>).)*)%>/g
var 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>
浙公网安备 33010602011771号