深入学习jQuery中的data()

$(document.body).data('aaa', 'value-aaa')console.dir(document.body)

define([ "../core", "../var/rnotwhite", "./accepts"], function( jQuery, rnotwhite ) {function Data() { // Support: Android<4, // Old WebKit does not have Object.preventExtensions/freeze method, // return new empty object instead with no [[set]] accessor Object.defineProperty( this.cache = {}, 0, { get: function() {  return {}; } }); // jQuery.expando = "jQuery" + ( version + Math.random() ).replace( //D/g, "" ) expando是一个jQuery的唯一标示 // 格式是：'jQuery//d*' 也就是'jQuery'+ 多个数字。这里为啥要搞得这么麻烦呢？ // 应因为我们可能会创建多个Data对象，为了保证每个Data对象的expando属性的值不相等，所以这么搞 this.expando = jQuery.expando + Math.random();}Data.uid = 1; // Data函数的属性，'静态属性'Data.accepts = jQuery.acceptData;Data.prototype = { key: function( owner ) { // We can accept data for non-element nodes in modern browsers, // but we should not, see #8335. // Always return the key for a frozen object. // 若owner在该缓存池中存在对应的缓存对象，则返回混存对象的key(是一个数字)， // 若owner在该缓存池中不存在对应的缓存对象，则在缓存池中为其创建一个缓存对象，并返回该缓存对象的key if ( !Data.accepts( owner ) ) {  return 0; } var descriptor = {},  // Check if the owner object already has a cache key  // 检查owner对象在该缓存池中是否存在缓存  unlock = owner[ this.expando ]; // 是一个数字，用来作为缓存池中缓存对象的key // If not, create one // 如果没有，则创建一个 if ( !unlock ) {  unlock = Data.uid++;  // Secure it in a non-enumerable, non-writable property  // 给owner附加一个属性 owner[this.expando] = unlock ，并且该属性不能被枚举，  try {  descriptor[ this.expando ] = { value: unlock };  Object.defineProperties( owner, descriptor );  // Support: Android<4  // Fallback to a less secure definition  } catch ( e ) {  descriptor[ this.expando ] = unlock;  jQuery.extend( owner, descriptor );  } } // Ensure the cache object // 确保owner对应的缓存对象已存在 if ( !this.cache[ unlock ] ) {  this.cache[ unlock ] = {}; } // 返回unlock return unlock; }, set: function( owner, data, value ) { // 设置owner对应的缓存对象 var prop,  // There may be an unlock assigned to this node,  // if there is no entry for this "owner", create one inline  // and set the unlock as though an owner entry had always existed  unlock = this.key( owner ), // 获取owner的对应的缓存对象在缓存池中的key(这里的key，是键值对中的键的意思)  cache = this.cache[ unlock ]; // 获取owner所对应的缓存对象 // Handle: [ owner, key, value ] args // 根据传入参数的个数以及类型实现重载 if ( typeof data === "string" ) {  cache[ data ] = value; // Handle: [ owner, { properties } ] args } else {  // Fresh assignments by object are shallow copied  if ( jQuery.isEmptyObject( cache ) ) {  jQuery.extend( this.cache[ unlock ], data );  // Otherwise, copy the properties one-by-one to the cache object  } else {  for ( prop in data ) {   cache[ prop ] = data[ prop ];  }  } } // 返回缓存对象 return cache; }, get: function( owner, key ) { // 获取owner对象的名为key的属性值 // owner:是一个对象(可以是jQuery对象也可以是DOM对象) key: 属性名 // Either a valid cache is found, or will be created. // New caches will be created and the unlock returned, // allowing direct access to the newly created // empty data object. A valid owner object must be provided. var cache = this.cache[ this.key( owner ) ]; // owner的缓存对象 return key === undefined ? cache : cache[ key ]; // 没指定key的话就返回整个缓存对象，若指定了key则返回在该缓存对象的key属性的值 }, access: function( owner, key, value ) { var stored; // In cases where either: // // 1. No key was specified 没有指定key // 2. A string key was specified, but no value provided 指定了字符串格式的key，但没有指定value // // Take the "read" path and allow the get method to determine // which value to return, respectively either: // // 1. The entire cache object 整个缓存对象 // 2. The data stored at the key 缓存对象中某个键的值 // if ( key === undefined || // 没有指定key或者指定了字符串格式的key，但没有指定value  ((key && typeof key === "string") && value === undefined) ) {  // 没有指定key：获取整个缓存对象  // 指定了字符串格式的key，但没有指定value： 获取缓存对象中key的值  stored = this.get( owner, key );  return stored !== undefined ?  stored : this.get( owner, jQuery.camelCase(key) ); } // [*]When the key is not a string, or both a key and value // are specified, set or extend (existing objects) with either: // 当key不是一个字符串，或者key和value都指定了，就会根据情况进行设置或者扩展 // // 1. An object of properties // 2. A key and value // this.set( owner, key, value ); // Since the "set" path can have two possible entry points // return the expected data based on which path was taken[*] return value !== undefined ? value : key; }, remove: function( owner, key ) { // 清空owner对应的缓存对象，或者移除缓存对象中的某个键值对 var i, name, camel,  unlock = this.key( owner ),  cache = this.cache[ unlock ]; // 如果没有指定key，则清空缓存对象 if ( key === undefined ) {  this.cache[ unlock ] = {}; } else {  // Support array or space separated string of keys  if ( jQuery.isArray( key ) ) {  // If "name" is an array of keys...  // When data is initially created, via ("key", "val") signature,  // keys will be converted to camelCase.  // Since there is no way to tell _how_ a key was added, remove  // both plain key and camelCase key. #12786  // This will only penalize the array argument path.  name = key.concat( key.map( jQuery.camelCase ) );  } else {  camel = jQuery.camelCase( key );  // Try the string as a key before any manipulation  if ( key in cache ) {   name = [ key, camel ];  } else {   // If a key with the spaces exists, use it.   // Otherwise, create an array by matching non-whitespace   name = camel;   name = name in cache ?   [ name ] : ( name.match( rnotwhite ) || [] );  }  }  i = name.length;  while ( i-- ) {  delete cache[ name[ i ] ];  } } }, hasData: function( owner ) { // 检查owner在该缓存池中是否存在缓存对象 return !jQuery.isEmptyObject(  this.cache[ owner[ this.expando ] ] || {} ); }, discard: function( owner ) { if ( owner[ this.expando ] ) {  delete this.cache[ owner[ this.expando ] ]; } }};return Data;});

jQuery.extend({ hasData: function( elem ) { return dataUser.hasData( elem ) || dataPriv.hasData( elem ); }, data: function( elem, name, data ) { return dataUser.access( elem, name, data ); }, removeData: function( elem, name ) { dataUser.remove( elem, name ); }, // TODO: Now that all calls to _data and _removeData have been replaced // with direct calls to dataPriv methods, these can be deprecated. _data: function( elem, name, data ) { return dataPriv.access( elem, name, data ); }, _removeData: function( elem, name ) { dataPriv.remove( elem, name ); }});

jQuery.fn.extend({ data: function( key, value ) { var i, name, data,  elem = this[ 0 ],  attrs = elem && elem.attributes;return access( this, function( value ) {  var data,  camelKey = jQuery.camelCase( key );// 从这里可以看出，为jQuery对象中的每个DOM元素分别附加数据  this.each(function() {  // First, attempt to store a copy or reference of any  // data that might've been store with a camelCased key.  var data = dataUser.get( this, camelKey );  // For HTML5 data-* attribute interop, we have to  // store property names with dashes in a camelCase form.  // This might not apply to all properties...*  dataUser.set( this, camelKey, value );  // *... In the case of properties that might _actually_  // have dashes, we need to also store a copy of that  // unchanged property.  if ( key.indexOf("-") !== -1 && data !== undefined ) {   dataUser.set( this, key, value );  }  }); }, null, value, arguments.length > 1, null, true ); }, removeData: function( key ) { return this.each(function() {  dataUser.remove( this, key ); }); }});