快捷導(dǎo)航

讀jQuery之六緩存數(shù)據(jù)功能介紹

更新時(shí)間：2011年06月21日 00:06:53 作者：

讀jQuery之六緩存數(shù)據(jù)功能介紹，學(xué)習(xí)jquery的朋友可以參考下。

很多同學(xué)在項(xiàng)目中都喜歡將數(shù)據(jù)存儲(chǔ)在HTMLElement屬性上，如

 
<div data="some data">Test</div> 
<script> 
div.getAttribute('data'); // some data 
</script> 

給頁(yè)面中div添加了自定義屬性“data”及值“some data”。后續(xù)JS代碼中使用getAttribute獲取。
jQuery從1.2.3開始提供了data/removeData方法用來(lái)存儲(chǔ)/刪除數(shù)據(jù)。1.6.1代碼片段

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

 
jQuery.extend({ 
cache: {}, 
// Please use with caution 
uuid: 0, 
... 
}); 

即給jQuery添加了靜態(tài)字段/方法，有jQuery.cache/jQuery.uuid/jQuery.expando等。下面分別介紹
jQuery.cache 空對(duì)象，用來(lái)緩存。它的結(jié)構(gòu)較復(fù)雜。
jQuery.uuid 自增唯一的數(shù)字。
jQuery.expando 字符串，使用Math.random生成，去掉了非數(shù)字字符。它作為HTMLElement或JS對(duì)象的屬性名。

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

expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),

jQuery.noData JS對(duì)象，對(duì)于指定的HTMLElement禁用data方法。如embed、applet。
jQuery.hasData 用來(lái)判斷HTMLElement或JS對(duì)象是否具有數(shù)據(jù)。返回true或false。即如果調(diào)用了jQuery.data方法添加了屬性，則返回true。

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

 
<div>aa</div> 
<script> 
var div = document.getElementsByTagName('div')[0]; 
$.hasData(div); // false 
$.data(div, 'name','jack'); 
$.hasData(div); // true 
</script> 

jQuery.acceptData 用來(lái)判斷該元素是否能接受數(shù)據(jù)，返回true或false。在jQuery.data中使用。
jQuery.data 這是提供給客戶端程序員使用的方法，它同時(shí)是setter/getter。
1，傳一個(gè)參數(shù)，返回附加在指定元素的所有數(shù)據(jù)，即thisCachejQuery.data(el); // thisCache
2，傳二個(gè)參數(shù)，返回指定的屬性值jQuery.data(el, 'name');
3，傳三個(gè)參數(shù)，設(shè)置屬性及屬性值jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu', {});
4，傳四個(gè)參數(shù)，第四個(gè)參數(shù)pvt僅提供給jQuery庫(kù)自身使用。即jQuery._data方法中傳true。因?yàn)閖Query的事件模塊嚴(yán)重依賴于jQuery.data，為避免人為的不小心重寫在這個(gè)版本中加入的。
jQuery.removeData 刪除數(shù)據(jù)。
上面是jQuery數(shù)據(jù)緩存模塊的整體概述，下面詳細(xì)說(shuō)下jQuery.data方法。jQuery.data為兩種對(duì)象提供緩存:JS對(duì)象和HTMLElement

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

 
// 為JS對(duì)象提供緩存 
var myObj = {}; 
$.data(myObj, 'name', 'jack'); 
$.data(myObj, 'name'); // jack 
// 為HTMLElement提供緩存 
<div id="xx"></div> 
<script> 
var el = document.getElementById('xx'); 
$.data(el, 'name', 'jack'); 
$.data(el, 'name'); // jack 
</script> 

內(nèi)部實(shí)現(xiàn)上也是有區(qū)別的，
1，為JS對(duì)象提供緩存時(shí)，直接將數(shù)據(jù)保存在JS對(duì)象上。cache為JS對(duì)象。此時(shí)會(huì)偷偷的給JS對(duì)象添加個(gè)屬性（類似于jQuery16101803968874529044），屬性值也是個(gè)JS對(duì)象。舉例說(shuō)明

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

 
var myObj = {}; 
$.data(myObj, 'name', 'jack'); 
console.log(myObj); 

myObj的結(jié)構(gòu)如下

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

 
myObj = { 
jQuery16101803968874529044 : { 
name : 'jack' 
} 
} 

“jQuery16101803968874529044”這個(gè)字符串在data內(nèi)部命名為id（注意并非HTMLElement元素的id），它實(shí)際就是jQuery.expando。上面已經(jīng)提到它是在jQuery.js引入到頁(yè)面后隨機(jī)生成的。
2，為HTMLElement提供緩存時(shí)，卻不會(huì)直接保存在HTMLElement上。而是保存在jQuery.cache上。cache為jQuery.cache。此時(shí)先給HTMLElement添加屬性（類似于jQuery16101803968874529044），屬性值為數(shù)字（1,2,3遞增）。即只將一些數(shù)字保存在了HTMLElement上，不會(huì)直接將數(shù)據(jù)置入。這是因?yàn)镮E老版本中可能會(huì)存在內(nèi)存泄露危險(xiǎn)。而HTMLElement如何與jQuery.cache建立聯(lián)系呢？還是id。剛剛提到屬性值數(shù)字就是id。舉例說(shuō)明

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

 
<div id="xx"></div> 
<script> 
var el = document.getElementById('xx'); 
$.data(el, 'name', 'jack'); 
console.log(el[jQuery.expando]); // 1 
console.log(jQuery.cache); // {1 : {name:'jack'}} 
</script> 

el 上添加了屬性jQuery.expando，值為id，這個(gè)id是從1開始遞增的。而id又作為jQuery.cache的屬性（key）。這樣就HTMLElement就與jQuery.cache建立了聯(lián)系。如圖

不知注意到?jīng)]有，jQuery.data還有第四個(gè)參數(shù)pvt，這個(gè)參數(shù)只在jQuery._data中使用。

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

 
// For internal use only. 
_data: function( elem, name, data ) { 
return jQuery.data( elem, name, data, true ); 
}, 

jQuery._data從命名上就指定它是私有的，使用jQuery的客戶端程序員不應(yīng)該去調(diào)用該方法。jQuery的API文檔上也不會(huì)公開它。
jQuery的數(shù)據(jù)緩存模塊從1.2.3到1.6.1幾乎每個(gè)版本都在變。jQuery._data的提出就是為了避免客戶端程序員覆蓋/重寫了默寫模塊。如jQuery事件模塊中事件handler等就使用jQuery.data存儲(chǔ)，如果重寫了該模塊。那么事件模塊將癱瘓。因此特意添加了pvt參數(shù)及jQuery._data方法。
但如果你刻意要破壞，那么還是可以做的。如下

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

 
<div id="xx">Test</div> 
<script> 
$('#xx').click(function(){ 
alert('click'); 
}); 
// 語(yǔ)句1 
$.data($('#xx')[0], 'events', '', true); 
// 語(yǔ)句2 
//$._data($('#xx')[0], 'events', ''); 
</script> 

點(diǎn)擊div[id=xx]將不會(huì)觸發(fā)點(diǎn)擊事件。
整個(gè)jQuery.data設(shè)置(set)數(shù)據(jù)緩存的過(guò)程就是如此，理解的這個(gè)。取數(shù)據(jù)(get)的過(guò)程就好理解了。不重復(fù)。
最后，我會(huì)給zChian.js添加zChain.data/removeData方法，因?yàn)槭恰懊阅惆妗保瑑H給HTMLElement添加數(shù)據(jù)緩存。請(qǐng)注意。

您可能感興趣的文章: