一、缓存优化。tmpl 默认对嵌入到页面中的模板进行了缓存优化(即第一个参数为ID的时候),它只会对模板进行一次分析。若原始模板是直接传入到 tmpl 第一个参数中,且需要多次使用的话,建议用公用变量缓存起来,需要解析数据的时候再使用,以获得相同的优化效果。兄弟连HTML5培训:
// 生成模板缓存var render = tmpl(listTmpl);
// 可多次调用模板elem.innerHTML = render(data1);elem.innerHTML = render(data2);...
二、避免未定义的变量引起系统崩溃。若模板中定义了一个变量输出,而且传入数据却少了这个项目就会出现变量未定义的错误,从而引起整个程序的崩溃。如果无法确保数据完整性,仍然有方法可以对对其成员进行探测。原版中暗含变量保存了原始传入的数据,即 obj ;而在我的升级版本中则是关键字 this,如:
<% if (this.dataName !== undefined) { %>
<%=dataName %>
<% } %>
三、调试模板。
由于模板引擎是用文本的调用的 javascript 引擎,调试工具无法定位到出错的行。在 升级版本 中你可以用调试工具输出编译好的模板缓存。例如调试这个模板:
<script id="tmpl" type="text/tmpl">
<ul>
<% for (var i = 0, l = list.length; i < l; i ++) { %>
<li><%=list[i].index%>. 用户: <%=list[i].user%>; 网站:<%=list[i].site%></li>
<% } %>
</ul>
输出缓存:
window.console(tmpl(‘tmpl‘).$);
日志结果:
"$111111.push(‘
<ul> ‘); for (var i = 0, l = list.length; i < l; i ++) { $111111.push(‘
<li>‘,list[i].index,‘. 用户: ‘,list[i].user,‘; 网站:‘,list[i].site,‘</li>
‘); } $111111.push(‘ </ul>
‘);return $111111"
现在你可以看到模板引擎编译好的javascript语句,可以对照这检查模板是否存在错误。