jQuery数据缓存$.data

文章转自http://segmentfault.com/a/1190000000626031

一、实现原理：

对于DOM元素，通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来，关联id被附加到以jQuery.expando的值命名的属性上，数据存储在全局缓存对象jQuery.cache中。在读取、设置、移除数据时，将通过关联id从全局缓存对象jQuery.cache中找到关联的数据缓存对象，然后在数据缓存对象上执行读取、设置、移除操作。对于Javascript对象，数据则直接存储在该Javascript对象的属性jQuery.expando上。在读取、设置、移除数据时，实际上是对Javascript对象的数据缓存对象执行读取、设置、移除操作。为了避免jQuery内部使用的数据和用户自定义的数据发生冲突，数据缓存模块把内部数据存储在数据缓存对象上，把自定义数据存储在数据缓存对象的属性data上。

二、总体结构：

// 数据缓存 Data
jQuery.extend({
     // 全局缓存对象
     cache: {},
     // 唯一 id种子
     uuid:0,
     // 页面中每个jQuery副本的唯一标识
     expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),
     // 是否有关联的数据
     hasData: function(){},
     // 设置、读取自定数据或内部数据
     data: function(elem, name, data, pvt) {},
     // 移除自定义数据或内部数据
     removeData: function(elem, name, pvt) {},
     // 设置、读取内部数据
     _data: function(elem, name, data) {},
     // 是否可以设置数据
     acceptData: function(elem){}
});
jQuery.fn.extend({
     // 设置、读取自定义数据，解析HTML5属性data-
     data: function(key,value){},
     // 移除自定义数据
     removeData: function(key){}
});
// 解析HTML5属性 data-
function dataAttr(elem,key,data){}
// 检查数据缓存对象是否为空
function isEmptyDataObject(obj){}
jQuery.extend({
     // 清空数据缓存对象


cleanData: function(elems){}
});