jQuery源码分析系列：数据缓存

很多同学在项目中都喜欢将数据存储在HTMLElement属性上，如

<div data="some data">Test</div>
<script>
div.getAttribute('data'); // some data
</script>

给页面中div添加了自定义属性“data”及值“some data”。后续JS代码中使用getAttribute获取。

jQuery从1.2.3开始提供了data/removeData方法用来存储/删除数据。1.6.1代码片段

jQuery.extend({
cache: {},

// Please use with caution
uuid: 0,

...

});

即给jQuery添加了静态字段/方法，有jQuery.cache/jQuery.uuid/jQuery.expando等。下面分别介绍

jQuery.cache 空对象，用来缓存。它的结构较复杂。

jQuery.uuid 自增唯一的数字。

jQuery.expando
字符串，使用Math.random生成，去掉了非数字字符。它作为HTMLElement或JS对象的属性名。

expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),

jQuery.noData
JS对象，对于指定的HTMLElement禁用data方法。如embed、applet。

jQuery.hasData
用来判断HTMLElement或JS对象是否具有数据。返回true或false。即如果调用了jQuery.data方法添加了属性，则返回true。

<div>aa</div>
<script>
var div = document.getElementsByTagName('div')[0];
$.hasData(div); // false
$.data(div, 'name','jack');
$.hasData(div); // true
</script>

jQuery.acceptData 用来判断该元素是否能接受数据，返回true或false。在jQuery.data中使用。

jQuery.data 这是提供给客户端程序员使用的方法，它同时是setter/getter。

1，传一个参数，返回附加在指定元素的所有数据，即thisCachejQuery.data(el);
// thisCache

2，传二个参数，返回指定的属性值jQuery.data(el, 'name');

3，传三个参数，设置属性及属性值jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu',
{});
4，传四个参数，第四个参数pvt仅提供给jQuery库自身使用。即jQuery._data方法中传true。因为jQuery的事件模块严重依赖于jQuery.data，为避免人为的不小心重写在这个版本中加入的。

jQuery.removeData
删除数据。

上面是jQuery数据缓存模块的整体概述，下面详细说下jQuery.data方法。jQuery.data为两种对象提供缓存:JS对象和HTMLElement

// 为JS对象提供缓存
var myObj = {};
$.data(myObj, 'name', 'jack');
$.data(myObj, 'name'); // jack

// 为HTMLElement提供缓存
<div id="xx"></div>
<script>
var el = document.getElementById('xx');
$.data(el, 'name', 'jack');
$.data(el, 'name'); // jack
</script>

内部实现上也是有区别的，

1，为JS对象提供缓存时，直接将数据保存在JS对象上。cache为JS对象。此时会偷偷的给JS对象添加个属性（类似于jQuery16101803968874529044），属性值也是个JS对象。举例说明

var myObj = {};
$.data(myObj, 'name', 'jack');
console.log(myObj);

myObj的结构如下

myObj = {
jQuery16101803968874529044 : {
name : 'jack'
}
}

“jQuery16101803968874529044”这个字符串在data内部命名为id（注意并非HTMLElement元素的id），它实际就是jQuery.expando。上面已经提到它是在jQuery.js引入到页面后随机生成的。

2，为HTMLElement提供缓存时，却不会直接保存在HTMLElement上。而是保存在jQuery.cache上。cache为jQuery.cache。此时先给HTMLElement添加属性（类似于jQuery16101803968874529044），属性值为数字（1,2,3递增）。即只将一些数字保存在了HTMLElement上，不会直接将数据置入。这是因为IE老版本中可能会存在内存泄露危险。而HTMLElement如何与jQuery.cache建立联系呢？ 还是id。刚刚提到属性值数字就是id。举例说明

<div id="xx"></div>
<script>
var el = document.getElementById('xx');
$.data(el, 'name', 'jack');
console.log(el[jQuery.expando]); // 1
console.log(jQuery.cache); // {1 : {name:'jack'}}
</script>

el 上添加了属性jQuery.expando，值为id，这个id是从1开始递增的。而id又作为jQuery.cache的属性（key）。这样就HTMLElement就与jQuery.cache建立了联系。如图



不知注意到没有，jQuery.data还有第四个参数pvt，这个参数只在jQuery._data中使用。

// For internal use only.
_data: function( elem, name, data ) {
return jQuery.data( elem, name, data, true );
},

jQuery._data从命名上就指定它是私有的，使用jQuery的客户端程序员不应该去调用该方法。jQuery的API文档上也不会公开它。

jQuery的数据缓存模块从1.2.3到1.6.1几乎每个版本都在变。jQuery._data的提出就是为了避免客户端程序员覆盖/重写了默写模块。如jQuery事件模块中事件handler等就使用jQuery.data存储，如果重写了该模块。那么事件模块将瘫痪。因此特意添加了pvt参数及jQuery._data方法。

但如果你刻意要破坏，那么还是可以做的。如下

<div id="xx">Test</div>
<script>
$('#xx').click(function(){
alert('click');
});

// 语句1
$.data($('#xx')[0], 'events', '', true);

