jQuery源码学习（版本1.11）-data

概述

本分详细分析jquery-1.11.1.js源码文件行数：3617~3954；

代码简介：data块代码是jQuery用于缓存数据的代码，两种缓存方式，第一种是对于element和document节点对象，data将其需要缓存的数据缓存在内部缓存jQuery.cache中，element里只保存对应的编号，跟jQuery.cache关联起来，第二种对于其他对象，则直接保存在对象自身里面，jQuery源码多处地方用到data缓存功能，如后面的事件管理，JQ对象绑定的事件及其回调全部缓存在jQuery.cache中；

下文进行详细代码分析

代码分析

/**
 * 判断对象是否适合有data缓存
 */
jQuery.acceptData = function( elem ) {
	// 从elem.nodeName根据jQuery.noData获取元素，用于整个函数的最后判断
	var noData = jQuery.noData[ (elem.nodeName + " ").toLowerCase() ],
		nodeType = +elem.nodeType || 1;

	// nodeType不为1或9则决不能有缓存，即只有element节点和document节点才能有缓存
	return nodeType !== 1 && nodeType !== 9 ?
		false :

		// noData为空或false则返回true，表明元素可以用缓存data，elem.getAttribute("classid")这项判断用意暂时不理解
		!noData || noData !== true && elem.getAttribute("classid") === noData;
};


// 判断是否是json格式的正则
var rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,
	// 用于驼峰转"-[a-z]"的正则
	rmultiDash = /([A-Z])/g;

// 本方法是作用是将elem属性转到内部缓存去管理，并且返回，后面用其缓存数据，也用其获取数据
function dataAttr( elem, key, data ) {
	// data是缓存对象key属性的引用，如果为undefined则说明需要转换进去管理
	if ( data === undefined && elem.nodeType === 1 ) {

		// 驼峰转成横杠写法
		var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();

		// 获取data-开头的属性值
		data = elem.getAttribute( name );

		// data必须是string才会缓存，否则不缓存
		// 根据获取的string值进行不同处理
		if ( typeof data === "string" ) {
			try {
				data = data === "true" ? true :
					data === "false" ? false :
					data === "null" ? null :
					// Only convert to a number if it doesn't change the string
					+data + "" === data ? +data :
					rbrace.test( data ) ? jQuery.parseJSON( data ) :
					data;
			} catch( e ) {}

			// 确保缓存成功
			jQuery.data( elem, key, data );

		} else {
			data = undefined;
		}
	}

	返回缓存值
	return data;
}

// 判断缓存对象obj是否为空对象
function isEmptyDataObject( obj ) {
	var name;
	for ( name in obj ) {

		// 外部使用的数据有可能会存在obj.data，因此特别判断obj.data是否为空，为空则要跳过这一个name
		if ( name === "data" && jQuery.isEmptyObject( obj[name] ) ) {
			continue;
		}
		// 只有存在name !== "toJSON" ，则说明有缓存数据，函数返回false，
		if ( name !== "toJSON" ) {
			return false;
		}
	}

	// for循环当中无法返回false，则说明缓存对象为空，则返回true
	return true;
}

