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用它的地方很多。知道它的原理对记下来源码的阅读还是挺有帮助的。