作为一名程序员，一提到“缓存”你很容易联想到“客户端（浏览器缓存）”和“服务器缓存”。客户端缓存是存在浏览者电脑硬盘上的，即浏览器临时文件夹，而服务器缓存是存在服务器内存中，当然在一些高级应用场合也有专门的缓存服务器，甚至有利用数据库进行缓存的实现。当然这些都不在本文的讨论范围，本文要讨论的是最流行的JavaScript框架jQuery的数据缓存实现原理，这是jQuery1.2.3版开始加入的新功能。
一、 jQuery数据缓存的作用
jQuery数据缓存的作用在中文API中是这样描述的：“用于在一个元素上存取数据而避免了循环引用的风险”。如何理解这句话呢，看看我下面的举例，不知道合不合适，如果你有更好的例子可以告诉我。
（1） 存在循环引用风险的例子（注意getDataByName(name)方法中的for in语句）：
复制代码 代码如下:
<a href="javascript:void(0);">Tom</a><br/>
<a href="javascript:void(0);">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） 优化循环引用风险的例子（本例子其实与jQuery缓存实现原理差不多了，本例子重点在于改写了userInfo这个JSON结构，使name与对象key直接对应）：
复制代码 代码如下:
<a href="javascript:void(0);">Tom</a><br/>
<a href="javascript:void(0);">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>
二、简单实现jQuery设置数据缓存方法
jQuery数据缓存的实现其实是很简单的，下面我来实现jQuery设置数据缓存方法，我让代码尽量的简单，这有助于你更容易了解data的实现原理。函数与测试代码如下：
复制代码 代码如下:
<div>div1</div><br/>
<div>div2</div>
<script type="text/javascript">
//cache对象结构像这样{"uuid1":{"name1":value1,"name2":value2},"uuid2":{"name1":value1,"name2":value2}}，每个uuid对应一个elem缓存数据，每个缓存对象是可以由多个name/value对组成的，而value是可以是任何数据类型的，比如可以像这样在elem下存一个JSON片段:$(elem).data('JSON':{"name":"Tom","age":23})
var cache = {};
//expando作为elem一个新加属性，为了防止与用户自己定义的产生冲突，这里采用可变后缀
var expando = 'jQuery' + new Date().getTime();
var uuid = 0;
function data(elem, name, data)
{
//至少保证要有elem和name两个参数才能进行取缓存或设置缓存操作
if (elem && name)
{
//尝试取elem标签expando属性
var id = elem[expando];
if (data)
{
//设置缓存数据
if (!id)
id = elem[expando] = ++uuid;
//如果cache中id键对象不存在（即这个elem没有设置过数据缓存），先创建一个空对象
if (!cache[id])
cache[id] = {};
cache[id][name] = data;
}
else
{
//获取缓存数据
if (!id)
return 'Not set cache!';
else
return cache[id][name];
}
}
}
var div = document.getElementById('div1');
data(div, "tagName", "div");
data(div, "ID", "div1");
alert(data(div, "tagName")); //div
alert(data(div, "ID")); //div1
var div2 = document.getElementById('div2');
alert(data(div2, "tagName")); //Not set cache!
</script>
三、使用jQuery数据缓存注意事项
（1）因为jQuery缓存对象是全局的，在AJAX应用中，由于页面刷新很少，这个对象将一直存在，随着你对data的不断操作，很有可能因为使用不当，使得这个对象不断变大，最终影响程序性能。所以我们要及时清理这个对象，jQuery也提供了相应方法：removeData(name)，name就是你当初设置data值时使用的name参数。
另外，根据我对jQuery代码的了解，发现下面几种情况不需要手动清除数据缓存：
<1> 对elem执行remove()操作，jQuery会清除对象可能存在的缓存。jQuery相关源代码参考：
复制代码 代码如下: