这篇文章主要介绍了一个JavaScript微型模版,需要的朋友可以参考下
我一直在使用一个小工具，并发现它在构建Javascript应用过程中非常实用。它是一个非常简单的模板函数，速度快，支持缓存，并容易使用。我想分享一下使用它的过程中的一些技巧。
以下是模板函数的代码(你可以从正要出版的Secrets of the JavaScript Ninja一书中得到更精炼的版本)：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 // 简单JavaScript模板引擎 // John Resig - http://ejohn.org/ - MIT Licensed (function(){ var cache = {}; this.tmpl = function tmpl(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(){}把数据作为本地变量引入 "with(obj){p.push('" + // 把模板转换未纯javascript代码 str .replace(/[rtn]/g, " ") .split("<%").join("t") .replace(/((^|%>)[^t]*)'/g, "$1r") .replace(/t=(.*?)%>/g, "',$1,'") .split("t").join("');") .split("%>").join("p.push('") .split("r").join("'") + "');}return p.join('');"); // 给用户提供一些基本的柯里化功能 return data ? fn( data ) : fn; }; })();你的模板代码看起来将是类似于(这并不是规定的格式，但是我比较喜欢这样)：
?
1 2 3 4 5 6 7 8 9 10 <script type="text/html" id="item_tmpl"> <div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>"> <div class="grid_1 alpha right"> <img class="righted" src="<%=profile_image_url%>"/> </div> <div class="grid_6 omega contents"> <p><b><a href="/<%=from_user%>"><%=from_user%></a>:新闻热点
疑难解答