// 语句2
//$._data($('#xx')[0], 'events', '');
</script>

整个jQuery.data设置(set)数据缓存的过程就是如此，理解的这个。取数据(get)的过程就好理解了。不重复。

用jQuery.extend方法扩展工具函数，jQuery.fn.extend调用jQuery.extend中扩展的方法缓存数据。

数据缓存源码：

/* Start Data cache*/
var rbrace = /^(?:\{.*\}|\[.*\])$/,//花括号
rmultiDash = /([a-z])([A-Z])/g;//驼峰写法，大小写之间会被插入破折号
/**写入*/
//在匹配的DOM元素（elem）上附加一个唯一ID，在$.cache中添加同样的ID属性，该ID属性的值是一个对象，其中存储了key/value的映射

//.data(key,value)用来设置保存数据  .data(key)用来查询数据
jQuery.extend({
//数据存储在$.cache中,关键实现的核心
cache: {},
//整型值，初始为0 调用data接口自动加一  生成新的唯一ID  分配ID用的seed
uuid: 0,
/*    唯一ID附加在$.expando命名的属性上，$.expando是动态生成的，避免命名冲突  移除非数字编号的
为了区分不同的jQuery实例存储的数据，前缀 +　版本号　＋　随机数作为    key*/
expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),

//以下元素没有data 除了Flash之外的object
noData: {
"embed": true,//用于播放一个多媒体对象 ，flash 音频 视频
"object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",//用于向页面添加多媒体对象 flash 音频 视频
"applet": true//object用于IE浏览器   embed元素用于非IE浏览器
},

//判断一个元素事发后有与之关联的数据(通过jQuery.data设置) 用在事件处理中
hasData: function( elem ) {
//如果是DOM，就从jQuery.cache中读取，关联的jQuery.cache和DOM元素的id存储在jQueyr.expando中
//如果非DOM 直接从elem上取，jQuery.expando属性中有数据
//elem的属性jQuery.expando 要么值是id  要么存储数据
elem = elem.nodeType ? jQuery.cache[elem[jQuery.expando]]:elem[jQuery.expando];
return !!elem && !isEmptyDataObject(elem);
},
/*
工具函数：
jQuery.data(elem,key,value)        在指定元素上存储、添加任意数据 处理了循环引用和内存泄露问题
jQuery.data(elem,key)            返回指定元素上name指定的值
jQuery.data(elem)                返回全部数据

pvt私有的  是否是内部使用的独立对象  pvt为true用于事件处理

myObj = {  js缓存直接绑定在js对象上
jQuery16101803968874529044 : {
name : 'jack'
}
}
示例：
<div id="xx"></div>
<script>  html是放在jquery.cache上面的
var el = document.getElementById('xx');
$.data(el, 'name', 'jack');
console.log(el[jQuery.expando]); // 1
console.log(jQuery.cache); // { 1 : { name:'jack'}}
</script>

HTMLElement -> jQuery.expando ->ID ->jQuery.cache

*/
/*
data部分的代码明确区分了JS对象 和 DOM对象的保存，为了解决部分浏览器的内存泄露问题。当DOM和JS对象之间出现循环引用时，GC就无法正确处理。

*/
data: function( elem, name, data, pvt /* Internal Use Only */ ) {
//如果属于noData中定义的元素，是否可以附加数据，不可以直接返回
if(!jQuery.acceptData(elem)){
return;
}

var internalKey = jQuery.expando,//??
getByName = typeof name === "string",
thisCache,
//区分处理DOM元素和JS对象 IE不能垃圾回收对象跨DOM和JS 因为IE6-7不能垃圾回收对象跨DOM对象和JS对象进行的引用属性
isNode = elem.nodeType,

//如果是DOM 使用全局jQuery.cache
//如果是JS对象，直接附加在对象上
cache = isNode ? jQuery.cache : elem,

//如果JS对象的cache已经存在，需要为JS对象定义一个ID
//如果DOM元素，直接取elem[jQuery.expando] 返回id 为递增的
//如果是JS对象，且JS对象的属性jQuery.expando存在，返回jQuery.expando
//var internalKey = jQuery.expando
id = isNode ? elem[jQuery.expando] : elem[jQuery.expando] && jQuery.expando;
//id不存在  id存在但是internalKey=jQuery.expando不存在
//data未定义，说明当前调用是查询数据，但是对象没有任何数据  直接返回
if((!id || (pvt && id && !cache[id][internalKey])) && getByName && data === undefined){
return;
}
//HTMLElement -> jQuery.expando -> id -> jQuery.cache
//id不存在生成一个  设置id
if(!id){
if(isNode){
//HTMLElement添加属性（类似于jQuery16101803968874529044），属性值为数字 1 2 3 4
//用uuid递增分配唯一ID，只有DOM元素需要。需要存在全局cache中
elem[jQuery.expando] = id = ++ jQuery.uuid;
}else{
//避免与其他属性冲突 “jQuery16101803968874529044”这个字符串在data内部命名为id
id = jQuery.expando;
}
}

//数据存储在一个映射对象中   清空原有的值
if(!cache[id]){
cache[id] = {};//初始化存储对象
if(!isNode){
cache[id].toJSON = jQuery.noop;
}
}
//用extend扩展cache，增加一个属性，用来保存数据。
//data接口接受对象和函数 浅拷贝
if(typeof name === "object" || typeof name === "function"){
if(pvt){
//id: 1  2  3  4  5 ...
cache[id][internalKey] = jQuery.extend(cache[id][internalKey],name);
}else{
cache[id] = jQuery.extend(cache[id],name);
}
}
//存储了所有的数据的映射对象
thisCache = cache[id];

//避免key冲突
if ( pvt ) {
if ( !thisCache[ internalKey ] ) {
thisCache[ internalKey ] = {};//设空对象
}
thisCache = thisCache[ internalKey ];
}

if ( data !== undefined ) {
thisCache[ jQuery.camelCase( name ) ] = data;
}
//忽略
if ( name === "events" && !thisCache[name] ) {
return thisCache[ internalKey ] && thisCache[ internalKey ].events;
}
//如果name是字符串，返回data  不是 返回整个存储对象
return getByName ? thisCache[ jQuery.camelCase( name ) ] : thisCache;
},
//删除数据
removeData: function( elem, name, pvt /* Internal Use Only */ ) {
//如果元素不能附加数据
if ( !jQuery.acceptData( elem ) ) {
return;
}
//internalKey定义唯一ID
var internalKey = jQuery.expando,
//是DOM对象
isNode = elem.nodeType,

//DOM对象用cache全局缓存   JS对象存在elem中
cache = isNode ? jQuery.cache : elem,
// 如果elem的jQuery.expando已经有值了，就重用 减少ID数
id = isNode ? elem[ jQuery.expando ] : jQuery.expando;
//缓存中没有这个元素  直接返回
if ( !cache[ id ] ) {
return;
}
//部分浏览器不支持deleteExpando ，在jQuery.support中检查过这个浏览器特性 失败的话 设null
if(jQuery.support.deleteExpando || cache != window){
delete cache[id];
}else{
cache[id] = null;
}

var internalCache = cache[id][internalKey];
//如果还有数据  就清空一次在设置 增加性能
if(internalCache){
cache[id] = {};
cache[id][internalKey] = internalCache;
//没有任何数据了
}else if(isNode){
//如果支持delete 就删除  IE使用reomveAttribute
if(jQuery.support.deleteExpando){
delete elem[jQuery.expando];
}else if(elem.reomveAttribute){
elem.reomveAttribute(jQuery.expando);
}else{
elem[jQuery.expando] = null;
}
}
},
_data: function( elem, name, data ) {
return jQuery.data(elem,name,data,true);
},

//判断一个元素是否可以附加数据
acceptData: function( elem ) {
if(elem.nodeName){
//embed object applet  以下元素没有data
var match = jQuery.noData[elem.nodeName.toLowerCase()];
if(match){
//getAttribute():查询属性的名字  返回false
return !(match === true || elem.getAttribute("classid") !== match);
}
}
return true;
}
});

