jquery源码之缓存系统--$.data
jQuery内置了一个缓存系统，它做的事情可就多了，动画模块，事件模块等非常有用的模块都是依赖它实现的。
其实说到底，就是在jQuery的命名空间下开辟了一个cache的对象。
将数据以一定得规则存放的cache对象中。
首先我们来看看内部实现：
jQuery.extend({
cache: {},
deletedIds: [],
// Remove at next major release (1.9/2.0)
uuid: 0,
// Unique for each copy of jQuery on the page
// Non-digits removed to match rinlinejQuery
expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),
// The following elements throw uncatchable exceptions if you
// attempt to add expando properties to them.
noData: {
"embed": true,
// Ban all objects except for Flash (which handle expandos)
"object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",
"applet": true
},
hasData: function( elem ) {
elem = elem.nodeType ? jQuery.cache[ elem[jQuery.expando] ] : elem[ jQuery.expando ];
return !!elem && !isEmptyDataObject( elem );
},
data: function( elem, name, data, pvt /* Internal Use Only */ ) {
// 该元素是否支持缓存
if ( !jQuery.acceptData( elem ) ) {
return;
}
var thisCache, ret,
// 内部标示
internalKey = jQuery.expando,
// name是否为string
getByName = typeof name === "string",
// 我们必须以不同的方式处理dom节点和js对象
// 因为ie67 不能正确的回收对象引用，在dom和js范围中
// We have to handle DOM nodes and JS objects differently because IE6-7
// can't GC object references properly across the DOM-JS boundary
isNode = elem.nodeType,
// 只有dom节点需要全局的jquery缓存对象，js对象只需要直接添加，
// 以至于回收器会自动的回收
// Only DOM nodes need the global jQuery cache; JS object data is
// attached directly to the object so GC can occur automatically
cache = isNode ? jQuery.cache : elem,
// 只定义为JS对象ID，如果它已经允许存在缓存
// 代码的快捷方式在相同的路径作为一个没有缓存DOM节点
// Only defining an ID for JS objects if its cache already exists allows
// the code to shortcut on the same path as a DOM node with no cache
id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey;
// 预防做多余的工作，在我们需要尝试获取一个data对象，在他根本就不存在的情况下
// Avoid doing any more work than we need to when trying to get data on an
// object that has no data at all
if ( (!id || !cache[id] || (!pvt && !cache[id].data)) && getByName && data === undefined ) {
return;
}
// 如果id不存在就创建一个id
if ( !id ) {
//只有dom对象需要一个唯一的id对每个元素，自从他们的data终端是全局缓存对象
// Only DOM nodes need a new unique ID for each element since their data
// ends up in the global cache
if ( isNode ) {
elem[ internalKey ] = id = jQuery.deletedIds.pop() || jQuery.guid++;
} else {
id = internalKey;
}
}
// 如果cash对应的id不存在，则创建
if ( !cache[ id ] ) {
cache[ id ] = {};
// 预防暴漏jquery的metadata 在普通的js对象想要用JSON.stringify序列化
// Avoids exposing jQuery metadata on plain JS objects when the object
// is serialized using JSON.stringify
if ( !isNode ) {
cache[ id ].toJSON = jQuery.noop;
}
}
// 可以传递一个对象给jquery.data 来取代键值对，
// 获取浅拷贝放入已获取的缓存
// An object can be passed to jQuery.data instead of a key/value pair; this gets
// shallow copied over onto the existing cache
if ( typeof name === "object" || typeof name === "function" ) {
// 注意pvt参数，这个参数只用来内部处理
// 在不设置这个参数时，cache[id] 开辟一个data的命名空间，并把数据放在改命名空间、
// 一般pvt是给jquery内部使用， 如jquery.event
// 这是用来区分用户自定义缓存和jquery内置缓存
if ( pvt ) {
cache[ id ] = jQuery.extend( cache[ id ], name );
} else {
cache[ id ].data = jQuery.extend( cache[ id ].data, name );
}
}
// 获取该缓存空间
thisCache = cache[ id ];
// 这里有同样的注释
// jQuery.data() 保存一个分离的对象进入对象内部data cache，
// 是为防止内部数据和用户定义数据的键冲突
// jQuery data() is stored in a separate object inside the object's internal data
// cache in order to avoid key collisions between internal data and user-defined
// data.
if ( !pvt ) {
if ( !thisCache.data ) {
thisCache.data = {};
}
thisCache = thisCache.data;
}
// 如果data，存在则直接缓存
if ( data !== undefined ) {
thisCache[ jQuery.camelCase( name ) ] = data;
}
// 最终获取缓存的对象
// 此方法也是存取并用的方法
// Check for both converted-to-camel and non-converted data property names
// If a data property was specified
if ( getByName ) {
// First Try to find as-is property data
ret = thisCache[ name ];
// Test for null|undefined property data
if ( ret == null ) {
// Try to find the camelCased property
ret = thisCache[ jQuery.camelCase( name ) ];
}
} else {
ret = thisCache;
}
return ret;
},
// 根据data的存储方式，清空某些缓存应该就很明了了
removeData: function( elem, name, pvt /* Internal Use Only */ ) {
if ( !jQuery.acceptData( elem ) ) {
return;
}
var thisCache, i, l,
isNode = elem.nodeType,
// See jQuery.data for more information
cache = isNode ? jQuery.cache : elem,
id = isNode ? elem[ jQuery.expando ] : jQuery.expando;
// If there is already no cache entry for this object, there is no
// purpose in continuing
if ( !cache[ id ] ) {
return;
}
if ( name ) {
thisCache = pvt ? cache[ id ] : cache[ id ].data;
if ( thisCache ) {
// Support array or space separated string names for data keys
if ( !jQuery.isArray( name ) ) {
// try the string as a key before any manipulation
if ( name in thisCache ) {
name = [ name ];
} else {
// split the camel cased version by spaces unless a key with the spaces exists
name = jQuery.camelCase( name );
if ( name in thisCache ) {
name = [ name ];
} else {
name = name.split(" ");
}
}
}
for ( i = 0, l = name.length; i < l; i++ ) {
delete thisCache[ name[i] ];
}
// If there is no data left in the cache, we want to continue
// and let the cache object itself get destroyed
if ( !( pvt ? isEmptyDataObject : jQuery.isEmptyObject )( thisCache ) ) {
return;
}
}
}
// See jQuery.data for more information
if ( !pvt ) {
delete cache[ id ].data;
// Don't destroy the parent cache unless the internal data object
// had been the only thing left in it
if ( !isEmptyDataObject( cache[ id ] ) ) {
return;
}
}
// Destroy the cache
if ( isNode ) {
jQuery.cleanData( [ elem ], true );
// Use delete when supported for expandos or `cache` is not a window per isWindow (#10080)
} else if ( jQuery.support.deleteExpando || cache != cache.window ) {
delete cache[ id ];
// When all else fails, null
} else {
cache[ id ] = null;
}
},
// 内部调用缓存的接口
// For internal use only.
_data: function( elem, name, data ) {
return jQuery.data( elem, name, data, true );
},
// A method for determining if a DOM node can handle the data expando
acceptData: function( elem ) {
var noData = elem.nodeName && jQuery.noData[ elem.nodeName.toLowerCase() ];
// nodes accept data unless otherwise specified; rejection can be conditional
return !noData || noData !== true && elem.getAttribute("classid") === noData;
}
});
实践是检验真理的唯一标准，所以让我们来用用看。
var el = docuement.getElementById("aElement");
var data = $.data(el, "hello", {name: 123});
// 开始也有提到时间系统也是基于缓存，
// 我们在这就可以看下发生了什么
$(el).click(function() {
alert(213321);
});
// 接下来 我们查看我们的jquery.cache对象
console.log(JSON.stringify($.cache));
/*
{"1":
// 自定义数据,放在data命名空间内
{"data":
{"hello":{"name":123}},
//jquery 内部数据，这里是事件数据
"events":{"click":[{"type":"click","origType":"click","data":null,"guid":3,"selector":null,"needsContext":null,"namespace":""}]}}}
再看看刚刚缓存用的元素el
el中多了一个属性 jQuery18308567570869345218值为1
与cache中保存的键值相对应，
*/
其他缓存相关方法都是基于这几个方法，就不一一提及了。总之缓存系统功能强大，jquery用它的地方很多。知道它的原理对记下来源码的阅读还是挺有帮助的。