function internalData( elem, name, data, pvt /* Internal Use Only */ ) {
	// 判断elem是否适合使用data缓存
	if ( !jQuery.acceptData( elem ) ) {
		return;
	}

	var ret, thisCache,
		internalKey = jQuery.expando,

		// 判断是否dom节点，dom节点使用jQuery内部缓存间接关联数据，因为ie6，ie7无法对dom节点进行回收
		isNode = elem.nodeType,

		// 只有dom节点需要是否jQuery内部缓存，js对象直接在其内部缓存即可
		cache = isNode ? jQuery.cache : elem,

		// 同样只对dom节点定义id（1,2,3...），非dom节点统一使用internalKey
		id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey;

	if ( (!id || !cache[id] || (!pvt && !cache[id].data)) && data === undefined && typeof name === "string" ) {
		return;
	}

	// id不存在则对其初始化
	if ( !id ) {
		// 只对dom节点有效
		if ( isNode ) {
			id = elem[ internalKey ] = deletedIds.pop() || jQuery.guid++;
		} else {
			id = internalKey;
		}
	}

	// 如果cache[ id ]为空，则进行初始化
	if ( !cache[ id ] ) {
		cache[ id ] = isNode ? {} : { toJSON: jQuery.noop };
	}

	// name是object或function的场景，直接扩展进cache
	if ( typeof name === "object" || typeof name === "function" ) {
		// 如果是内部调用，则扩展进cache[ id ]，否则扩展进cache[ id ].data，避免数据冲突
		if ( pvt ) {
			cache[ id ] = jQuery.extend( cache[ id ], name );
		} else {
			cache[ id ].data = jQuery.extend( cache[ id ].data, name );
		}
	}

	thisCache = cache[ id ];

	// 如果没有设置pvt，说明是调用外部使用的工具方法data
	// 则增加一层，把数据保存在cache[ id ].data里面，以免与内部使用的数据冲突
	if ( !pvt ) {
		if ( !thisCache.data ) {
			thisCache.data = {};
		}
		// 设置以下引用后，后面直接操作thisCache即可
		thisCache = thisCache.data;
	}

	// 把data加进缓存中，null也是有效值，因此这里使用三等号判断
	if ( data !== undefined ) {
		thisCache[ jQuery.camelCase( name ) ] = data;
	}

	// 获取返回值
	if ( typeof name === "string" ) {

		// 先直接获取而不是转驼峰，因为可能就是需要获取指定值
		ret = thisCache[ name ];

		// 不存在则把name转成驼峰写法获取
		if ( ret == null ) {

			// 返回的ret是name对应的data数据
			ret = thisCache[ jQuery.camelCase( name ) ];
		}
	} else {
		// 返回的ret是整个缓存对象
		ret = thisCache;
	}

	return ret;
}

function internalRemoveData( elem, name, pvt ) {
	// 判断elem是否适合有缓存
	if ( !jQuery.acceptData( elem ) ) {
		return;
	}

	var thisCache, i,
		isNode = elem.nodeType,

		// 获取对应的缓存以及对应的id
		cache = isNode ? jQuery.cache : elem,
		id = isNode ? elem[ jQuery.expando ] : jQuery.expando;

	// 如果不存在缓存，则删除动作就是无用的，直接返回没必要继续
	if ( !cache[ id ] ) {
		return;
	}

	// name不为空进入删除逻辑
	if ( name ) {

		// 内部使用跟外部使用的是不同层级的缓存，设置好引用thisCache
		thisCache = pvt ? cache[ id ] : cache[ id ].data;

		if ( thisCache ) {

			// 以下if else块的作用是分割name，最终得到一个所有需要删除的key值的数据
			// name支持直接传入数组，或使用空格分割的字符串，来达到批删效果
			// 判断是否数组或类数组，不是则进入if，是则进入else
			if ( !jQuery.isArray( name ) ) {

				// 如果确认是thisCache里的key，直接塞进数组
				if ( name in thisCache ) {
					name = [ name ];
				} else {

					// 转驼峰后再次判断
					name = jQuery.camelCase( name );
					if ( name in thisCache ) {
						name = [ name ];
					// 前面两个判断都不通过，则分割字符串得到数组
					} else {
						name = name.split(" ");
					}
				}
			} else {
				// name是数组或类数组，则直接concat转小写之后的结果，得到数组（两倍于原name数组，前一半是原数据，后一半是转小写后的数据）
				name = name.concat( jQuery.map( name, jQuery.camelCase ) );
			}

			// 循环执行批量删除
			i = name.length;
			while ( i-- ) {
				delete thisCache[ name[i] ];
			}

			// 再后面的代码是用于消除thisCache缓存的，如果thisCache不为空，则返回，就不执行消除缓存的动作了
			if ( pvt ? !isEmptyDataObject(thisCache) : !jQuery.isEmptyObject(thisCache) ) {
				return;
			}
		}
	}

	// 先消除外部使用的缓存
	if ( !pvt ) {
		delete cache[ id ].data;

		// 如果内部使用的不为空则返回，不执行后续消除cache[ id ]的代码
		if ( !isEmptyDataObject( cache[ id ] ) ) {
			return;
		}
	}

	// 消除该对象缓存
	if ( isNode ) {
		jQuery.cleanData( [ elem ], true );

	} else if ( support.deleteExpando || cache != cache.window ) {
		delete cache[ id ];
		
	} else {
		cache[ id ] = null;
	}
}

