《jQuery中数据缓存$.data的用法及源码完全解析_》由会员分享，可在线阅读，更多相关《jQuery中数据缓存$.data的用法及源码完全解析_（31页珍藏版）》请在金锄头文库上搜索。
1、jQuery中数据缓存$.data的用法及源码完全解析_ 这篇文章主要介绍了jQuery中的数据缓存$.data的用法及源码完全解析,深化解读了jQuery对缓存对象的读写和移除的实现,需要的伴侣可以参考下 一、实现原理： 对于DOM元素，通过安排一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来，关联id被附加到以jQuery.expando的值命名的属性上，数据存储在全局缓存对象jQuery.cache中。在读取、设置、移除数据时，将通过关联id从全局缓存对象jQuery.cache中找到关联的数据缓存对象，然后在数据缓存对象上执行读取、设置、移除操作。 对于Javascr
2、ipt对象，数据则挺直存储在该Javascript对象的属性jQuery.expando上。在读取、设置、移除数据时，事实上是对Javascript对象的数据缓存对象执行读取、设置、移除操作。 为了避开jQuery内部用法的数据和用户自定义的数据发生冲突，数据缓存模块把内部数据存储在数据缓存对象上，把自定义数据存储在数据缓存对象的属性data上。 二、总体结构： / 数据缓存 Data jQuery.extend( / 全局缓存对象 cache: , / 唯一 id种子 uuid:0, / 页面中每个jQuery副本的唯一标识 expando: jQuery + ( jQuery.fn.jqu
3、ery + Math.random() ).replace( /D/g, ), / 是否有关联的数据 hasData: function(), / 设置、读取自定数据或内部数据 data: function(elem, name, data, pvt) , / 移除自定义数据或内部数据 removeData: function(elem, name, pvt) , / 设置、读取内部数据 _data: function(elem, name, data) , / 是否可以设置数据 acceptData: function(elem) ); jQuery.fn.extend( / 设置、读取自定
4、义数据，解析HTML5属性data- data: function(key,value), / 移除自定义数据 removeData: function(key) ); / 解析HTML5属性 data- function dataAttr(elem,key,data) / 检查数据缓存对象是否为空 function isEmptyDataObject(obj) jQuery.extend( / 清空数据缓存对象 cleanData: function(elems) ); 三、$.data(elem, name, data), $.data(elem, name) $.data(elem, n
5、ame, data)的用法方法： 假如传入参数name, data, 则设置任意类型的数据 !doctype html html lang=en head meta charset=utf-8 titlejQuery.data demo/title style div color: blue; span color: red; /style script src=/ /head body div The values stored were span/span and span/span /div script var div = $( div ) 0 ; jQuery.data( div,
6、test, first: 16, last: pizza! ); $( span:first ).text( jQuery.data( div, test ).first ); $( span:last ).text( jQuery.data( div, test ).last ); /script /body /html $.data(elem, name)的用法方法： 假如传入key, 未传入参数data, 则读取并返回指定名称的数据 !doctype html html lang=en head meta charset=utf-8 titlejQuery.data demo/title
7、 style div margin: 5px; background: yellow; button margin: 5px; font-size: 14px; p margin: 5px; color: blue; span color: red; /style script src=/ /head body divA div/div buttonGet blah from the div/button buttonSet blah to hello/button buttonSet blah to 86/button buttonRemove blah from the div/butto
8、n pThe blah value of this div is span?/span/p script $( button ).click( function() var value, div = $( div ) 0 ; switch ( $( button ).index( this ) ) case 0 : value = jQuery.data( div, blah ); break; case 1 : jQuery.data( div, blah, hello ); value = Stored!; break; case 2 : jQuery.data( div, blah, 8
9、6 ); value = Stored!; break; case 3 : jQuery.removeData( div, blah ); value = Removed!; break; $( span ).text( + value ); ); /script /body /html $.data(elem, name, data), $.data(elem, name) 源码解析： jQuery.extend( / 1. 定义jQuery.data(elem, name, data, pvt) data: function( elem, name, data, pvt /* Intern
10、al Use Only */ ) / 2. 检查是否可以设置数据 if ( !jQuery.acceptData( elem ) ) return; / 假如参数elem不支持设置数据，则立刻返回 / 3 定义局部变量 var privateCache, thisCache, ret, internalKey = jQuery.expando, getByName = typeof name = string, / We have to handle DOM nodes and JS objects differently because IE6-7 / cant GC object refe
11、rences properly across the DOM-JS boundary isNode = elem.nodeType, / elem是否是DOM元素 / 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, / 假如是DOM元素，为了避开javascript和DOM元素之间循环引用导致的扫瞄器(IE6/7)垃
12、圾回收机制不起作用，要把数据存储在全局缓存对象jQuery.cache中；对于javascript对象，来及回收机制能够自动发生，不会有内存泄露的问题，因此数据可以查收存储在javascript对象上 / 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 internalK
13、ey, isEvents = name = events; / Avoid doing any more work than we need to when trying to get data on an / object that has no data at all / 4. 假如是读取数据，但没有数据，则返回 if ( (!id | !cacheid | (!isEvents !pvt !cacheid.data) getByName data = undefined ) return; / getByName data = undefined 假如name是字符串，data是undefined, 说明是在读取数据 / !id | !cacheid | (!isEvents !pvt !cacheid.data 假如关联id不存在，说明没有数据；假如c
