jQuery源码分析-07数据缓存-Cache

作者：nuysoft/高云　QQ：47214707　EMail：[e-mail]

声明：本文为原创文章，如需转载，请注明来源并保留原文链接。 

 

读读写写，不对的地方请告诉我，多多交流共同进步，本章的的PDF下载在最后。

 

7. 数据缓存 Cache

jQuery提供了jQuery.data()和jQuery.fn.data()，实现对缓存的操作。jQuery.fn.data()内部通过jQuery.data()实现。jQuery.data()有三种用法：

/**  * jQuery.data( elem, key, value ) 在指定元素上存储/添加任意的数据，处理了循环引用和内存泄漏问题  * jQuery.data( elem, key ) 返回指定元素上name指定的值  * jQuery.data( elem ) 返回全部数据  */

7.1        实现思路

l  写入（引用jQuery.data()接口的三个参数：elem，key，value）

在匹配的DOM元素（elem）上附加一个唯一ID，在$.cache中添加同样的ID属性，该ID属性的值是一个对象，其中存储了key/value映射。

其中有几个关键点：

n  所有数据都存储在全局变量$.cache中

n  唯一ID是一个整型值，初始为0，调用data接口时自动加一，生成新的唯一ID

n  唯一ID附加在以$.expando命名的属性上，$.expando是动态生成的，类似于一个时间戳，以尽可能的避免与用户变量冲突

l  读取

从匹配的DOM元素（elem）上取到唯一ID，在$.cache中找到唯一ID对应的对象，再从对应的对象中找到key对应的值

7.2        验证

下面用代码验证一下（在火狐中用firebug调试）：

// 查看存储唯一ID的属性名 $.expando // 返回 "jQuery161013869011191548697" // 在body节点上写入数据 $('body').data( 'a', 1 ) $('body').data( 'b', 2 ) // 读取body节点的唯一ID $('body')[0][ $.expando ] // 返回5 $('body')[0][ "jQuery161013869011191548697" ] // 返回5 // 读取数据 $.cache[5] // 返回 Object { a=1, b=2}，验证成功！

7.3        源码分析

7.3.1  jQuery.data

