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

對於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資料快取功能的解析及簡單實現

jQuery資料快取 data name

相關推薦