随着web的发展，前端应用变得越来越复杂，javascript MVC思想也开始流行起来，模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，各种模板引擎层出不穷，在各个大型的网上上面都能看到它的身影。

本文用简洁的代码很巧妙的实现了一个简单的模板引擎。代码如下：

var templateEngine = function(tpl,data){
	var reg = /<%([^%>]+)?%>/g,
		staticReg = /(^\s*(if|else|elseif|do|while|switch|case|break|for|with|{|})(.*)?)/g,
		code = 'var r = [];\n',
		cursor = 0;
	while( match = reg.exec(tpl) ){
		add(tpl.slice(cursor,match.index))(match[1],true);
		cursor = match.index + match[0].length;
	}
	add(tpl.substr(cursor,tpl.length-cursor));
	code += 'return r.join("");';
	return new Function(code.replace(/[\r\n\t]/g,'')).apply(data);
	function add(line,isJs){
		isJs ? (code += line.match(staticReg) ? line + '\n' : 'r.push(' + line.replace(/"/g,'\\"') + ');\n')
			 : (code += line != '' ? 'r.push("' + line.replace(/"/g,'\\"') + '");\n' : '');
		return add;
	}
}

数据测试代码：

var template = 
'My skills:' + 
'<%if(this.showSkills) {%>' + 
    '<%for(var index in this.skills) {%>' + 
    '<a href="#"><%this.skills[index]%></a>' + 
    '<%}%>' + 
'<%} else {%>' + 
    '

none

' + 
'<%}%>'; 
console.log(templateEngine(template, { 
    skills: ["js", "html", "css"], 
    showSkills: true 
})); 

在线Demo：http://demo.deanhan.cn/js-template