// 数据缓存   var rbrace = /^(?:\{.*\}|\[.*\])$/, // 花括号或方括号     rmultiDash = /([a-z])([A-Z])/g; // 驼峰写法，大小写之间会被插入破折号   jQuery.extend({     cache: {},       // Please use with caution     uuid: 0, // 唯一id种子，DOM元素第一次调用data接口存储数据时，会用uuid++的方式，生成一个新的唯一id       // Unique for each copy of jQuery on the page     // Non-digits removed to match rinlinejQuery     // 页面上jQuery副本的唯一标识     // 非数字符号被移除以匹配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.     //     // YunG:     // 如果尝试在embed、object、applet上附加属性值，将会抛出未捕获的异常     //     // embed：     // embed标签用于播放一个多媒体对象，包括Flash、音频、视频等     // http://221.199.150.103/jsj/html/page/book/xhtml/m_embed.htm     //     // object：     // object元素用于向页面添加多媒体对象，包括Flash、音频、视频等。它规定了对象的数据和参数，以及可用来显示和操作数据的代码。     // <object>与</object>之间的文本是替换文本，如果用户的浏览器不支持此标签会显示这些文本。     // object元素中一般会包含<param>标签，<param>标签可用来定义播放参数。     // http://221.199.150.103/jsj/html/page/book/xhtml/m_object.htm?F=14,L=1     //     // <embed>和<object>标签的区别：两者都是用来播放多媒体文件的对象，object元素用于IE浏览器，embed元素用于非IE浏览器，为了保证兼容性，通常我们同时使用两个元素，浏览器会自动忽略它不支持的标签。同时使用两个元素时，应该把<embed>标签放在<object>标签的内部。     //     // applet：     // 不赞成使用     noData: {        "embed": true,        // Ban all objects except for Flash (which handle expandos)        "object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",        "applet": true     },     // 判断一个元素是否有与之关联的数据（通过jQuery.data设置），用在事件处理中     hasData: function( elem ) {        // 如果是DOM元素，则从jQuery.cache中读取，关联jQuery.cache和DOM元素的id存储在属性jQuery.expando中        // 如果是非DOM元素，则直接从elem上取，数据存储在 jQuery.expando 属性中        // elem的属性jQuery.expando，要么值是id，要么值是要存储的数据        // elem被替换为所存储的数据        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时用于事件处理      */     data: function( elem, name, data, pvt /* Internal Use Only */ ) {        // 是否可以附加数据，不可以则直接返回        if ( !jQuery.acceptData( elem ) ) {            return;        }          var internalKey = jQuery.expando, // 内部key？            getByName = typeof name === "string", // name必须是字符串？            thisCache,              // We have to handle DOM nodes and JS objects differently because IE6-7            // can't GC object references properly across the DOM-JS boundary            // 必须区分处理DOM元素和JS对象，因为IE6-7不能垃圾回收对象跨DOM对象和JS对象进行的引用属性            isNode = elem.nodeType,              // Only DOM nodes need the global jQuery cache; JS object data is            // attached directly to the object so GC can occur automatically            // 如果是DOM元素，则使用全局的jQuery.cache（为什么？DOM元素不能存储非字符串？无法垃圾回收？）            // 如果是JS对象，则直接附加到对象上            cache = isNode ? jQuery.cache : elem,              // 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            // 如果JS对象的cache已经存在，则需要为JS对象定义一个ID            // 如果是DOM元素，则直接取elem[ jQuery.expando ]，返回id（有可能是undefined）            // 如果是JS对象，且JS对象的属性jQuery.expando存在，返回jQuery.expando（有可能是 undefined）            id = isNode ? elem[ jQuery.expando ] : elem[ jQuery.expando ] && jQuery.expando;          // Avoid doing any more work than we need to when trying to get data on an        // object that has no data at all        // 避免做更多的不必要工作，当尝试在一个没有任何数据的对象上获取数据时                   // name是字符串，data未定义，说明是在取数据        // 但是对象没有任何数据，直接返回        // ？id不存在，说明没有数据；或者，id存在，但是属性internalKey不存在，也说明没有数据        // ？internalKey到底是干什么用的？        if ( (!id || (pvt && id && !cache[ id ][ internalKey ]))               && getByName && data === undefined ) {            return;        }        // id不存在的话就生成一个        if ( !id ) {            // Only DOM nodes need a new unique ID for each element since their data            // ends up in the global cache            // 只有DOM元素需要一个唯一ID，因为DOM元素的数据是存储在全局cache中的。            // 用uuid种子递增分配唯一ID            if ( isNode ) {               elem[ jQuery.expando ] = id = ++jQuery.uuid;            } else {               // JS对象则直接使用jQuery.expando，既然是直接附加到对象上，又何必要id呢？               // 避免与其他属性冲突！               id = jQuery.expando;            }        }          // 数据存储在一个映射对象中({})        if ( !cache[ id ] ) {            cache[ id ] = {}; // 初始化存储对象                       // 这是什么东东？既然是一个“恶作剧”，那就就忽略它，不深究。            // TODO: This is a hack for 1.5 ONLY. Avoids exposing jQuery            // metadata on plain JS objects when the object is serialized using            // JSON.stringify            if ( !isNode ) {               cache[ id ].toJSON = jQuery.noop;            }        }          // An object can be passed to jQuery.data instead of a key/value pair; this gets        // shallow copied over onto the existing cache        // data接口接收对象和函数，浅拷贝        if ( typeof name === "object" || typeof name === "function" ) {            // 私有数据，存储在cache[ id ][ internalKey ]中            // 什么类型的数据算私有数据呢？事件处理函数，还有么？            if ( pvt ) {               cache[ id ][ internalKey ] = jQuery.extend(cache[ id ][ internalKey ], name);            } else {               cache[ id ] = jQuery.extend(cache[ id ], name);            }        }        // 存储对象，存放了所有数据的映射对象        thisCache = cache[ id ];          // Internal jQuery data is stored in a separate object inside the object's data        // cache in order to avoid key collisions between internal data and user-defined        // data        // jQuery内部数据存在一个独立的对象（thisCache[ internalKey ]）上，为了避免内部数据和用户定义数据冲突        //        // 如果是私有数据        if ( pvt ) {            // 存放私有数据的对象不存在，则创建一个{}            if ( !thisCache[ internalKey ] ) {               thisCache[ internalKey ] = {};            }            // 使用私有数据对象替换thisCache            thisCache = thisCache[ internalKey ];        }          // 如果data不是undefined，表示传入了data参数，则存储data到name属性上        // 这里为什么要统一为驼峰写法呢？        // 这里的问题是：如果传入的是object/function，不做转换，只有传入的name是字符串才会转换。        if ( data !== undefined ) {            thisCache[ jQuery.camelCase( name ) ] = data;        }          // 又是一个hack，忽略它，不研究        // TODO: This is a hack for 1.5 ONLY. It will be removed in 1.6. Users should        // not attempt to inspect the internal events object using jQuery.data, as this        // internal data object is undocumented and subject to change.        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;        }          var internalKey = jQuery.expando, isNode = elem.nodeType,              // See jQuery.data for more information            cache = isNode ? jQuery.cache : elem,              // See jQuery.data for more information            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 ) {            var thisCache = pvt ? cache[ id ][ internalKey ] : cache[ id ];              if ( thisCache ) {               delete thisCache[ name ];                 // If there is no data left in the cache, we want to continue               // and let the cache object itself get destroyed               if ( !isEmptyDataObject(thisCache) ) {                   return;               }            }        }          // See jQuery.data for more information        if ( pvt ) {            delete cache[ id ][ internalKey ];              // Don't destroy the parent cache unless the internal data object            // had been the only thing left in it            if ( !isEmptyDataObject(cache[ id ]) ) {               return;            }        }          var internalCache = cache[ id ][ internalKey ];          // Browsers that fail expando deletion also refuse to delete expandos on        // the window, but it will allow it on all other JS objects; other browsers        // don't care        // 如果不支持在DOM元素上delete，设置为null        if ( jQuery.support.deleteExpando || cache != window ) {            delete cache[ id ];        } else {            cache[ id ] = null;        }          // We destroyed the entire user cache at once because it's faster than        // iterating through each key, but we need to continue to persist internal        // data if it existed        // // 如果还有数据，就清空一次再设置，增加性能        if ( internalCache ) {            cache[ id ] = {};            // TODO: This is a hack for 1.5 ONLY. Avoids exposing jQuery            // metadata on plain JS objects when the object is serialized using            // JSON.stringify            if ( !isNode ) {               cache[ id ].toJSON = jQuery.noop;            }              cache[ id ][ internalKey ] = internalCache;          // Otherwise, we need to eliminate the expando on the node to avoid        // false lookups in the cache for entries that no longer exist         // 已经没有任何数据了，就全部删除        } else if ( isNode ) {            // IE does not allow us to delete expando properties from nodes,            // nor does it have a removeAttribute function on Document nodes;            // we must handle all of these cases            // 如果支持delete，就删除。            // IE使用removeAttribute，所以尝试一次。再失败就只能设置为null了。            if ( jQuery.support.deleteExpando ) {               delete elem[ jQuery.expando ];            } else if ( elem.removeAttribute ) {               elem.removeAttribute( jQuery.expando );            } else {               elem[ jQuery.expando ] = 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     // YunG:     // 判断一个DOM元素是否可以附加数据     acceptData: function( elem ) {        if ( elem.nodeName ) {            // embed object applet            var match = jQuery.noData[ elem.nodeName.toLowerCase() ];              if ( match ) {               // return match === true               // return elem.getAttribute("classid") !== match               return !(match === true || elem.getAttribute("classid") !== match);            }        }          return true;     } });

