jQuery 數(shù)據(jù)緩存data(name, value)詳解及實(shí)現(xiàn)
2024-05-06 14:11:59
供稿：網(wǎng)友
作為一名程序員，一提到“緩存”你很容易聯(lián)想到“客戶端（瀏覽器緩存）”和“服務(wù)器緩存”。客戶端緩存是存在瀏覽者電腦硬盤上的，即瀏覽器臨時(shí)文件夾，而服務(wù)器緩存是存在服務(wù)器內(nèi)存中，當(dāng)然在一些高級(jí)應(yī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語句）：
代碼如下:
<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與對象key直接對應(yīng)）：
代碼如下:
<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>
二、簡單實(shí)現(xiàn)jQuery設(shè)置數(shù)據(jù)緩存方法
jQuery數(shù)據(jù)緩存的實(shí)現(xiàn)其實(shí)是很簡單的，下面我來實(shí)現(xiàn)jQuery設(shè)置數(shù)據(jù)緩存方法，我讓代碼盡量的簡單，這有助于你更容易了解data的實(shí)現(xiàn)原理。函數(shù)與測試代碼如下：
代碼如下:
<div id="div1">div1</div><br/>
<div id="div2">div2</div>
<script type="text/javascript">
//cache對象結(jié)構(gòu)像這樣{"uuid1":{"name1":value1,"name2":value2},"uuid2":{"name1":value1,"name2":value2}}，每個(gè)uuid對應(yīng)一個(gè)elem緩存數(shù)據(jù)，每個(gè)緩存對象是可以由多個(gè)name/value對組成的，而value是可以是任何數(shù)據(jù)類型的，比如可以像這樣在elem下存一個(gè)JSON片段:$(elem).data('JSON':{"name":"Tom","age":23})
