快捷導(dǎo)航

jQuery 數(shù)據(jù)緩存data(name, value)詳解及實(shí)現(xiàn)

更新時(shí)間：2010年01月04日 22:07:12 作者：

本文要討論的是最流行的JavaScript框架jQuery的數(shù)據(jù)緩存實(shí)現(xiàn)原理，這是jQuery1.2.3版開始加入的新功能。

作為一名程序員，一提到“緩存”你很容易聯(lián)想到“客戶端（瀏覽器緩存）”和“服務(wù)器緩存”?？蛻舳司彺媸谴嬖跒g覽者電腦硬盤上的，即瀏覽器臨時(shí)文件夾，而服務(wù)器緩存是存在服務(wù)器內(nèi)存中，當(dāng)然在一些高級(jí)應(yīng)用場(chǎng)合也有專門的緩存服務(wù)器，甚至有利用數(shù)據(jù)庫進(jìn)行緩存的實(shí)現(xiàn)。當(dāng)然這些都不在本文的討論范圍，本文要討論的是最流行的JavaScript框架jQuery的數(shù)據(jù)緩存實(shí)現(xiàn)原理，這是jQuery1.2.3版開始加入的新功能。
一、 jQuery數(shù)據(jù)緩存的作用
jQuery數(shù)據(jù)緩存的作用在中文API中是這樣描述的：“用于在一個(gè)元素上存取數(shù)據(jù)而避免了循環(huán)引用的風(fēng)險(xiǎn)”。如何理解這句話呢，看看我下面的舉例，不知道合不合適，如果你有更好的例子可以告訴我。
（1）存在循環(huán)引用風(fēng)險(xiǎn)的例子（注意getDataByName(name)方法中的for in語句）：

復(fù)制代碼代碼如下:

 
<a href="javascript:void(0);" onclick="showInfoByName(this.innerHTML);">Tom</a><br/> 
<a href="javascript:void(0);" onclick="showInfoByName(this.innerHTML);">Mike</a> 
<script type="text/javascript"> 
var userInfo = [ 
{ 
"name": "Tom", 
"age": 21, 
"phone": "020-12345678" 
}, 
{ 
"name": "Mike", 
"age": 23, 
"phone": "020-87654321" 
}]; 
function getDataByName(name) 
{ 
for (var i in userInfo) 
{ 
if (userInfo[i].name == name) 
{ 
return userInfo[i]; 
break; 
} 
} 
} 
function showInfoByName(name) 
{ 
var info = getDataByName(name); 
alert('name:' + info.name + '\n' + 'age:' + info.age + '\n' + 'phone:' + info.phone); 
} 
</script> 

（2）優(yōu)化循環(huán)引用風(fēng)險(xiǎn)的例子（本例子其實(shí)與jQuery緩存實(shí)現(xiàn)原理差不多了，本例子重點(diǎn)在于改寫了userInfo這個(gè)JSON結(jié)構(gòu)，使name與對(duì)象key直接對(duì)應(yīng)）：

復(fù)制代碼代碼如下:

 
<a href="javascript:void(0);" onclick="showInfoByName(this.innerHTML);">Tom</a><br/> 
<a href="javascript:void(0);" onclick="showInfoByName(this.innerHTML);">Mike</a> 
<script type="text/javascript"> 
var userInfo = 
{ 
"Tom": 
{ 
"name": "Tom", 
"age": 21, 
"phone": "020-12345678" 
}, 
"Mike": 
{ 
"name": "Mike", 
"age": 23, 
"phone": "020-87654321" 
} 
}; 
function showInfoByName(name) 
{ 
var info = userInfo[name]; 
alert('name:' + info.name + '\n' + 'age:' + info.age + '\n' + 'phone:' + info.phone); 
} 
</script> 

二、簡(jiǎn)單實(shí)現(xiàn)jQuery設(shè)置數(shù)據(jù)緩存方法
jQuery數(shù)據(jù)緩存的實(shí)現(xiàn)其實(shí)是很簡(jiǎn)單的，下面我來實(shí)現(xiàn)jQuery設(shè)置數(shù)據(jù)緩存方法，我讓代碼盡量的簡(jiǎn)單，這有助于你更容易了解data的實(shí)現(xiàn)原理。函數(shù)與測(cè)試代碼如下：

復(fù)制代碼代碼如下:

 
<div id="div1">div1</div><br/> 
<div id="div2">div2</div> 
<script type="text/javascript"> 
//cache對(duì)象結(jié)構(gòu)像這樣{"uuid1":{"name1":value1,"name2":value2},"uuid2":{"name1":value1,"name2":value2}}，每個(gè)uuid對(duì)應(yīng)一個(gè)elem緩存數(shù)據(jù)，每個(gè)緩存對(duì)象是可以由多個(gè)name/value對(duì)組成的，而value是可以是任何數(shù)據(jù)類型的，比如可以像這樣在elem下存一個(gè)JSON片段:$(elem).data('JSON':{"name":"Tom","age":23}) 
var cache = {}; 
//expando作為elem一個(gè)新加屬性，為了防止與用戶自己定義的產(chǎn)生沖突，這里采用可變后綴 
var expando = 'jQuery' + new Date().getTime(); 
var uuid = 0; 
function data(elem, name, data) 
{ 
//至少保證要有elem和name兩個(gè)參數(shù)才能進(jìn)行取緩存或設(shè)置緩存操作 
if (elem && name) 
{ 
//嘗試取elem標(biāo)簽expando屬性 
var id = elem[expando]; 
if (data) 
{ 
//設(shè)置緩存數(shù)據(jù) 
if (!id) 
id = elem[expando] = ++uuid; 
//如果cache中id鍵對(duì)象不存在（即這個(gè)elem沒有設(shè)置過數(shù)據(jù)緩存），先創(chuàng)建一個(gè)空對(duì)象 
if (!cache[id]) 
cache[id] = {}; 
cache[id][name] = data; 
} 
else 
{ 
//獲取緩存數(shù)據(jù) 
if (!id) 
return 'Not set cache!'; 
else 
return cache[id][name]; 
} 
} 
} 
var div = document.getElementById('div1'); 
data(div, "tagName", "div"); 
data(div, "ID", "div1"); 
alert(data(div, "tagName")); //div 
alert(data(div, "ID")); //div1 
var div2 = document.getElementById('div2'); 
alert(data(div2, "tagName")); //Not set cache! 
</script> 

