artTemplate的空白输出坑

版权声明：本文为博主原创文章，欢迎分享和转载。 https://blog.csdn.net/moakun/article/details/84064616

一、问题现象

<script type="text/html" id="man_template">
    {{each  list as v i}}
       <tr>
           <td>{{v.name}}</td>
           <td>{{v.height}}</td>
           <td>{{v.age}}</td>
       </tr>
    {{/each}}
</script>
<script>
    var html=template("man_template",{list:[{name:'zhang',age:18,height:'180cm'}]});
    console.log(html);
</script>

输出：编译后完全没有信息

原因：{{each   list as v i}}此行多了个空格

二、artTemplate解析器的坑

e.parser = function (a) {
        a = a.replace(/^\s/, "");
        var b = a.split(" "), c = b.shift(), e = b.join(" ");
        switch (c) {
            case"if":
                a = "if(" + e + "){";
                break;
            case"else":
                b = "if" === b.shift() ? " if(" + b.join(" ") + ")" : "", a = "}else" + b + "{";
                break;
            case"/if":
                a = "}";
                break;
            case"each":
                var f = b[0] || "$data", g = b[1] || "as", h = b[2] || "$value", i = b[3] || "$index", j = h + "," + i;
                "as" !== g && (f = "[]"), a = "$each(" + f + ",function(" + j + "){";
                break;
            case"/each":
                a = "});";
                break;
            case"echo":
                a = "print(" + e + ");";
                break;
            case"print":
            case"include":
                a = c + "(" + b.join(",") + ");";
                break;
            default:
                if (/^\s*\|\s*[\w\$]/.test(e)) {
                    var k = !0;
                    0 === a.indexOf("#") && (a = a.substr(1), k = !1);
                    for (var l = 0, m = a.split("|"), n = m.length, o = m[l++]; n > l; l++) o = z(o, m[l]);
                    a = (k ? "=" : "=#") + o
                } else a = d.helpers[c] ? "=#" + c + "(" + b.join(",") + ");" : "=" + a
        }
        return a
    }

以下此行只使用单一空白分隔编译模板语法，输入多空格将导致b数组含有空串。

 var b = a.split(" "), c = b.shift(), e = b.join(" ");