最近開發(fā)前端一直用的前端模板引擎；

一直使用的 TPPL 模板引擎 源代碼如下：

function tppl(tpl, _data) {
    tpl = tpl.replace(/(<)/g, "<").replace(/(&)/g, "&").replace(/(>)/g, ">");
    var data = _data || {};
    if (typeof data !== "object") {
        console.log("TEFinal -> data is not JSON Object");
        return null;
    }
    var fn = function(d) {
        var i, k = [],
            v = [];
        for (i in d) {
            k.push(i);
            v.push(d[i]);
        }
        return new Function(k, fn.$).apply(d, v);
    };
    if ( !fn.$ ) {
        var tpls = tpl.split("");
        fn.$ = "var $empty=""; var $reg = RegExp(/object|undefined|function/i); var $=""";
        for (var t in tpls) {
            var p = tpls[t].split("");
            if (t != 0) {
                fn.$ += "=" == p[0].charAt(0) ?
                    "+($reg.test(typeof(" + p[0].substr(1) + "))?$empty:" + p[0].substr(1) + ")" :
                    ";" + p[0].replace(/
/g, "") + "$=$";
            }
            fn.$ += "+"" + p[p.length - 1].replace(/"/g, """).replace(/
/g, "
").replace(/
/g, "
").replace(/
/g, "
") + """;
        }
        fn.$ += ";return $;";
    }
    return data ? fn(data) : fn;
}

今天突發(fā)奇想，考慮到eval()中放入自執(zhí)行函數(shù)，而這個閉包又可以直接訪問到外部變量，那么經(jīng)過整理，終極版的模板引擎出爐，代碼如下：

function evalTE (tpl, data) {
    tpl = tpl.replace(/^s+|s+$/gm, "").replace(/
/g, "").replace(/
/g, "")
        .replace(/
/g, "").replace(/(<)/g, "<").replace(/(&)/g, "&").replace(/(>)/g, ">");
    var fn = "(function(){var $$ = """,
        evals = tpl.split("");
    for (var t in evals) {
        var p = evals[t].split("");
        if (t != 0) {
            fn += "=" == p[0].charAt(0) ? "+" + p[0].substr(1) : ";" + p[0] + "$$=$$";
        }
        fn += "+"" + p[p.length - 1] + """;
    }
    fn += ";return $$; })();";
    return data ? eval(fn) : fn;
}

通過eval()自執(zhí)行函數(shù)，函數(shù)又可以訪問到外部的 data 數(shù)據(jù); 如果不傳需要渲染的數(shù)據(jù)，那么可以返回該自執(zhí)行函數(shù)字符串。當(dāng)需要渲染的時候，可以通過eval()或者new Function()來調(diào)用