使用javascript原生实现一个模板引擎

模板引擎分为前端和后端的，前端常用的模板引擎如artTemplate,juicer渲染是在客户端完成的；后端的模板引擎如基于PHP的smarty,渲染是服务器完成的。

前两天看到一篇博客挺好的是用了不到20行代码实现一个前端的模板引擎，感觉挺有趣的，今天就来实现下

1.简单的例子

逻辑

var tplEngine = function(tpl, data) {
var re = /<%([^%>]+)?%>/g;
while (match = re.exec(tpl)) {
tpl = tpl.replace(match[0], data[match[1]]);
}
return tpl;
};

就是把

<%name%>

替换成

data.name

即可

测试

var template1 = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>';
console.log(tplEngine(template1, {
name: "Tom",
age: 29
}));

2. data属性复杂点

var tplEngine = function(tpl, data) {
var re = /<%([^%>]+)?%>/g;
var code = 'var r=[];\n',
cursor = 0;//辅助变量
var add = function(line, js) {//针对变量还是普通的片段分别处理
js ? code += 'r.push(' + line + ');\n' :
code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
};
while (match = re.exec(tpl)) {
add(tpl.slice(cursor, match.index));
add("this."+match[1],true);//要替换的变量
cursor = match.index + match[0].length;
}
add(tpl.substr(cursor, tpl.length - cursor));
code += 'return r.join("");'; // <-- return the result
console.info(code);

return new Function(code.replace(/[\r\t\n]/g,'')).apply(data);
};

我们研究下

new Function

构造函数

new Function ([arg1[, arg2[, ...argN]],] functionBody)

argN是传入的参数，当然可以省略

函数体是

code.replace(/[\r\t\n]/g,'')

，apply将函数体的上下文环境（this）指向了data

测试

var template2 = '<p>Hello, my name is <%name%>. I\'m <%profile.age%> years old.</p>';
console.log(tplEngine(template2, {
name: "Kim",
profile: {
age: 29
}
}));

3.加入for if循环和判断语句

按照上面的测试

var template3 =
'My skills:' +
'<%for(var index in this.skills) {%>' +
'<a href="#"><%skills[index]%></a>' +
'<%}%>';
console.log(tplEngine(template3, {
skills: ["js", "html", "css"]
}));

报错：

Uncaught SyntaxError: Unexpected token for

打印结果

r.push(for(var index in this.skills) {);

是有问题的。

var r=[];
r.push("My skills:");
r.push(for(var index in this.skills) {);
r.push("<a href=\"#\">");
r.push(this.skills[index]);
r.push("</a>");
r.push(this.});
r.push("");
return r.join("");

修改

var tplEngine = function(tpl, data) {
var re = /<%([^%>]+)?%>/g,
re2 = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g;
var code = 'var r=[];\n',
cursor = 0;
var add = function(line, js) {
js ? code += line.match(re2) ? line + '\n' : 'r.push(' + line + ');\n' :
code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
};
while (match = re.exec(tpl)) {
add(tpl.slice(cursor, match.index));
re2.test(match[1]) ? add(match[1], true) : add("this." + match[1], true);
cursor = match.index + match[0].length;
}
add(tpl.substr(cursor, tpl.length - cursor));
code += 'return r.join("");';
console.info(code);

return new Function(code.replace(/[\r\t\n]/g, '')).apply(data);
};

我们可以打印

code

看看

code+='console.log(r)；\n';

["My skills:", "<a href="#">", "js", "</a>", "<a href="#">", "html", "</a>", "<a href="#">", "css", "</a>", ""]

最终的结果

var r=[];
r.push("My skills:");
for(var index in this.skills) {
r.push("<a href=\"#\">");
r.push(this.skills[index]);
r.push("</a>");
}
r.push("");
console.log(r);
return r.join("");

解析结果

My skills:<a href="#">js</a><a href="#">html</a><a href="#">css</a>

参考阅读：

- 只有20行Javascript代码！手把手教你写一个页面模板引擎