jQuery資料快取功能的解析及簡單實現

2022-05-13 03:26:37 字數 3435 閱讀 8709

前言

對於jquery的資料快取,相信大家都不會陌生,jquery快取系統不僅運用於dom元素動畫、事件等都有用到這個快取系統。所以在平時實際應用中, 我們經常需要給元素快取一些資料,並且這些資料往往和dom元素緊密相關。由於dom元素(節點)也是物件, 所以我們可以直接擴充套件dom元素的屬性,但是如果給dom元素新增自定義的屬性和過多的資料可能會引起記憶體洩漏,所以應該要盡量避免這樣做。 因此更好的解決方法是使用一種低耦合的方式讓dom和快取資料能夠聯絡起來。

另外:對於jquery.data和jquery.removedata靜態方法、以及基於這兩個方法的原型擴充套件方法的介紹和用法就不多說了,可以檢視官方api文件。

實現思路

jquery提供了一套靈活和強大的快取方法:

(1)先在jquery內部建立乙個cache物件{}, 來儲存快取資料。 然後往需要進行快取的dom節點上擴充套件乙個值為expando的屬性, 這裡是」jquery」 + (new date).gettime()。注:expando的值等於」jquery」+當前時間, 元素本身具有這種屬性的可能性很少,所以可以忽略衝突。

(2)接著把每個節點的dom[expando]的值都設為乙個自增的變數id,保持全域性唯一性。 這個id的值就作為cache的key用來關聯dom節點和資料。也就是說cache[id]就取到了這個節點上的所有快取,即id就好比是開啟乙個房間(dom節點)的鑰匙。 而每個元素的所有快取都被放到了乙個map對映裡面,這樣可以同時快取多個資料。

(3)所以cache物件結構應該像下面這樣:

var cache =,

"uuid2":

//......

};

每個uuid對應乙個elem快取資料,每個快取物件是可以由多個name/value(名值對)對組成的,而value是可以是任何資料型別的。

簡單模擬實現

根據以上思路,就可以簡單實現下jquery.data和jquery.removedate的功能了:

(function

(window, undefined) , //

用來儲存資料的物件

win = window, //

把window快取給乙個變數

uuid = 0,

//宣告隨機數(8位)

//注意+new date()生成的隨機數是number型別,與乙個空字串連線後(或使用tostring方法轉型後)變成字串,才可使用slice方法。

expando = "cachedata" + (+new date() + "").slice(-8);

//(+new date()).tostring().slice(-8)等價於expando

//寫入快取

var data = function

(elem, name, value)

//返回快取資料

return

cachedata[elem];

//如果elem為dom節點

} else

if (typeof elem === "object") ;

} else

//把乙個隨機數作為當前快取物件的乙個屬性,利用該隨機數就能找到該快取物件

if (!thiscache[expando]) ;

}if (value !==undefined)

//返回dom元素儲存的資料

return

thiscache[expando][name];}};

//刪除快取

var removedata = function

(elem, name) else

if (typeof elem === "object")

//檢測物件是否為空

var isemptyobject = function

(obj)

return

true

; }

removeattr = function

()

catch

(e)

},id =elem[expando];

if(name)

} else}};

//把data和removedata掛在window全域性物件下,這樣在外部也能訪問到這兩個函式

win.expando =expando;

win.data =data;

win.removedata =removedata;

})(window, undefined);

例子:html結構:

<

div

id="demo"

style

="height: 100px; width: 100px; background: #ccc; color: #fff; margin: 20px; text-align: center; line-height: 100px;"

>

demo

div>

js**:

window.onload = function() ;
firefox下例子結果截圖:

對於上述例子實現jquery的簡單快取系統:先給該dom元素新增乙個隨機生成的屬性expando,這個屬性用來存放訪問快取資料的id值,就好比dom元素都有一把開啟快取保險箱的鑰匙,只要有了鑰匙就可以隨時開啟快取保險箱。 將本來存放到dom元素中的資料都轉到了快取中,而dom元素本身只要儲存乙個簡單的屬性就可以了,這樣就可以將由dom元素引起的記憶體洩漏(具體會發生什麼狀況不知道,大家都這麼說~)的風險規避到最小。結語糊里糊塗地又到了最後,有一些術語或解釋上可能存在偏差,望各位童鞋指正和給出一些建議;另外,從理論上講, data和removedata方法可以用於任何物件的快取, 不過如果運用於本地物件或window物件, 會存在記憶體洩露、迴圈引用等問題(^_^從網上看到的), 所以一般還是用於dom節點比較適合,還可以結合事件、動畫對dom節點進行快取資料的操作。ps:cache真的很重要!需要慢慢體會~

jQuery資料快取功能的解析及簡單實現

對於jquery的資料快取,相信大家都不會陌生,jquery快取系統不僅運用於dom元素,動畫 事件等都有用到這個快取系統。所以在平時實際應用中,我們經常需要給元素快取一些資料,並且這些資料往往和dom元素緊密相關。由於dom元素 節點 也是物件,所以我們可以直接擴充套件dom元素的屬性,但是如果給...

jQuery資料快取功能的解析及簡單實現

對於jquery的資料快取,相信大家都不會陌生,jquery快取系統不僅運用於dom元素,動畫 事件等都有用到這個快取系統。所以在平時實際應用中,我們經常需要給元素快取一些資料,並且這些資料往往和dom元素緊密相關。由於dom元素 節點 也是物件,所以我們可以直接擴充套件dom元素的屬性,但是如果給...

jQuery資料快取 data name

data name 返回元素上儲存的相應名字的資料,可以用data name,value 來設定。如果jquery集合指向多個元素,那將只返回第乙個元素對應的資料。這個函式可以用於在乙個元素上訪問資料而避免了迴圈引用的風險。jquery.data是1.2.3的新版功能。你可以在很多地方使用這個函式,...