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

Posted 2020-12-08 homehtml

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

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

function tppl(tpl, _data) {
    tpl = tpl.replace(/(&lt;)/g, "<").replace(/(&amp;)/g, "&").replace(/(&gt;)/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(‘<nb>‘);
        fn.$ = "var $empty=‘‘; var $reg = RegExp(/object|undefined|function/i); var $=‘‘";
        for (var t in tpls) {
            var p = tpls[t].split(‘</nb>‘);
            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, ‘\n‘).replace(/
/g, ‘\n‘).replace(/
/g, ‘\n‘) + "‘";
        }
        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(/(&lt;)/g, ‘<‘).replace(/(&amp;)/g, ‘&‘).replace(/(&gt;)/g, ‘>‘);
    var fn = ‘(function(){var $$ = ‘‘‘,
        evals = tpl.split(‘<nb>‘);
    for (var t in evals) {
        var p = evals[t].split(‘</nb>‘);
        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()来调用