javascript模版引擎-tmpl的bug修复与性能优化分析
2024-05-06 14:23:18
供稿：网友
精妙的 tmpl
前端模板类开源的不少，但最属 jQuery 作者 John Resig 开发的 “javascript micro templating” 最为精妙，寥寥几笔便实现了模板引擎核心功能。
它的介绍与使用方式请看作者博客：http://ejohn.org/blog/javascript-micro-templating/
让我们先看看他的源码：
代码如下:
(function(){
var cache = {};
this.tmpl = function (str, data){
var fn = !//W/.test(str) ?
cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};" +
"with(obj){p.push('" +
str
.replace(/[/r/t/n]/g, " ")
.split("<%").join("/t")
.replace(/((^|%>)[^/t]*)'/g, "$1/r")
.replace(//t=(.*?)%>/g, "',$1,'")
.split("/t").join("');")
.split("%>").join("p.push('")
.split("/r").join("//'")
+ "');}return p.join('');");
return data ? fn( data ) : fn;
};
})();
麻雀虽小，五脏俱全，除了基本的数据附加外，还拥有缓存机制、逻辑支持。现在，若要我评出一个javascript 最节能的自定义函数排名，第一名是 $ 函数(document.getElementById 简版)，而第二名就是 tmpl 了。
当然，它并非完美，我使用过程中发现了一些问题：
tmpl 美中不足
一、无法正确处理转义字符，如：
代码如下:tmpl('<%=name%>//<%=id%> ', {name:'糖饼', id: '1987'});
它就会报错。若正常工作，它应该输出：糖饼/1987
实际上解决起来很简单，添加一行正则对转义符进行转义：
代码如下:str.replace(////g, "////")
二、它有时候无法正确区分第一个参数是ID还是模板。
假若页面模板ID带有下划线，如 tmpl-photo-thumb 它不会去查找这个名称的模板，会认为这传入的是原始模板直接编译输出。
原始模板与元素id最直观的区别就是是否含有空格，因此改动下正则表达式即可：
view sourceprint?1 !//s/.test(str)
三、它内部还残有一处测试用的代码，可删除。
代码如下:print=function(){p.push.apply(p,arguments);}
tmpl 效率的疑惑
直到前段时间看了百度mux一篇介绍 YayaTemplate 的软文，原文作者对各大流行的模板引擎进行了效率测试，最终得出 YayaTemplate 是最快的一个。 虽然测试结果 tmpl 不敌 YayaTemplate ，但也让我打消了对性能的顾虑，实际应用中与传统的字符串拼接差不多。它们只有进行超大规模的解析才会有较大的性能差距。（超大规模？javascript本身就不适合干这事。若哪天程序员一次性给浏览器插入上千条列表数据而其慢无比的时候，不用怀疑：问题出在了这个程序员身上，他不会爱惜用户的浏览器。）
若说到引擎效率排名问题，我倒不觉得这是不能是衡量模板引擎的首要标准，模板语法也是重要的一环，这时候 YayaTemplate 的模板语法就显得晦涩多了，它为了节省几个正则表达式而在模板语法上耍了小聪明。
