模板引擎

• 模板引擎是为了使用户界面与业务数据分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。模板引擎不属于特定技术领域，它是跨领域跨平台的概念。
• 参考手把手教你写一个页面模板引擎
• 置换型的模板引擎，一个简单的栗子

var TemplateEngine=function(tpl,data){
        // 实现函数
    }
    var template='<p>Hello,my name is <%name%>. I\'m <%age%> years old.</p>'
    console.log(TemplateEngine(template,{name:'Krasimir',age:29}))

输入是我们的模板以及数据对象，输出是下面这个样子：

<p>Hello,my name is Krasimir. I'm 29 years old.</p>

第一步要做的是寻找里面的模板参数，然后替换成传给引擎的具体数据。使用正则表达式来实现这一步。

var re=/<%([^%>]+)?%>/g
//这句正则会捕获所有以<%开头，以%>结尾的片段。末尾的参数g表示全局模式匹配，即表示不只匹配一个，而是匹配所有符合的片段。我们需要的是根据正则表达式输出一个数组，包含所有的字符串，这正式exec所做的。

var re=/<%([^%>]+)?%>/g
var match=re.exec(tpl)

如果我们用console.log把变量match打印出来，我们会看见：

[
    "<%name%>",
    " name ", 
    index: 21,
    input: 
    "<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>"
]

不过我们可以看见，返回的数组仅仅包含第一个匹配项。我们需要用while循环把上述逻辑包起来，这羊才能得到所有的匹配项

var re = /<%([^%>]+)?%>/g;
while(match = re.exec(tpl)) {
    console.log(match);
}

完整的代码如下：

    var TemplateEngine=function(tpl,data){
        var re=/<%([^%>]+)?%>/g
        while(match =re.exec(tpl)){
            tpl=tpl.replace(match[0],data[match[1]])
        }
        console.log(tpl)
    }
    var template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>';
    console.log(TemplateEngine(template, {
    name: "Krasimir",
    age: 29
}));
//输出是：<p>Hello, my name is Krasimir. I'm 29 years old.</p>

我们以data['property']的方式使用了一个简单对象来传递数据，但是实际情况下我们很可能需要更复杂的嵌套对象。所以我们稍微修改了一下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 am <%this.profile.age%>years old.</p>'

可以使用new Function 的语法，根据字符串创建一个函数。我们不妨来看个栗子：

var fn=new Function('arg',console.log(arg+1))
fn(2)  //output 3

通过这种方法，我们可以根据字符串构造函数，包括它的参数和函数体。按照之前的想法，这个模板引擎最终返回的应该是一个编译好的模板。还是用之前的模板字符串作为例子，那么返回的内容应该类似于：

"<p>Hello,my name is"+
    this.name+
    ". I am"+
    this.profile.age+
    " years old.</p>"

由于使用者可能会传递更加复杂的JavaScript代码，所以这里需要再来一个循环如下：

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

如果使用字符串拼接的话，代码应该是下面这样子：

return
'My skills:' + 
for(var index in this.skills) { +
'<a href="">' + 
this.skills[index] +
'</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>')
    }
    return r.join('')

下一步就是收集模板里面不同的代码行，用于生成函数。通过前面介绍的方法，我们可以知道模板中由哪些正则表达式的匹配项以及他们的位置。所以依靠一个辅助变量（cursor），我们就可以得到想要的结果

    var TemplateEngine = function(tpl, data) {
    var re = /<%([^%>]+)?%>/g,
        code = 'var r=[];\n',
        cursor = 0;
    var add = function(line) {
        code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
    }
    while(match = re.exec(tpl)) {
        add(tpl.slice(cursor, match.index));
        add(match[1]);
        cursor = match.index + match[0].length;
    }
    add(tpl.substr(cursor, tpl.length - cursor));
    code += 'return r.join("");'; // <-- return the result
    console.log(code);
    return tpl;
}
var template = '<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>';
console.log(TemplateEngine(template, {
    name: "Krasimir Tsonev",
    profile: { age: 29 }
}))

添加一个正则表达式，用于判断代码中是否包含if,for,else等关键字，如果有的话直接添加到脚本代码中，否则就添加到数组中去。
终板：

var TemplateEngine = function(tpl, data) {
  var re = /<%([^%>]+)?%>/g,  //匹配以<%%>字符串
    reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,   //匹配控制语句
    code = 'var r=[];\n',
    cursor = 0;
var add = function(line, js) {
    // 如果是js并且使控制语句  则直接加进字符串
    // 如果是js但并不是控制语句  则添加进数组
    // 如果不是js  则添加进数组  并且对字符串中的双引号进行转义
    js? code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n' :
        code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
}
while(match = re.exec(tpl)) {
    add(tpl.slice(cursor, match.index));
    add(match[1], true); // <-- say that this is actually valid js
    cursor = match.index + match[0].length;
}
    add(tpl.substr(cursor, tpl.length - cursor));
    code += 'return r.join("");'; // <-- return the result
    console.log(code);
        
    return new Function(code.replace(/[\r\t\n]/g, '')).apply(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"]
}));