artTemplate 模板语法中多余空格导致渲染为空的问题分析

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.();
  
}