javascript模版引擎-tmpl 使用小窍门

Posted 2020-08-19

 

一、缓存优化。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语句，可以对照这检查模板是否存在错误。