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

最近开发前端一直用的前端模板引擎；一直使用的 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, ‘\\
‘).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(/(&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()来调用

原文地址：https://www.cnblogs.com/homehtml/p/12846009.html

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_8905