javascript模版引擎-tmpl的bug修复与性能优化分析

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

tmpl(<%=name%>//<%=id%> , {name:糖饼, id: 1987});

str.replace(/\\/g, "\\\\")

print=function(){p.push.apply(p,arguments);}

//author:yaya,jihu
//uloveit.com.cn/template
//how to use? YayaTemplate("xxx").render({});
var YayaTemplate = YayaTemplate || function(str){
//核心分析方法
var _analyze=function(text){
return text.replace(/{\$(\s|\S)*?\$}/g,function(s){
return s.replace(/("|\\)/g,"\\$1")
.replace("{$",_s.push(")
.replace("$}",");)
.replace(/{\%([\s\S]*?)\%}/g, ",$1,")
}).replace(/\r|\n/g,"");
};
//中间代码
var _temp = _analyze(document.getElementById(str)?document.getElementById(str).innerHTML:str);
//返回生成器render方法
return {
render : function(mapping){
var _a = [],_v = [],i;
for (i in mapping){
_a.push(i);
_v.push(mapping[i]);
}
return (new Function(_a,"var _s=[];"+_temp+" return _s;")).apply(null,_v).join("");
}
}
};

/**
* 微型模板引擎 tmpl 0.2
*
* 0.2 更新:
* 1. 修复转义字符与id判断的BUG
* 2. 放弃低效的 with 语句从而最高提升3.5倍的执行效率
* 3. 使用随机内部变量防止与模板变量产生冲突
*
* @author John Resig, Tang Bin
* @see http://ejohn.org/blog/javascript-micro-templating/
* @name tmpl
* @param {String} 模板内容或者装有模板内容的元素ID
* @param {Object} 附加的数据
* @return {String} 解析好的模板
*
* @example
* 方式一：在页面嵌入模板
* <script type="text/tmpl" id="tmpl-demo">
* <ol title="<%=name%>">
* <% for (var i = 0, l = list.length; i < length; i ++) { %>
* <li><%=list[i]%></li>
* <% } %>
* </ol>
* </script>
* tmpl(tmpl-demo, {name: demo data, list: [202, 96, 133, 134]})
*
* 方式二：直接传入模板：
* var demoTmpl =
* <ol title="<%=name%>">
* + <% for (var i = 0, l = list.length; i < length; i ++) { %>
* + <li><%=list[i]%></li>
* + <% } %>
* +</ol>;
* var render = tmpl(demoTmpl);
* render({name: demo data, list: [202, 96, 133, 134]});
*
* 这两种方式区别在于第一个会自动缓存编译好的模板，
* 而第二种缓存交给外部对象控制，如例二中的 render 变量 。
*/
var tmpl = (function (cache, $) {
return function (str, data) {
var fn = !/\s/.test(str)
? cache[str] = cache[str]
|| tmpl(document.getElementById(str).innerHTML)
: function (data) {
var i, variable = [$], value = [[]];
for (i in data) {
variable.push(i);
value.push(data[i]);
};
return (new Function(variable, fn.$))
.apply(data, value).join("");
};
fn.$ = fn.$ || $ + ".push("
+ str.replace(/\\/g, "\\\\")
.replace(/[\r\t\n]/g, " ")
.split("<%").join("\t")
.replace(/((^|%>)[^\t]*)/g, "$1\r")
.replace(/\t=(.*?)%>/g, ",$1,")
.split("\t").join(");")
.split("%>").join($ + ".push(")
.split("\r").join("\\")
+ ");return " + $;
return data ? fn(data) : fn;
}})({}, $ + (+ new Date));

// 生成模板缓存
var render = tmpl(listTmpl);
// 可多次调用模板
elem.innerHTML = render(data1);
elem.innerHTML = render(data2);
...

<% if (this.dataName !== undefined) { %>
<%=dataName %>
<% } %>

<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"