最简版：
var TemplateEngine = function(tpl, data) {
var regex = /<%([^%>]+)?%>/g;
while(match = regex.exec(tpl)) {
tpl = tpl.replace(match[0], data[match[1]])
}
return tpl;
}
完成版：
var TemplateEngine = function(html, options) {
// 捕获所有以<%开头，以%>结尾的片段
var re = /<%([^%>]+)?%>/g
// 判断代码中是否包含if、for、else等等关键字。如果有的话就直接添加到脚本代码中去，否则就添加到数组中去
var reg = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
// 变量code保存了函数体
var code = 'var r=[];\n',
// 当前解析到了模板中的哪个位置。我们需要依靠它来遍历整个模板字符串
var cursor = 0;
// 把解析出来的代码行添加到变量code中去。有一个地方需要特别注意，那就是需要把code包含的双引号字符进行转义（escape）
var add = function(line, js) {
// 字符串直接push到code，否则就直接添加到脚本中
js? (code += line.match(reg) ? line + '\n' : 'r.push(' + line + ');\n') :
(code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');//将code的“进行转义
return add;
}
while(match = re.exec(html)) {
// 占位符的内容和一个布尔值一起作为参数传给add函数，用作区分。这样就能生成我们想要的函数体了
// 执行两次add
add(html.slice(cursor, match.index))(match[1], true);
cursor = match.index + match[0].length;
}
add(html.substr(cursor, html.length - cursor));//从捕获到的位置继续执行
code += 'return r.join("");';
// 设定函数上下文，因此我们需要用this.name
return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
}
var template = '<p>Hello, my name is <%this.name%>. I\'m <%this.age%> years old.</p>';
console.log(TemplateEngine(template, {
name: "Krasimir",
age: 29
}));
参考链接：只有20行Javascript代码！手把手教你写一个页面模板引擎
