JS模板引擎 TiniestTpl.js 在实际运用中的遇到的一个BUG

《再也没有比这更快的JS模板引擎：TiniestTpl.js》在实际运用中的遇到的一个BUG解决

模板代码：

<div id="test">
    <table>
        <tr>
            <td>{%=data.name%}</td>
        </tr>
        {% for (let idx in data.list) { %}
        <tr>
            <td>{%=data.list[idx]%}</td>
        </tr>
        {% } %}
    </table>
</div>

使用 $('#test').html() 或 document.getElementById('test).innerHtml，获取的HTML代码，均会变成下述样子：

{% for (let idx in data.list) { %}

{% } %}
<table>
    <tbody>
        <tr>
            <td>{%=data.name%}</td>
        </tr>
        <tr>
            <td>{%=data.list[idx]%}</td>
        </tr>
    </tbody>
</table>

原本插入在 <table>的<tr>与<tr>之前的 {% for (let idx in data.list) { %} 和 {% } %}位置发生的改变，因此该模板无法成功的渲染显示。

经过发现，只有使用<!-- -->时，位置不会发生改变，模板修改如下：

<div id="test">
        <table>
            <tr>
                <td><!--%=data.name%--></td>
            </tr>
            <!--% for (let idx in data.list) { %-->
            <tr>
                <td><!--%=data.list[idx]%--></td>
            </tr>
            <!--% } %-->
        </table>
    </div>

获取的html源代码：

<table>
    <tbody>
        <tr>
            <td>
                <!--%=data.name%-->
            </td>
        </tr>
        <!--% for (let idx in data.list) { %-->
        <tr>
            <td>
                <!--%=data.list[idx]%-->
            </td>
        </tr>
        <!--% } %-->
    </tbody>
</table>

修改后的 TiniestTpl.js

(function (options) {

    window.tiniest = {
        'tplCache': {}
    };

    tiniest.tpl = function (html, data, fstr = '') {
            if (typeof html != 'string' || !html) {
                    return '';
                }
        if (typeof tiniest.tplCache[html] == 'function') {
            return data ? tiniest.tplCache[html](data) : tiniest.tplCache[html];
        }
        let tmp = html.replace(/[\r\n\t]/g, " ").split(/<!--%/g);
        for (let i = 0; i < tmp.length; i++) {
            if (tmp[i][0] == '=') {
                let end = tmp[i].indexOf('%-->');
                fstr += "str +=" + tmp[i].substr(1, end - 1) + "+'" + tmp[i].substr(end + 4) + "';";
            } else if (tmp[i].lastIndexOf('%-->') > 0) {
                let end = tmp[i].indexOf('%-->');
                fstr += tmp[i].substr(0, end - 1) + "str += '" + tmp[i].substr(end + 4) + "';";
            } else {
                fstr += "str += '" + tmp[i] + "';";
            }
        }
        fstr = "func = function(data) { let str=\"\"; " + fstr + " return str; };";
        tiniest.tplCache[html] = eval(fstr);
        return data ? tiniest.tplCache[html](data) : tiniest.tplCache[html];
    }
}());

标签：tmp,tiniest,js,html,TiniestTpl,fstr,data,BUG,tplCache
来源： https://blog.51cto.com/u_12641643/2763508