jQuery數(shù)據(jù)緩存data(name,value)詳解及實現(xiàn)
來源：程序員人生 發(fā)布時間：2014-01-07 09:20:46 閱讀次數(shù)：3468次
作為一名程序員，一提到“緩存”你很容易聯(lián)想到“客戶端（瀏覽器緩存）”和“服務(wù)器緩存”。客戶端緩存是存在瀏覽者電腦硬盤上的，即瀏覽器臨時文件夾，而服務(wù)器緩存是存在服務(wù)器內(nèi)存中，當然在一些高級應(yīng)用場合也有專門的緩存服務(wù)器，甚至有利用數(shù)據(jù)庫進行緩存的實現(xiàn)。當然這些都不在本文的討論范圍，本文要討論的是最流行的JavaScript框架jQuery的數(shù)據(jù)緩存實現(xiàn)原理，這是jQuery1.2.3版開始加入的新功能。
一、 jQuery數(shù)據(jù)緩存的作用
jQuery數(shù)據(jù)緩存的作用在中文API中是這樣描述的：“用于在一個元素上存取數(shù)據(jù)而避免了循環(huán)引用的風險”。如何理解這句話呢，看看我下面的舉例，不知道合不合適，如果你有更好的例子可以告訴我。
（1） 存在循環(huá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 + '' + 'age:' + info.age + '' + 'phone:' + info.phone);
}
</script>
（2） 優(yōu)化循環(huán)引用風險的例子（本例子其實與jQuery緩存實現(xiàn)原理差不多了，本例子重點在于改寫了userInfo這個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 + '' + 'age:' + info.age + '' + 'phone:' + info.phone);
}
</script>
