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 = {
“uuid1”: { // DOM节点1缓存数据，”uuid1″相当于dom1[expando]
“name1”: value1,
“name2”: value2
},
“uuid2”: { // DOM节点2缓存数据，“uuid2″相当于dom2[expando]
“name1”: value1,
“name2”: value2
}
// ……
};

每个uuid对应一个elem缓存数据，每个缓存对象是可以由多个name/value(名值对)对组成的，而value是可以是任何数据类型的。
简单模拟实现
根据以上思路，就可以简单实现下jQuery.data和jQuery.removeDate的功能了：

(function(window, undefined) {
var cacheData = {}, // 用来存储数据的对象
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) {
// 或使用原生方法验证字符串Object.prototype.toString.call(elem) === “[object String]”