介绍JavaScript的一个微型模版

这篇文章主要介绍了一个非常实用且功能强大的JavaScript微型模板引擎。对于正在寻找此类工具的朋友们，你们可能会对这个小工具特别感兴趣。

这个模板函数极其简单，但功能丰富，包括快速响应和缓存支持，使用起来也极其方便。接下来，我将分享一些在使用这个模板函数过程中的实用技巧。

以下是模板函数的代码示例（你可以从即将出版的《JavaScript忍者秘籍》一书中获取更精炼的版本）：

```javascript

// 简单JavaScript模板引擎

// John Resig - - MIT Licensed

(function(){

var cache = {}; // 用于存储模板的缓存

this.tmpl = function tmpl(str, data){

// 判断我们是否已有这样的模板，或者我们需要加载模板并保存到缓存中。

var fn = !/\W/.test(str) ? // 正则表达式检查模板字符串是否合适

cache[str] = cache[str] || tmpl(document.getElementById(str)nerHTML) :

// 创建可重用的函数，用于提供模板生成功能（并存储到缓存中）。

new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" + // 创建函数并引入数据作为本地变量

// 使用with(){}语句引入数据作为本地变量。将模板字符串转换为纯JavaScript代码。

"with(obj){p.push('" + str.replace(/[\r\t]/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;

};})(); // 自执行函数定义结束。 接下来是模板的使用方式： 假设你的HTML页面中有以下脚本元素： 这是一个典型的模板代码示例： <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>: </b><%=text%></p></div></div></script> 这个模板引擎会这个脚本元素的内容，并根据提供的数据生成相应的HTML代码。 你也可以内嵌脚本，例如： <script type="text/html" id="user_tmpl"> <% for ( var i = 0; i < users.length; i++ ) { %> <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li><% } %></script> 这个模板会根据用户的数组生成一个列表元素。 提示：如果将含有脚本的元素的content-type设置为未知类型（例如在这个例子中为 text/html），浏览器会忽略这个元素，搜索引擎和屏幕阅读器也会忽略它。因此你可以放心地使用这种内嵌脚本的方式，不必担心对页面的其他部分产生影响。 这个微型模板引擎功能强大且易于使用，希望你在阅读本文后能从中受益。在使用过程中如果遇到任何问题，欢迎随时向我提问。这是一个极为出色的伪装代码模板，巧妙地融入你的网页之中，几乎难以察觉。我钟爱那些快速而又灵活的技术，只需一两个小模板，即可实现轻便且迅速的应用。

让我们深入了解如何在脚本中使用它。你可以像下面这样获取元素并注入模板内容：

```javascript

var resultsElement = document.getElementById("results");

var dataObject = // 你的数据对象;

resultsElementnerHTML = tmpl("item_tmpl", dataObject);

```

不仅如此，你还可以预编译模板，以便稍后使用。当你只用一个ID（或模板代码）作为参数来调用模板函数时，它会返回一个预编译的函数，你可以随时调用它来处理数据。

```javascript

var showUserTemplate = tmpl("item_tmpl"); // 预编译模板函数

var html = "";

for (var i = 0; i < users.length; i++) {

html += showUserTemplate(users[i]); // 使用预编译的模板处理用户数据并添加到HTML字符串中

}

```

对于那些对代码和转换可能不太感冒的人而言，我想说，有一项我特别喜欢的技术是在字符串中进行字符的静态搜索与替换。例如使用split和join方法，它在现代浏览器中的执行速度非常快。看起来可能不太直观，但实际上它在现代浏览器中工作得很好。未来版本的FireFox将大幅提高replace(/match/g,"replace")的性能，这意味着我们将不再需要冗长的表达式。

放松心态，尽情享受这段代码带来的乐趣吧。我对代码中的每一次变化都充满好奇。尽管它看起来简单，但却蕴含着无限可能。就像Cambrian时代的生物一样，不断演化，创造出令人惊叹的新世界。最后一行代码“cambrian.render('body')”，仿佛唤醒了沉睡的生命力，让网页焕发出新的生机。