7.3.2  jQuery.fn.data

jQuery.fn.extend({     // 在匹配的元素上存储任意数据，解决了循环引用和内存泄漏（TODO）？     // 支持HTML5 data-Attributes         // data( key, value ) data( object )     // 返回jQuery对象中指定key的值，或者返回含有全部数据的结合         // data( key ) data( )     // HTML5？ http://api.jquery.com/data/     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 );        });     } });

7.3.3  支持HTML5的data- 属性

// HTML 5 data- Attributes http://ejohn.org/blog/html-5-data-attributes/ // 如果在指定元素elem没有找到key对应的数据data，就尝试读取HTML5的data属性 function dataAttr( elem, key, data ) {     // If nothing was found internally, try to fetch any     // data from the HTML5 data-* attribute     if ( data === undefined && elem.nodeType === 1 ) {        var name = "data-" + key.replace( rmultiDash, "$1-$2" ).toLowerCase();          data = elem.getAttribute( name );          if ( typeof data === "string" ) {            try {               data = data === "true" ? true :                   data === "false" ? false :                      data === "null" ? null :                          !jQuery.isNaN( data ) ? parseFloat( data ) :                             rbrace.test( data ) ? jQuery.parseJSON( data ) :                                 data;            } catch( e ) {}              // Make sure we set the data so it isn't changed later            jQuery.data( elem, key, data );          } else {            data = undefined;        }     }       return data; }