jQuery從1.2.3開始提供了data/removeData方法用來存儲/刪除數(shù)據(jù)。1.6.1代碼片段

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

即給jQuery添加了靜態(tài)字段/方法，有jQuery.cache/jQuery.uuid/jQuery.expando等。下面分別介紹


jQuery.cache 空對象，用來緩存。它的結構較復雜。


jQuery.uuid 自增唯一的數(shù)字。


jQuery.expando 字符串，使用Math.random生成，去掉了非數(shù)字字符。它作為HTMLElement或JS對象的屬性名。
    
expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),


jQuery.noData JS對象，對于指定的HTMLElement禁用data方法。如embed、applet。


jQuery.hasData 用來判斷HTMLElement或JS對象是否具有數(shù)據(jù)。返回true或false。即如果調用了jQuery.data方法添加了屬性，則返回true。

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

jQuery.acceptData 用來判斷該元素是否能接受數(shù)據(jù)，返回true或false。在jQuery.data中使用。

jQuery.data 這是提供給客戶端程序員使用的方法，它同時是setter/getter。

1，傳一個參數(shù)，返回附加在指定元素的所有數(shù)據(jù)，即thisCachejQuery.data(el); // thisCache

2，傳二個參數(shù)，返回指定的屬性值jQuery.data(el, 'name');

3，傳三個參數(shù)，設置屬性及屬性值jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu', {});
4，傳四個參數(shù)，第四個參數(shù)pvt僅提供給jQuery庫自身使用。即jQuery._data方法中傳true。因為jQuery的事件模塊嚴重依賴于jQuery.data，為避免人為的不小心重寫在這個版本中加入的。

jQuery.removeData 刪除數(shù)據(jù)。

上面是jQuery數(shù)據(jù)緩存模塊的整體概述，下面詳細說下jQuery.data方法。jQuery.data為兩種對象提供緩存:JS對象和HTMLElement
    
// 為JS對象提供緩存
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>

內部實現(xiàn)上也是有區(qū)別的，


1，為JS對象提供緩存時，直接將數(shù)據(jù)保存在JS對象上。cache為JS對象。此時會偷偷的給JS對象添加個屬性（類似于jQuery16101803968874529044），屬性值也是個JS對象。舉例說明

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

myObj的結構如下
myObj = {
    jQuery16101803968874553435 : {
        name : 'jack'
    }
}


jQuery16101803968874553435 這個字符串在data內部命名為id（注意并非HTMLElement元素的id），它實際就是jQuery.expando。上面已經(jīng)提到它是在jQuery.js引入到頁面后隨機生成的。

2，為HTMLElement提供緩存時，卻不會直接保存在HTMLElement上。而是保存在jQuery.cache上。cache為jQuery.cache。此時先給HTMLElement添加屬性（類似于jQuery16101803968874529044），屬性值為數(shù)字（1,2,3遞增）。即只將一些數(shù)字保存在了HTMLElement上，不會直接將數(shù)據(jù)置入。這是因為IE老版本中可能會存在內存泄露危險。而HTMLElement如何與jQuery.cache建立聯(lián)系呢？ 還是id。剛剛提到屬性值數(shù)字就是id。舉例說明
<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，這個id是從1開始遞增的。而id又作為jQuery.cache的屬性（key）。這樣就HTMLElement就與jQuery.cache建立了聯(lián)系。如圖

創(chuàng)新互聯(lián)是網(wǎng)站建設技術企業(yè)，為成都企業(yè)提供專業(yè)的成都網(wǎng)站設計、做網(wǎng)站、成都外貿網(wǎng)站建設公司，網(wǎng)站設計，網(wǎng)站制作，網(wǎng)站改版等技術服務。擁有十多年豐富建站經(jīng)驗和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十多年品質，值得信賴！

不知注意到?jīng)]有，jQuery.data還有第四個參數(shù)pvt，這個參數(shù)只在jQuery._data中使用。
// For internal use only.
_data: function( elem, name, data ) {
    return jQuery.data( elem, name, data, true );
},

jQuery._data從命名上就指定它是私有的，使用jQuery的客戶端程序員不應該去調用該方法。jQuery的API文檔上也不會公開它。


jQuery的數(shù)據(jù)緩存模塊從1.2.3到1.6.1幾乎每個版本都在變。jQuery._data的提出就是為了避免客戶端程序員覆蓋/重寫了默寫模塊。如jQuery事件模塊中事件handler等就使用jQuery.data存儲，如果重寫了該模塊。那么事件模塊將癱瘓。因此特意添加了pvt參數(shù)及jQuery._data方法。


但如果你刻意要破壞，那么還是可以做的。如下

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

點擊div[id=xx]將不會觸發(fā)點擊事件。

標題名稱：jQuery緩存操作-cache數(shù)據(jù)
URL鏈接：http://chinadenli.net/article16/gesodg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、網(wǎng)站設計、移動網(wǎng)站建設、面包屑導航、外貿網(wǎng)站建設、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)