快捷導(dǎo)航

介紹JavaScript的一個(gè)微型模版

更新時(shí)間：2015年06月24日 12:14:25 投稿：goldensun

這篇文章主要介紹了一個(gè)JavaScript微型模版,需要的朋友可以參考下

我一直在使用一個(gè)小工具，并發(fā)現(xiàn)它在構(gòu)建Javascript應(yīng)用過(guò)程中非常實(shí)用。它是一個(gè)非常簡(jiǎn)單的模板函數(shù)，速度快，支持緩存，并容易使用。我想分享一下使用它的過(guò)程中的一些技巧。

以下是模板函數(shù)的代碼（你可以從正要出版的Secrets of the JavaScript Ninja一書中得到更精煉的版本）：

// 簡(jiǎn)單JavaScript模板引擎
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
 var cache = {};
 
 this.tmpl = function tmpl(str, data){
  // 判斷我們是否已經(jīng)有這么一個(gè)模板，或者我們需要載入模板
  // 并保證把結(jié)果保存到緩存中。
  var fn = !/\W/.test(str) ?
   cache[str] = cache[str] ||
    tmpl(document.getElementById(str).innerHTML) :
   
   // 生成一個(gè)可重用的函數(shù)，用于提供模板生成功能
   // (它會(huì)被記錄到緩存內(nèi)).
   new Function("obj",
    "var p=[],print=function(){p.push.apply(p,arguments);};" +
    
    // 通過(guò)with(){}把數(shù)據(jù)作為本地變量引入
    "with(obj){p.push('" +
    
    // 把模板轉(zhuǎn)換未純javascript代碼
    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;
 };
})();

你的模板代碼看起來(lái)將是類似于（這并不是規(guī)定的格式，但是我比較喜歡這樣）：

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

你也可以內(nèi)嵌腳本：

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

提示：把腳本內(nèi)嵌到你的頁(yè)面中，并且content-type是未知的（例如在這個(gè)例子中，瀏覽器不知道該如何執(zhí)行 text/html 腳本），那么瀏覽器會(huì)把它忽略掉 - 同時(shí)搜索引擎和屏幕讀取也會(huì)忽略掉它。這是一個(gè)非常好的偽裝代碼，可以把你的模板嵌入到你的頁(yè)面中。我喜歡使用快速卻又隨性的技術(shù)，我只需一到兩個(gè)小模板，就可以得到又輕型和快速應(yīng)用。

你可以在腳本中，像這樣去使用：

var results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", dataObject);

你可以預(yù)編譯結(jié)果，在稍后使用。如果你只使用一個(gè)ID作為參數(shù)（或者一個(gè)模板代碼）來(lái)調(diào)用模板函數(shù)，那么它就會(huì)返回一個(gè)預(yù)編譯的函數(shù)，你就可以在稍后調(diào)用：

var show_user = tmpl("item_tmpl"), html = "";
for ( var i = 0; i < users.length; i++ ) {
 html += show_user( users[i] );
}

這是目前最沒辦法的辦法，解析和轉(zhuǎn)換代碼——對(duì)這你很可能無(wú)愛。不過(guò)他只有我中意的一項(xiàng)技術(shù)：在字符串中用字符靜態(tài)搜索和靜態(tài)替換時(shí)，比如split("match").join("replace")，執(zhí)行速度更好——看起來(lái)不直觀但可以有效工作在現(xiàn)代瀏覽器里（下一版FireFox會(huì)大幅提高replace(/match/g,"replace")的性能——所以現(xiàn)在這樣的長(zhǎng)表達(dá)式以后不需要的）

放輕松享受它——我很好奇代碼中的突變。即使它很簡(jiǎn)單，仍然有很多事情可以用它做。

您可能感興趣的文章: