概念：
模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档
使用原因：
前端模板引擎出现之前，在需要用js渲染页面的情况下，我们一般会通过js将数据和生成结构绑定。例如：
var html = "";
for(var i =0;i<data.length;i++){
html+="<li>"+data[i]+"</li>"
}
一旦业务复杂起来，或者多人维护的情况下，几乎会失控。而且如果需要拼接的 HTML 代码里有很多引号的话（比如有大量的 href 属性，src 属性），那么就非常容易出错了。
动手写一个引擎：
参考http://blog.jobbole.com/56689/；
一：从简单的说起（字符串的替换）：
比如：
var template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>';
data = { name: "Krasimir", age: 29 }
最终转换为
<p>Hello, my name is Krasimir . I\'m 29 years old.</p>
步骤
1.使用正则查找所有<%属性名%>片段
var re = /<%([^%>]+)?%>/g;//
这句正则表达式会捕获所有以<%开头，以%>结尾的片段;
[^%>] ：^表示非，意为片段中不包含%或者不包含>的部分；
（）为捕获组；
2.将每次得到片段替换为数据中的属性值；
这里使用exec();取得
[0:"<%name%>"//与正则表达式相匹配的文本
1:"name"//捕获组里面的内容
index:21//匹配文本的每次起始位置
input:"<p>Hello, my name is frank. I'm <%age%> years old.</p>"//被检索的字符串 string
]
不确定次数的循环操作使用while()
while(match = regex.exec(tpl)) {
tpl = tpl.replace(match[0], data[match[1]])
//match[0 ] :循环第一次得出<%name%> ；循环第二次得出<%age%>
//data[match[1]:循环第一次得出 data['name'] ； 循环第二次得出data['age']
}
整体代码如下：
var TemplateEngine = function(tpl, data) {
var regex = /<%([^%>]+)?%>/g;
while(match = regex.exec(tpl)) {
tpl = tpl.replace(match[0], data[match[1]])
}
return tpl;
}
TemplateEngine(template, data)
二：通过new Function();将字符转换为js代码
上面的例子我们以data[“property”]的方式使用了一个简单对象来传递数据，但是实际情况下我们很可能需要更复杂的嵌套对象,如果将data改成如下。
eg:data={
name: "Krasimir Tsonev",
profile: { age: 29 }
}
在模板中使用
<%profile.age%>的话，代码会被替换成data[‘profile.age’]，结果是undefined。这样我们就不能简单地用replace函数，而是要用别的方法。如果能够在<%和%>之间直接使用Javascript代码就最好了。
var template = '<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>';
最终将template转换成js代码为
"<p>Hello, my name is "
+ this.name+
". I\'m "
+this.profile.age+
" years old.</p>"
//this.属性名：为这个方法作用域下数据的属性值；
//****注：代码特点为，字符串加引号，非字符即代码运行部分没有引号！！！****
步骤
一、准备前提：new Function("字符串")：
var fun = new Function("a","console.log(a)"); //可以执行字符串内的代码
fun(1)//1；
此代码相当于
var fun = function(a){
console.log(a)
}
fun(1)
由此将上述模板转为
var TemplateEngine= function(data){
return "<p>Hello, my name is "+ this.name+ ". I\'m " +this.profile.age+" years old.</p>"
}
var data={
name: "Krasimir Tsonev",
profile: { age: 29 }
}
TemplateEngine.apply(data)//在data的作用域下使用方法TemplateEngine；
最终转为new Function("字符串")的写法为；
var template= "<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>"
var result = new Function(template).apply(data);
二、正式开始：模板用正则替换为js代码：
var template= '<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>'
希望得到模板的js格式为
"<p>Hello, my name is " //字符
+ this.name+//代码
". I\'m "
+this.profile.age+
" years old.</p>"
js格式实现之前的字符效果为（后期通过new Function()转成js代码）
var arr=[];
arr.push("<p>Hello, my name is ");
arr.push(this.name);
arr.push(". I'm ");
arr.push(this.profile.age);
arr.push(" years old.</p>");
return arr.join("")
思路：需要在上述js格式的每行打个隔断，即碰到<%...%>,做个隔断，同时判断若为字符串加引号,，若为js代码直接输出，以下代码用变量code接住所有隔断，用方法add()实现判断js并推入隔断。与此同时需要考虑模板中的引号需要转义，以免影响js效果。
整体代码如下：
function TemplateEngine(tpl,data) {
var reg = /<%([^%>]+)?%>/g;
var code = 'var arr=[];\n',
cur=0; //游标，用来记录查找的位置；
while(match = reg.exec(tpl)){
add(tpl.slice(cur,match['index'])); //eg:第一次循环加入arr.push("<p>Hello, my name is ");
add(match[1],true);//eg:第一次循环加入arr.push(this.name);
cur=match['index']+match[0].length; // 记录下一次循环，需要截取的起始位置
}
//至此截取到最后一个<%this.profile.age%>
add(tpl.slice(cur)); // 截取剩余模板剩余部分
code+="return arr.join(\"\")"; // 由于code在new Function()中，因此需要返回运行代码。
function add(line ,js) {
js?code+="arr.push("+line+");\n":
code+="arr.push(\""+line.replace('\"','\\"')+"\");\n";
}
return new Function(code).apply(data);
}
var template = '<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>';
var data = {
name: "lili",
profile: { age: 30 }
};
console.log(TemplateEngine(template, data));
模板引擎接近完成了，不过还有一点，我们需要支持更多复杂的语句，比如条件判断和循环。我们接着上面的例子继续写。
var template =
'My skills:' +
'<%for(var index in this.skills) {%>' +
'<a href="#"><%this.skills[index]%></a>' +
'<%}%>';
console.log(TemplateEngine(template, {
skills: ["js", "html", "css"]
}));
沿用上一个方法，这里会产生一个异常，Uncaught SyntaxError: Unexpected token for。如果我们调试一下，把code变量打印出来，我们就能发现问题所在。
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(});
r.push("");
return r.join("");
带有for循环的那一行不应该被直接放到数组里面，而是应该作为脚本的一部分直接运行。所以我们在把内容添加到code变量之前还要多做一个判断。
var re = /<%([^%>]+)?%>/g,
reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
code = 'var r=[];\n',
cursor = 0;
var add = function(line, js) {
js? code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n' :
code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
}
这里我们新增加了一个正则表达式。它会判断代码中是否包含if、for、else等等关键字。如果有的话就直接添加到脚本代码中去，否则就添加到数组中去。运行结果如下：
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("");
return r.join("");
最后一个改进可以使我们的模板引擎更为强大。我们可以直接在模板中使用复杂逻辑，例如：
var songs =[
{name:'刚刚好', singer:'薛之谦', url:'http://music.163.com/xxx'},
{name:'最佳歌手', singer:'许嵩', url:'http://music.163.com/xxx'},
{name:'初学者', singer:'薛之谦', url:'http://music.163.com/xxx'},
{name:'绅士', singer:'薛之谦', url:'http://music.163.com/xxx'},
{name:'我们', singer:'陈伟霆', url:'http://music.163.com/xxx'},
{name:'画风', singer:'后弦', url:'http://music.163.com/xxx'},
{name:'We Are One', singer:'郁可唯', url:'http://music.163.com/xxx'}
];
var html =
'<div class="song-list">'+
' <h1>热歌榜</h1>'+
' <ol>'+
'<%for(var i=0; i<this.songs.length;i++){%>'+
'<li><%this.songs[i].name%> - <%this.songs[i].singer%></li>'+
'<%}%>'+
' </ol>'+
'</div>';
最终版本代码为
var TemplateEngine = function(html,options) {
var re = /<%([^%>]+)?%>/g,
reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
code = 'var Arr=[];\n',
cursor = 0;
var add = function(line, js) {
js? (code += line.match(reExp) ? line + '\n' : 'Arr.push(' + line + ');\n') :
(code += line != '' ? 'Arr.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
return add;
};
while(match = re.exec(html)) {
add(html.slice(cursor, match.index));
add(match[1], true);
cursor = match.index + match[0].length;
}
add(html.substr(cursor, html.length - cursor));
code += "console.log(this);\n";
code += 'return Arr.join("");';
return new Function (code.replace(/[\r\t\n]/g, '')).apply(null,songs);//此处需注意变量songs不是对象，需要将apply(null,songs)加null，变为全局作用域；
};
var results =TemplateEngine (html,songs);
document.body.innerHTML = results;
