artTemplate 模板语法中多余空格导致渲染为空的问题分析
在使用 artTemplate 进行页面渲染时,偶尔会遇到模板编译后完全没有任何输出的情况。这通常不是逻辑错误,而是语法细节上的'坑'。
问题复现
看下面这段简单的模板代码:
<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>
如果执行上述代码,控制台打印出的 HTML 可能是空的。仔细对比会发现,{{each list as v i}} 这一行里,each 和 list 之间多了一个空格。
原因分析
这个问题的根源在于 artTemplate 的解析器实现。查看其源码中的解析逻辑,可以看到它使用了单空格来分割指令:
e.parser = function (a) {
// ...
a = a.(, );
b = a.();
c = b.();
e = b.();
}