// 定义数据缓存相关的工具函数或对象
jQuery.extend({
	// jQuery的内部缓存对象（拥有多个用途，事件绑定有使用）
	cache: {},

	// noData是用于保存特殊的不适合有缓存的element
	noData: {
		"applet ": true,
		"embed ": true,
		// ...but Flash objects (which have this classid) *can* handle expandos
		"object ": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
	},

	// 判断elem是否有缓存数据
	hasData: function( elem ) {
		// dom则直接调用jQuery.cache，根据elem内部存的id标示去获取对应缓存，非dom则直接从elem身上获取缓存
		elem = elem.nodeType ? jQuery.cache[ elem[jQuery.expando] ] : elem[ jQuery.expando ];
		// 返回boolean值
		return !!elem && !isEmptyDataObject( elem );
	},

	// 缓存数据或者获取数据
	data: function( elem, name, data ) {
		return internalData( elem, name, data );
	},

	// 删除缓存数据
	removeData: function( elem, name ) {
		return internalRemoveData( elem, name );
	},

	// 相当于内部使用的data方法
	_data: function( elem, name, data ) {
		return internalData( elem, name, data, true );
	},

	// 相当于内部使用的removeData方法
	_removeData: function( elem, name ) {
		return internalRemoveData( elem, name, true );
	}
});

// JQ原型扩展的data，removeData函数
jQuery.fn.extend({
	data: function( key, value ) {
		var i, name, data,
			// elem设置为JQ对象的第一个数据
			elem = this[0],
			attrs = elem && elem.attributes;

		// key为undefined说明是获取所有缓存数据
		if ( key === undefined ) {
			// 判断JQ对象的length，我不懂为什么不直接判断elem
			if ( this.length ) {
				// 获取对应到缓存
				data = jQuery.data( elem );

				// 以下分支应该是获取节点内部的属性，一并返回
				// parsedAttrs应该是用来判断节点内部的属性是否已经转到内部缓存的标志
				if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) {
					i = attrs.length;
					// 遍历节点的attributes
					while ( i-- ) {
						if ( attrs[ i ] ) {
							name = attrs[ i ].name;
							// 如果是以data-为开头的，则需要转到缓存去保存
							if ( name.indexOf( "data-" ) === 0 ) {
								// 驼峰第5位后的字符串
								name = jQuery.camelCase( name.slice(5) );
								// 调用dataAttr缓存属性
								dataAttr( elem, name, data[ name ] );
							}
						}
					}
					// 设置parsedAttrs，下次调用就不会再进入上面分支了
					jQuery._data( elem, "parsedAttrs", true );
				}
			}

			// 将获取到的缓存对象返回
			return data;
		}

		// 如果key是object，则调用each，会对JQ对象里的每一个元素都执行callback
		// callback里执行jQuery.data( this, key );即将key缓存进每一个元素的缓存中
		if ( typeof key === "object" ) {
			return this.each(function() {
				jQuery.data( this, key );
			});
		}

		return arguments.length > 1 ?

			// 缓存数据，JQ对象的每个元素都会缓存
			// this.each返回的是JQ对象
			this.each(function() {
				jQuery.data( this, key, value );
			}) :

			// 调用dataAttr获取属性，并且将属性缓存起来
			elem ? dataAttr( elem, key, jQuery.data( elem, key ) ) : undefined;
	},

	// JQ对象的删除缓存的方法，调用each对每一个元素生效
	removeData: function( key ) {
		return this.each(function() {
			jQuery.removeData( this, key );
		});
	}
});