http://www.planeart.cn/?p=1594

http://ejohn.org/blog/javascript-micro-templating

http://bbs.phpchina.com/thread-224712-1-1.html

[ Noevil: 下面直接貼出改進好的MicroTemp，但是還是建議看一下原文，里面有詳細的改進細節，和改進前后的性能對比。]

/*** 微型模板引擎 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));

?

轉載于:https://www.cnblogs.com/noevil/archive/2011/11/19/2255654.html

總結

以上是生活随笔為你收集整理的javascript模版引擎-tmpl的bug修复与性能优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。