一、实现原理:
对于DOM元素,通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来,关联id被附加到以jQuery.expando的值命名的属性上,数据存储在全局缓存对象jQuery.cache中。在读取、设置、移除数据时,将通过关联id从全局缓存对象jQuery.cache中找到关联的数据缓存对象,然后在数据缓存对象上执行读取、设置、移除操作。
对于Javascript对象,数据则直接存储在该Javascript对象的属性jQuery.expando上。在读取、设置、移除数据时,实际上是对Javascript对象的数据缓存对象执行读取、设置、移除操作。
为了避免jQuery内部使用的数据和用户自定义的数据发生冲突,数据缓存模块把内部数据存储在数据缓存对象上,把自定义数据存储在数据缓存对象的属性data上。
二、总体结构:
页面中每个jQuery副本的唯一标识
expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g,"" ),// 是否有关联的数据
hasData: function(){},// 设置、读取自定数据或内部数据
data: function(elem,name,data,pvt) {},// 移除自定义数据或内部数据
removeData: function(elem,// 设置、读取内部数据
_data: function(elem,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){}
});
三、$.data(elem,data),$.data(elem,name)
$.data(elem,data)的使用方法: 如果传入参数name,则设置任意类型的数据
<Meta charset="utf-8">
jQuery.data demo