简易JS模板引擎

这几天在做移动端专题页时，因为页面比较少就没有引入一些功能强大的JS模板引擎，自己在String上扩展了一个方法用于html模板渲染，很简单，后续再扩展。

代码：

String.prototype.render = function(arg){
    var data = arg;
    return this.replace(/{{(.*?)}}/g, function(match, p){
        return new Function('d', 'return d.'+p)(data);
    });
}

// test
var y = 'hello {{name}}, the data is {{data.name}}'.render({
    name: 'huhu',
    data:{
        name: 'jiujiu'
    }
})

// hello huhu, the data is jiujiu
console.log(y);

在这个里面用到了 str.replace() 方法和 new Function():

str.replace() 是对字符串里面匹配的字符进行替换。

语法

str.replace(regexp|substr, newSubStr|function[, flags])

第一个参数：可以是字符串或正则，匹配将要替换的字符。
第二个参数：可以是字符串或一个函数。

第二个参数是字符串

在字符串里面可以插入下面的特殊变量：

变量名	代表的值
$$	插入一个 “$”。
$&	插入匹配的子串。
$`	插入当前匹配的子串左边的内容。
$’	插入当前匹配的子串右边的内容。
$n or $nn	假如第一个参数是 RegExp对象，并且n或nn是个十进制的数字，那么插入第n个括号匹配的字符串。

第二个参数是函数

在这种情况下，当匹配执行后， 该函数就会执行。 函数的返回值作为替换字符串。 (注意: 上面提到的特殊替换参数在这里不能被使用。) 另外要注意的是， 如果第一个参数是正则表达式， 并且其为全局匹配模式， 那么这个方法将被多次调用， 每次匹配都会被调用。

函数的参数：

变量名	代表的值
match	匹配的子串。（对应于上述的$&。）
p1, p2, …	假如replace()方法的第一个参数是一个RegExp 对象，则代表第n个括号匹配的字符串。（对应于上述的$1，$2等。）
offset	匹配到的子字符串在原字符串中的偏移量。（比如，如果原字符串是“abcd”，匹配到的子字符串时“bc”，那么这个参数将时1）
string	被匹配的原字符串。

注：p1, p2, …参数个数由第一个参数是正则里面括号子串数决定
例子：

function replacer(match, p1, p2, p3, offset, string) {
  return [p1, p2, p3].join(' - '); //abc - 12345 - #$*%
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);

Function构造器 会创建一个新的Function对象

语法

new Function ([arg1[, arg2[, …argN]],] functionBody)

前面的所有参数都是作为最后一个参数（函数体）的参数，所有的参数都是字符串形式。

注意: 使用Function构造器生成的函数，并不会在创建它们的上下文中创建闭包；它们一般在全局作用域中被创建。当运行这些函数的时候，它们只能访问自己的本地变量和全局变量，不能访问Function构造器被调用生成的上下文的作用域。

如在上面的render方法中，new Function不能访问到data这个变量，必须通过参数传递。
例子：

new Function('a', 'b', 'console.log(a, b)')('one', 'two'); // one two