js模板引擎的实现

这里实现一个较传统的模板引擎。
模板引擎的实现原理其实就是拼接字符串，+号拼接速度最快。这里我们采用这种方式实现一个模板引擎。
首先，在js中，声明函数有一种原始的方式，就是

new Function(arg1, arg2..., functionBody)
前面是需要传入的参数，最后则为函数体的内容。
如：
var adder = new Function("a", "b", "return a + b");
adder(2, 6); // 8

但是要注意的是他们都要用字符串方式传入（加引号）。我们恰好可以使用这种方式来实现模板引擎。

new Function(数据名, 拼好的函数体代码)

"use strict";
function render(element, data) {
    var tpl = document.getElementById(element).innerHTML.replace(/[\r\n\t]/g, '');
    var body = "var p=[]; p.push('"
        + tpl
            .replace(/<%=(.*?)%>/g, "');p.push($1);p.push('") // 替换<%= name %>模板数据 先讲数据进行替换
            // 没有=号的是逻辑语句
            .replace(/%>/g, "p.push('") // 无等号尖括号的结束其实正是push该逻辑下的模板的的开始 push(
            .replace(/<%/g, "');") // ) 无等号尖括号的开始其实正是push该逻辑下的模板的结束
        + "'); return p.join('');";

    var exec = new Function('data', body);
    return exec(data)
}