14行实现js原生语法前端模板引擎

最近开发前端一直用的前端模板引擎；

一直使用的 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;
}

今天突发奇想，考虑到eval()中放入自执行函数，而这个闭包又可以直接访问到外部变量，那么经过整理，终极版的模板引擎出炉，代码如下：

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()自执行函数，函数又可以访问到外部的 data 数据; 如果不传需要渲染的数据，那么可以返回该自执行函数字符串。当需要渲染的时候，可以通过eval()或者new Function()来调用