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