原生JavaScript实现模板引擎

本文实现来自《深入浅出node.js》第8章的模板小结
本文主要阐述如何利用模板引擎来实现对模板的解析。很多时候
我们常常能在jsp中看到这样的语法结构。

  'Hello <%=username%>.';
```  
有经验的同学会想到一个问题。编译器是如何识别以及将username替换成我们
真实数据的？  
下面将用JavaScript实现对它的解析。  
###1 准备工作  
实现原理：
> * 语法分解
> * 处理表达式（上述的<%=username%>）
> * 生成可执行的语句
> * 和真实数据一起执行。生成最终字符串（类似于Hello Jackson Tian. ）
###2 代码实践

//模板语法代码。
//引擎拼接字符串的原理还是通过正则表达式进行匹配替换。以此我们可以想到
//几乎所有的模板都可以用这种方法编译使用。vue中的模板也是。
var render = function (str, data) {
//先把我们的定义标签<%=username%>换成obj.name来解析

    var tpl = str.replace(/<%=([ % \s\S]+?)%>/g, function (match, code) {
        return "' + obj." + code + "+ '";
    });
    console.log(tpl);  //hello ' + obj.username+ '.
    tpl = "var tpl = '" + tpl + "'\nreturn tpl;";  
    console.log(tpl); //var tpl='Hello ' + obj.username+ '.'     return tpl;
      //下面构造一个新的函数来实现解析obj中username 
    var complied = new Function('obj', tpl);
    return complied(data);
};
var tpl = 'Hello <%=username%>.';
//调用模板函数，这里的参数为模板对象，以及模板中对应的字符串解析策略。
//类似于策略模式中，给dom控件赋予相应的校验策略。
console.log(render(tpl, { username: 'Jackson Tian' }));

// => Hello Jackson Tian.

###3注意点  

这里的new Function（）代表

/ newFunction 解析
1 var message = new Function(‘msg’,’alert(msg)’);
2 // 等价于：
3 function message(msg) {
4 alert(msg);
5 } /
`