三、使用jQuery數(shù)據(jù)緩存注意事項(xiàng)
（1）因?yàn)閖Query緩存對(duì)象是全局的，在AJAX應(yīng)用中，由于頁面刷新很少，這個(gè)對(duì)象將一直存在，隨著你對(duì)data的不斷操作，很有可能因?yàn)槭褂貌划?dāng)，使得這個(gè)對(duì)象不斷變大，最終影響程序性能。所以我們要及時(shí)清理這個(gè)對(duì)象，jQuery也提供了相應(yīng)方法：removeData(name)，name就是你當(dāng)初設(shè)置data值時(shí)使用的name參數(shù)。
另外，根據(jù)我對(duì)jQuery代碼的了解，發(fā)現(xiàn)下面幾種情況不需要手動(dòng)清除數(shù)據(jù)緩存：
<1> 對(duì)elem執(zhí)行remove()操作，jQuery會(huì)清除對(duì)象可能存在的緩存。jQuery相關(guān)源代碼參考：

復(fù)制代碼代碼如下:

 
remove:function(selector) 
{ 
if (!selector || jQuery.filter(selector, [this]).length) 
{ 
// Prevent memory leaks 
jQuery("*", this).add([this]).each(function() 
{ 
jQuery.event.remove(this); 
jQuery.removeData(this); 
}); 
if (this.parentNode) 
this.parentNode.removeChild(this); 
} 
} 

<2> 對(duì)elem執(zhí)行empty()操作，如果當(dāng)前elem子元素存在數(shù)據(jù)緩存，jQuery也會(huì)清除子對(duì)象可能存在的數(shù)據(jù)緩存，因?yàn)閖Query的empty()實(shí)現(xiàn)其實(shí)是循環(huán)調(diào)用remove()刪除子元素。jQuery相關(guān)源代碼參考：

復(fù)制代碼代碼如下:

 
empty:function() 
{ 
// Remove element nodes and prevent memory leaks 
jQuery(this).children().remove(); 
// Remove any remaining nodes 
while (this.firstChild) 
this.removeChild(this.firstChild); 
} 

2、jQuery復(fù)制節(jié)點(diǎn)clone()方法不會(huì)復(fù)制data緩存，準(zhǔn)確說jQuery不會(huì)在全局緩存對(duì)象中分配一個(gè)新節(jié)點(diǎn)存放新復(fù)制elem緩存。jQuery在clone()中把可能存在的緩存指向?qū)傩裕╡lem的expando屬性）替換成空。如果直接把這個(gè)屬性復(fù)制，就會(huì)導(dǎo)致原先和新復(fù)制的elem都指向一個(gè)數(shù)據(jù)緩存，中間的互操作都將會(huì)影響到兩個(gè)elem的緩存變量。以下jQuery代碼就是把expando屬性刪除（jQuery1.3.2，較早版本不是這樣處理，顯然新版本的這個(gè)方法性能更好）。
jQuery.clean([html.replace(/ jQuery\d+="(?:\d+|null)"/g, "").replace(/^\s*/, "")])[0];
把數(shù)據(jù)緩存一起復(fù)制有時(shí)候也是很有用的，比如在拖動(dòng)操作中，我們點(diǎn)擊源目標(biāo)elem節(jié)點(diǎn)就會(huì)復(fù)制出一個(gè)半透明的elem副本開始拖動(dòng)，并把data緩存復(fù)制到拖動(dòng)層中，等到拖動(dòng)結(jié)束，我們就可能取到當(dāng)前拖動(dòng)的elem相關(guān)信息?，F(xiàn)在jQuery方法沒有給我們提供這樣的處理，怎么辦法。第一個(gè)辦法是改寫jQuery代碼，這個(gè)方法顯然很傻，很不科學(xué)。正確做法是復(fù)制源目標(biāo)的data，把這些data都重新設(shè)置到復(fù)制出來的elem中，這樣在執(zhí)行data(name, value)方法時(shí)，jQuery會(huì)在全局緩存對(duì)象中為我們開辟新空間。實(shí)現(xiàn)代碼如下：

復(fù)制代碼代碼如下:

 
if (typeof($.data(currentElement)) == 'number') 
{ 
var elemData = $.cache[$.data(currentElement)]; 
for (var k in elemData) 
{ 
dragingDiv.data(k, elemData[k]); 
} 
} 

在上面代碼中，$.data(elem,name,data)包含三個(gè)參數(shù)，如果只有一個(gè)elem參數(shù)，這個(gè)方法返回它的緩存key（即uuid），利用這個(gè)key就可以得到整個(gè)緩存對(duì)象，然后把對(duì)象的數(shù)據(jù)都復(fù)制到新的對(duì)象。

您可能感興趣的文章: