在平时编码中,经常要做拼接字符串的工作,如把json数据用HTML展示出来,以往字符串拼接与逻辑混在在一起会让代码晦涩不堪,加大了多人协作与维护的成本。而采用前端模板机制就能很好的解决这个问题。
精妙的 tmpl
前端模板类开源的不少,但最属 jQuery 作者 John Resig 开发的 “javascript micro templating” 最为精妙,寥寥几笔便实现了模板引擎核心功能。
它的介绍与使用方式请看作者博客:http://ejohn.org/blog/javascript-micro-templating/
让我们先看看他的源码:
麻雀虽小,五脏俱全,除了基本的数据附加外,还拥有缓存机制、逻辑支持。现在,若要我评出一个javascript 最节能的自定义函数排名,第一名是 $ 函数(document.getElementById 简版),而第二名就是 tmpl 了。
当然,它并非完美,我使用过程中发现了一些问题:
tmpl 美中不足
一、无法正确处理转义字符,如:
tmpl(
'<%=name%>\\<%=id%> '
, {name:
'糖饼'
, id:
'1987'
});
它就会报错。若正常工作,它应该输出:糖饼\1987
实际上解决起来很简单,添加一行正则对转义符进行转义:
str.replace(/\\/g,
"\\\\"
)
二、它有时候无法正确区分第一个参数是ID还是模板。
假若页面模板ID带有下划线,如 tmpl-photo-thumb 它不会去查找这个名称的模板,会认为这传入的是原始模板直接编译输出。
原始模板与元素id最直观的区别就是是否含有空格,因此改动下正则表达式即可:
三、它内部还残有一处测试用的代码,可删除。
print=
function
(){p.push.apply(p,arguments);}
tmpl 效率的疑惑
直到前段时间看了百度mux一篇介绍 YayaTemplate 的软文,原文作者对各大流行的模板引擎进行了效率测试,最终得出 YayaTemplate 是最快的一个。 虽然测试结果 tmpl 不敌 YayaTemplate ,但也让我打消了对性能的顾虑,实际应用中与传统的字符串拼接差不多。它们只有进行超大规模的解析才会有较大的性能差距。(超大规模?javascript本身就不适合干这事。若哪天程序员一次性给浏览器插入上千条列表数据而其慢无比的时候,不用怀疑:问题出在了这个程序员身上,他不会爱惜用户的浏览器。)
若说到引擎效率排名问题,我倒不觉得这是不能是衡量模板引擎的首要标准,模板语法也是重要的一环,这时候 YayaTemplate 的模板语法就显得晦涩多了,它为了节省几个正则表达式而在模板语法上耍了小聪明。
先展示 YayaTemplate 的源码:
若把性能问题上升到一个“学术问题”的高度尝试去解决,为什么 tmpl 会比 YayaTemplate 慢?
语法解析?虽然 YayaTemplate 使用了一个新颖的 javascript 包裹 html 的方式作为模板语法,但最终都需要用正则表达式解析成标准的 javascript 语法,这里正则的效率不会有太大的差异,并且双方都使用了缓存机制确保只对原始模板仅进行一次解析。
数据转换?模板引擎会把数据最终以变量的形式保存在闭包中,以好让模板获取到。这里先对比下一下双方的变量声明机制:
YayaTemplate 使用传统传递参数的形式实现。它通过遍历数据对象,把对象的名值分离,然后分别把对象成员名称作为new Function的参数名(即变量名),然后使用函数的appley调用方式传给那些参数。
tmpl 则使用了javascript不常用的 with 语句实现。 实现方式很简洁,省去了var这个关键字。
tmpl 性能问题就出在 with 上面。javascript 提供的 with 语句,本意是想用来更快捷的访问对象的属性。不幸的是,with语句在语言中的存在,就严重影响了 javascript 引擎的速度,因为它阻止了变量名的词法作用域绑定。
优化 tmpl
tmpl 若去掉 with 语句,而改用传统的传参性能立即大提升,经过实测在24万条数据下 firefox 能提高 5 倍,chrome 2.4 倍,opera 1.84倍,safari 2.1倍,IE6 1.1倍,IE9 1.35倍,最终与 YayaTemplate 不分上下。
测试地址:http://www.planeart.cn/demo/tmpl/tmpl.html
tmpl 优化版最终代码:
模板引擎依赖 Function 构造器实现,它与 eval 一样提供了使用文本访问 javascript 解析引擎的方法,这也会让性能显著的降低,但此时 javascript 中已别无他法。
使用 Function 构造器还会对参数名称有所限制,所以导致数据成员命名必须与 javascript 变量名规范保持一致,否则会报错。好在这个错误可以在运行的时候立马被发现,而不会成为一颗地雷。
tmpl 使用小窍门
一、缓存优化。
tmpl 默认对嵌入到页面中的模板进行了缓存优化(即第一个参数为ID的时候),它只会对模板进行一次分析。若原始模板是直接传入到 tmpl 第一个参数中,且需要多次使用的话,建议用公用变量缓存起来,需要解析数据的时候再使用,以获得相同的优化效果。如:
// 生成模板缓存
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'
).$);
日志结果:
"$1318348744541.push('
<ul> '); for (var i = 0, l = list.length; i < l; i ++) { $1318348744541.push('
<li>',list[i].index,'. 用户: ',list[i].user,'; 网站:',list[i].site,'</li>
'); } $1318348744541.push(' </ul>
');return $1318348744541"
现在你可以看到模板引擎编译好的javascript语句,可以对照这检查模板是否存在错误。($1318348744541是一个随机名称的临时数组,可忽略)
最后非常感谢 tmpl 原作者 与 YayaTemplate 作者的付出,正因为此我才有机会深入分析实现机制,解决问题并从中受益。独乐不如众乐,分享之。
分享到:
相关推荐
javascript模版引擎-tmpl的bug修复与性能优化分析.docx
精妙的 tmpl 前端模板类开源的不少,但最属 jQuery 作者 John Resig 开发的 “javascript micro templating” 最为精妙,寥寥几笔便实现了模板引擎核心功能。 它的介绍与使用方式请看作者博客:...
jquery-tmpl-master.zip
前端开源库-blueimp-tmplblueimp tmpl,1KB轻量级,快速和强大的javascript模板引擎,零依赖性。与node.js等服务器端环境、requirejs、browserify或webpack等模块加载程序以及所有Web浏览器兼容。
前端开源库-ape-tmplAPE TMPL,APE框架模板。
添加的版本:1.4.3 jQuery.tmpl(template [,data] [,options]) template用作模板的HTML标记或文本。 数据的数据呈现。这可以是任何JavaScript类型,包括Array或Object。 options用户定义的键/值对的可...
编译模板并允许缩小安装npm install blueimp-tmpl blueimp-tmpl-loader --save-dev 用法 var template = require ( "blueimp-tmpl!./file.html" ) ;// => returns the template function compiled with the tmpl ...
gulp-tmpl2js 用于将 tmpl 编译为 js 字符串的 Gulp 插件,可选 amd 或 commonjs 包装器。 安装 $ npm install --save-dev gulp-tmpl2js 用法 var gulp = require ( 'gulp' ) ; var tmpl2js = require ( 'gulp-...
开源项目-ukautz-tmpl.zip,go中构建管道的模板处理工具
开源项目-tmc-tmpl.zip,tmpl: tool to have text/template at your fingertips
jquery-tmpl
前端开源库-coz-tmplcoz tmpl,coz的内置模板。
dev-tmpl 回答几个问题,dev-tmpl 就会 设置package.json和bower.json 设置 git(如果需要)并执行第一次提交 打开浏览器,跳转到新建 repo页面@github 按原样使用或分叉它并在上面构建您自己的 tmpl-x。 得到它...
dev-tmpl 回答几个问题,dev-tmpl 就会 设置package.json和bower.json 设置 git(如果需要)并执行第一次提交 打开浏览器,带你到新建 repo页面@github 按原样使用或分叉它并在上面构建您自己的 tmpl-x。 得到它...
JavaScript库模板 这旨在作为在其上构建JavaScript库的基础。 JavaScript库的确切结构尚未标准化,因此该项目旨在定义一种自觉的模式,用于组织,构建和测试代码。 如果要编写JavaScript库并需要起点,这是一个不错...
web快速部署 jquery tmpl demo web部署数据
wu.tmpl.js, 高性能模板引擎 (js template)
具有JavaScriptHTML或字符串模板引擎 特征 速度快,体积小且没有依赖性。 支持包括内部模板。 支持json,array和任何js对象作为渲染数据。 简洁的语法,易于使用。 支持所有常用的浏览器。 支持使用html脚本或...
1KB轻量,快速且强大JavaScript模板引擎,零依赖。 与类的服务器端环境, 或类的模块加载器以及所有Web浏览器。 用法 客户端 使用安装blueimp-tmpl软件包: npm install blueimp-tmpl 在您HTML标记中包含(最小化...