jQuery.fn.extend({
//向被选元素添加数据  和读取数据
data: function( key, value ) {
var data = null;//初始化
//用于处理特殊key   key是undefined  则认为取当前jQuery对象中第一个元素的全部数据
if(typeof key === "undefined"){
if(this.length){
data = jQuery.data(this[0]);
//Element
if(this[0].nodeType === 1){
var attr = this[0].attributes,name;
for(var i = 0; l = attr.length;i<l;i++){
name = attr[i].name;
if(name.indexOf("data-") === 0){
name = jQuery.camelCase(name.substring(5));

dataAttr(this[0],name,data[name]);
}
}
}
return data;
//key是对象 则对当前jQuery对象迭代调用$.fn.each
//在每一个匹配的元素上存储数据key
}else if(typeof key === "object" ){
return this.each(function(){
jQuery.data(this,key);
}
}
// 到这里，key是字符串
var parts = key.split(".");
parts[1] = parts[1] ? "." + parts[1] : "";
//如果value为undefined，则   取当前jQuery对象中第一个元素指定名称的数据
if ( value === undefined ) {
data = this.triggerHandler("getData" + parts[1] + "!", [parts[0]]);

// Try to fetch any internally stored data first
// 优先取内部数据
if ( data === undefined && this.length ) {
data = jQuery.data( this[0], key );
// 读取HTML5的data属性
data = dataAttr( this[0], key, data );
}

return data === undefined && parts[1] ?
this.data( parts[0] ) :
data;

// key是字符串，value不是undefined，则存储
} else {
return this.each(function() {
var $this = jQuery( this ),
args = [ parts[0], value ];
// 触发事件
$this.triggerHandler( "setData" + parts[1] + "!", args );
jQuery.data( this, key, value );
$this.triggerHandler( "changeData" + parts[1] + "!", args );
});
}
},
//删除数据
removeData: function( key ) {
return this.each(function() {
jQuery.removeData( this, key );
});
}
});