/**
* 微型模板引擎 tmpl 0.2
*
* 0.2 更新:
* 1. 修复转义字符与id判断的BUG
* 2. 放弃低效的 with 语句从而最高提升3.5倍的执行效率
* 3. 使用随机内部变量防止与模板变量产生冲突
*
* @author John Resig, Tang Bin
* @see
* @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));
模板引擎依赖 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 引擎，调试工具无法定位到出错的行。在 升级版本 中你可以用调试工具输出编译好的模板缓存。例如调试这个模板：
复制代码 代码如下: