闲话

jquery 的源代码已经到了1.12.0版本号。据官网说1版本号和2版本号若无意外将不再更新，3版本号将做一个架构上大的调整。但预计能兼容IE6-8的。或许这已经是最后的样子了。

我学习jq的时间非常短，应该在1月。那时的版本号还是1.11.3，通过看妙味课堂的公开课视频和文档里的全部api的注解学习。

源代码则是近期些日子直接生啃。跳过了sizzle和文档处理的部分（待业狗压力大。工作以后再看）。关注data、ready、event、queue、Defferred（jq的promise编程）、ajax、animation的处理，初看甚至有点恶心。耐着性子坚持却叹其精妙。在这里记录下来加深印象。

（本文採用 1.12.0 版本号进行解说，用 #number 来标注行号）

jQuery初始化

总体封装上，考虑了两点（写轮子的重要參考）

模块化支持：通过 noGlobal 变量来决定是否绑定到全局变量，返回值为jQuery

冲突避免：保存window.$ window.jQuery，能够调用noConflict 还原，返回jQuery对象。（noGlobal为true时不须要）

主体使用了例如以下结构。抽离 if 分支。仅仅关注主体逻辑的书写

  1. (function( a, fun ) {
  2.     // 推断是否调用、怎样调用fun
  3. })(a, function( _a, _b ) {
  4.     // 详细逻辑
  5. });
  7. /* ---- 差别于例如以下模式 ----*/
  8. (function( _a, _b) {
  9.     if (推断A) {
  10.         // 调整參数或退出
  11.     } else if (推断B) {
  12.         // 调整參数或退出
  13.     } ...
  14.     // 这里開始时详细逻辑
  15. })( a );

[源代码]

  1. (function( global， factory ) {
  3.     if ( typeof module === "object" && typeof module.exports === "object" ) {
  4.         module.exports = global.document ?
  5.             factory( global, true ) :
  6.             // 若无window，则模块存为函数，可取出通过传入window来调用一次
  7.             // noGlobal为false，一定会污染全局
  8.             function( w ) {
  9.                 if ( !w.document ) {
  10.                     throw new Error( "jQuery requires a window with a document" );
  11.                 }
  12.                 return factory( w );
  13.             };
  14.     } else {
  15.         factory( global );
  16.     }
  17. })(typeof window !== "undefined" ?
  19. window : this, function( window, noGlobal ) {
  20.     /* ---- jQuery详细逻辑 ----*/
  21.     ...
  22.     // 对AMD的支持，#10991
  23.     if ( typeof define === "function" && define.amd ) {
  24.         define( "jquery", [], function() {
  25.             return jQuery;
  26.         } );
  27.     }
  28.     // 保存之前的 window.$   window.jQuery
  29.     var _jQuery = window.jQuery,
  30.         _$ = window.$;
  32.     jQuery.noConflict = function() {
  33.         if ( window.$ === jQuery ) {
  34.             window.$ = _$;
  35.         }
  36.         if ( deep && window.jQuery === jQuery ) {
  37.             window.jQuery = _jQuery;
  38.         }
  39.         return jQuery;
  40.     };
  41.     // 模块化时，不设置全局
  42.     if ( !noGlobal ) {
  43.         window.jQuery = window.$ = jQuery;
  44.     }
  45.     return jQuery;
  46. });

jQuery工厂结构

jq为了能有$.func、 $().func两种调用方法，选择了共享 jQuery.prototype，return new jQuery.fn.init

这并非唯一的方式（能够例如以下），之所以选择如此，个人觉得应该是使用频率太高，这样每次能够省掉两次类型推断。

而 jQuery.fn 我想也是起到简写、别名的作用

jQuery.extend/fn.extend 则决定了jq重要的插件扩展机制

  1. var jQuery = function( selector, context ) {
  2.     if ( this instanceof jQuery) {
  3.         return new jQuery( selector, context );
  4.     }
  5.     // 详细逻辑
  6. }

[源代码]

  1. // #71
  2. var jQuery = function( selector, context ) {
  3.     return new jQuery.fn.init( selector, context );
  4. };
  5. // #91, 原型的别名 fn，省字符
  6. jQuery.fn = jQuery.prototype = {
  7.     ...
  8. };
  9. // #175, jQuery 扩展方法extend定义,仅仅填一个參数表示对this进行扩展
  10. jQuery.extend = jQuery.fn.extend = function(){
  11.     ...
  12. };
  13. // #2866, 支持选择器,节点html,element,jq对象,函数
  14. var init = jQuery.init = function( selector, context, root ) {
  15.     ...
  16. };
  17. // #2982, 跟jQuery共享原型对象
  18. init.prototype = jQuery.fn;

jQuery链式调用

精髓：通过 return this , return this.pushStack() , return this.prevObject 实现链式调用、增栈、回溯

[源代码]

  1. // # 122, 创建一层新的堆栈, 并引用 prevObject
  2. pushStack: function( elems ) {
  3.     // merge -> #433, 支持把数组、类数组的0-length项加入到第一个參数
  4.     var ret = jQuery.merge( this.constructor(), elems );
  6.     ret.prevObject = this;
  7.     ret.context = this.context;
  9.     return ret;
  10. };
  12. // #164, 能够回溯上一级 preObject
  13. end: function() {
  14.     return this.preObject || this.constructor();
  15. }
  17. // #3063, 加入到新层 this.constructor()
  18. add: function( selector, context ) {
  19.     return this.pushStack(
  20.         // 去重排序
  21.         jQuery.uniqueSort(
  22.             // 合并到 this.get()
  23.             jQuery.merge( this.get(), jQuery( selector, context ) )
  24.         )
  25.     );
  26. },
  27. addBack: function( selector ) {
  28.     // add将把结果pushStack
  29.     return this.add( selector == null ?
  31. this.preObject :
  32.         // 可做一次过滤
  33.         this.prevObject.filter( selector )
  34.     );
  35. }

看到这，说明你真的是个有耐心的boy了。我们上主菜！

IE内存泄露

讲data缓存前，首先要必须介绍一下IE6-8的内存泄露问题。

IE低版本号dom採用COM组件的形式编写，垃圾清理机制。使用的引用计数的方式，无法正确的处理包括dom元素的环状的循环引用。

即使刷新页面内存也不会被释放。

一般是怎样产生循环引用的呢？

此例中。当前作用域里包括变量a （引用了dom元素），通过绑定事件onclick，使dom引用了事件函数。

可是函数在声明时，会把当前所在活动对象的作用域链保存在自身的scope属性。从而引用了当前环境定义的全部变量。而变量a指向dom。从而产生循环引用。须要手动把变量对dom的引用解除

  1. { // 某个scope作用域
  2.     var a = document.getElementById('id_a');
  3.     // dom -> fun
  4.     a.onclick = function(e) {
  5.     };
  6.     // fun -> a -> dom , 解除对dom元素的引用, fun -> a -X- dom
  7.     a = null;
  8. }

jQuery.data原理

jq内部实现了一个缓存机制，用于分离dom对函数等对象的引用（函数对dom的引用取决于函数本身的特性、定义的位置，这个没法子）。怎样能做到呢？与 策略模式 的思路一致——字符串约定。

  1. jQuery.extend({
  2.     // #247, 构造一个基本不可能被占用的属性, 除去"."
  3.     expando: "jQuery" + ( version + Math.random() ).replace(/\D/g, ""),
  4.     // #507, 全局使用的 guid 号码
  5.     guid: 1,
  6.     // #4014, 缓存空间
  7.     cache: {}
  8. });
  10. /* ---- 原理示意 ---- */
  11. var a = document.getElementById("id_a");
  13. // 每一个元素的 jQuery.expando 分到唯一的 guid 号码
  14. a[jQuery.expando] = a[jQuery.expando] || jQuery.guid++;
  16. // jQuery.cache 上元素的 guid 相应的位置为该对象的缓存空间
  17. jQuery.cache[a[jQuery.expando]] = {};

通过 jQuery.data 的封装能够轻松实现数据的存取，可是这样就结束了么？太天真了！

这样做也会产生衍生的问题。尽管不产生循环引用，但对象绑定在jQuery.cache上。即使dom对象被移除。数据仍然不会因此消失。并且假设是函数，仍然会通过引用环境的变量单向引用着dom，导致dom元素也不消失。尽管刷新后内存会清出，不如循环引用严重，但也是问题了。

看起来仍然须要手动设置变量为null，仿佛回到原点，可是数据还在，比之前更不如。解决方法事实上非常easy，就是移除节点时调用 jQuery.cleanData ，data没有被不论什么对象引用，自然的回收。

可是问题仍然没解决，由于比如绑定事件。即使函数放在jQuery.cache中，也至少有一个触发函数绑定在dom上。因此 jQuery.event.add( elem, types, handler, data, selector ) 中的elem返回前被设为null ，见源代码 #4961。所以如非事事通明。尽量使用jq提供的方式删除节点、绑定事件等

  1. function remove( elem, selector, keepData ) { // #6107, #6255为正式方法
  2.     var node,
  3.         elems = selector ?
  5. jQuery.filter( selector, elem ) : elem,
  6.         i = 0;
  8.     for ( ; ( node = elems[ i ] ) != null; i++ ) {
  10.         if ( !keepData && node.nodeType === 1 ) {
  11.             // 清除数据
  12.             jQuery.cleanData( getAll( node ) );
  13.         }
  15.         if ( node.parentNode ) {
  16.             if ( keepData && jQuery.contains( node.ownerDocument, node ) ) {
  17.                 setGlobalEval( getAll( node, "script" ) );
  18.             }
  19.             // 删除节点
  20.             node.parentNode.removeChild( node );
  21.         }
  22.     }
  24.     return elem;
  25. }

jQuery架构方法

jQuery在此之上考虑了几点：

核心

  1. 对普通对象和dom对象做了区分。由于普通对象的垃圾回收机制（GC）使用的不是引用计数，不会内存泄露。

    其次data机制本身添加了复杂度不说，对象解除引用后绑定的数据还须要手动销毁。反而造成内存的无端占用。

    普通对象绑定在自身的 jQuery.expando 属性上。初始化为 { toJSON: jQuery.noop }，防止序列化时暴露数据。

    dom对象绑定在 jQuery.cache[ ele[jQuery.expando] ] ，初始化为 {}

  2. 私用和公用隔离，如 jQuery.cache[ guid ]、jQuery.cache[ guid ].data。内部的事件、队列等等都使用的私有空间调用 _data 方法，而用户储存数据调用的 data 方法则是私有，由參数 pvt 决定，true代表私有

  3. 当移除数据后。jQuery.cache[ guid ]或 jQuery.cache[ guid ].data对象不再有数据。则移除该对象释放内存。

    且当移除缓存对象时，绑定在elem的事件函数也将被移除

特性

  1. 支持通过简单的自己定义配置来添加不支持缓存的特例类型

  2. 扩展支持读取 elem.attributes 中 data- 前缀定义的数据

  3. 以小驼峰书写为标准读取方式，内部进行相应转换

jQuery.data结构

使用常见的外观模式。定义核心功能。通过再封装实现个性化的使用规则，以供其它模块或外部调用

  • 核心功能：（特点：參数多而全，逻辑负责全面）

    1. jQuery.internalData( elem, name, data, pvt ) 为dom和对象设置data数据。支持 -> 核心12
    2. jQuery.internalRemoveData( elem, name, pvt ) 移除dom或对象上指定属性的data数据-> 核心3
    3. jQuery.cleanData( elems, forceAcceptData ) 由于删除data时还要删除elem本身上绑定的触发事件函数，因此不能简单 delete cache[id]。
    4. 单独封装，被事件系统和 jQuery.internalRemoveData使用 ->核心3

  • 外观：（工具方法、实例方法）

    1. jQuery.hasData( elem ) 直接在相应的 `cache` 中查找。
    2. jQuery._data( elem, name, data )  jQuery.\_removeData( elem, name )`用于内部私有调用。封装了核心方法，简化了传參数量。
    3. jQuery.data( elem, name, data )  jQuery.removeData( elem, name ) 用于外部公共调用。封装了核心方法，简化了传參数量。
    5. jQuery.fn.data( key, value )  jQuery.fn.removeData( key, value ) 封装了 jQuery.data  jQuery.removeData ，遍历this来分别调用

  • 钩子：埋在某个环节直接运行，依据须要实现终止流程、改变特性的功能，或不产生不论什么影响

    1. acceptData( elem ) #3762，特性1。过滤
    2. dataAttr( elem, key, data ) #3780。特性2，data的值不存在则会訪问元素的attribute。返回data，且值会缓存到cache
    3. jQuery.camelCase( string ) #356，特性3。小驼峰

[核心 + 外观 + 钩子] 感觉应该算一种常见好用的架构方式了。

jq中用到了非常多 jQuery.some() -> 核心， jQuery.fn.some() -> 外观 的形式，也都几乎相同。

这里提一下我所理解的钩子，Callback的四个字符串特性就相似于四个钩子。在最常见的几个需求分歧上埋设，发展了观察者模式的4种特性支持，event的众多钩子 标准方式转换 + 个例bug修正 完毕了兼容的大业与主逻辑的统一。

另外不得不提一个在此维度之外的优化方案 —— 提炼反复代码。

核心逻辑是不可省的。通常支持数种方式定义參数，把其变化为某种固定形式的參数传入来运行递归是分离函数内部个性化与核心逻辑的第一步，还能够进一步，抽出此部分逻辑。保持主逻辑的纯粹，变成外观部分内的逻辑进行 功能增强。jq再进了一步，由于大量方法都支持參数推断存取、对象或字符串均可、map映射，分离出 access( elems, fn, key, value, chainable, emptyGet, raw ) #4376，核心 jQuery.xxx()，外观jQuery.fn.xxx() 里调用 access`。

  1. // access( elems, fn, key, value, chainable, emptyGet, raw )
  2. // 直观语义是让forEach( elems, fn( elem, key, value ) ), 支持类型推断实现映射等功能
  4. css: function( name, value ) {  // #7340, 任意举的样例
  6.         // 第二个參数要么是 jQuery.someThing
  7.         // 或者是封装了 jQuery.someThing.apply( ... ) 的函数。内含
  8.         return access( this, function( elem, name, value ) {
  9.             var styles, len,
  10.                 map = {},
  11.                 i = 0;
  13.             // 新增一样仅仅针对css的个性化參数处理
  14.             if ( jQuery.isArray( name ) ) {
  15.                 styles = getStyles( elem );
  16.                 len = name.length;
  18.                 for ( ; i < len; i++ ) {
  19.                     map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );
  20.                 }
  22.                 return map;
  23.             }
  25.             return value !== undefined ?
  26.                 jQuery.style( elem, name, value ) :
  27.                 jQuery.css( elem, name );
  28.         }, name, value, arguments.length > 1 );
  29.     }

可是，data缓存系统并没有这样使用。

原因也非常easy，基础的共性部分支持不同不支持映射，如上面的css是共性同样的情况下能够添加个性，但不同的情况就要又一次抽出、或写在外观里、或写在核心代码里使用递归。

[源代码]

  1. /* ---------------------------------- 1. 相关代码（扫一下） ---------------------------------- */
  3. jQuery.extend({
  4.     // #247, 构造一个基本不可能被占用的属性, 除去"."
  5.     expando: "jQuery" + ( version + Math.random() ).replace(/\D/g, ""),
  6.     // #507, 全局使用的 guid 号码
  7.     guid: 1,
  8.     // #4014, 缓存空间
  9.     cache: {},
  10.     noData: {
  11.         // 为 true 的不能够
  12.         "applet ": true,
  13.         "embed ": true,
  15.         // ...but Flash objects (which have this classid) *can* handle expandos
  16.         "object ": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  17.     },
  18. });
  20. // #3748, support.deleteExpando
  21. ( function() {
  22.     var div = document.createElement( "div" );
  24.     // Support: IE<9
  25.     support.deleteExpando = true;
  26.     try {
  27.         delete div.test;
  28.     } catch ( e ) {
  29.         support.deleteExpando = false;
  30.     }
  32.     // Null elements to avoid leaks in IE.
  33.     div = null;
  34. } )();
  36. // #284, 可用于检測 elem 的公有 cache.data 是否已空
  37. jQuery.isEmptyObject = function( obj ) {
  38.     var name;
  39.     for ( name in obj ) {
  40.         return false;
  41.     }
  42.     return true;
  43. };
  45. // #3814, 检測 elem 的私有 cache 缓存是否已空
  46. function isEmptyDataObject( obj ) {
  47.     var name;
  48.     for ( name in obj ) {
  50.         // if the public data object is empty, the private is still empty
  51.         if ( name === "data" && jQuery.isEmptyObject( obj[ name ] ) ) {
  52.             continue;
  53.         }
  54.         if ( name !== "toJSON" ) {
  55.             return false;
  56.         }
  57.     }
  59.     return true;
  60. }
  62. /* ---------------------------------- 2. 钩子（瞅瞅） ---------------------------------- */
  64. // #3762
  65. var acceptData = function( elem ) {
  67.     // 比对禁止列表 jQuery.noData, 为 true 必定不能
  68.     var noData = jQuery.noData[ ( elem.nodeName + " " ).toLowerCase() ],
  69.         // 普通对象都会按 nodeType = 1 处理，通过筛选
  70.         nodeType = +elem.nodeType || 1;
  72.     return nodeType !== 1 && nodeType !== 9 ?
  74. false :
  76.         // noData不存在（黑名单） 或 存在且classid与noDta同样但不为true（白名单）
  77.         !noData || noData !== true && elem.getAttribute( "classid" ) === noData;
  78. };
  80. function dataAttr( elem, key, data ) {
  82.     // 正确姿势： dataAttr( elem, key, jQuery.data( elem )[ key ] );
  83.     // data 不存在。则查找 HTML5 data-* attribute，并存入 jQuery.data( elem, key, data )
  84.     // 返回 data
  85.     if ( data === undefined && elem.nodeType === 1 ) {
  87.         var name = "data-" + key.replace( /([A-Z])/g, "-$1" ).toLowerCase();
  89.         data = elem.getAttribute( name );
  91.         if ( typeof data === "string" ) {
  92.             try {
  93.                 // "true" -> true , "false" -> false , "23" -> 23
  94.                 // "{ \"a\": 1}" -> {"a": 1}, "[1, '2']" -> [1, '2']
  95.                 // 或 data 本身
  96.                 data = data === "true" ?
  98. true :
  99.                     data === "false" ?
  101. false :
  102.                     data === "null" ? null :
  103.                     +data + "" === data ? +data :
  104.                     /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/.test( data ) ?
  106. jQuery.parseJSON( data ) :
  107.                     data;
  108.             } catch ( e ) {}
  110.             // 保存
  111.             jQuery.data( elem, key, data );
  113.         } else {
  114.             data = undefined;
  115.         }
  116.     }
  118.     return data;
  119. }
  121. // #356, 正则变量替换了，本身在 #80
  122. jQuery.camelCase = function( string ) {
  123.     // -ms-abc -> msAbc , a-abc -> aAbc
  124.     return string.replace( /^-ms-/, "ms-" ).replace( /-([\da-z])/gi, fcamelCase );
  125. };
  127. /* ---------------------------------- 3. 核心（关键） ---------------------------------- */
  129. // #3830, 加入缓存
  130. function internalData( elem, name, data, pvt /* true 为私，存cache；false 为公。存cache.data */ ) {
  131.     // 钩子。黑白名单
  132.     if ( !acceptData( elem ) ) {
  133.         return;
  134.     }
  136.     var ret, thisCache,
  137.         internalKey = jQuery.expando,
  139.         // dom 和 object 区分对待
  140.         isNode = elem.nodeType,
  142.         // object 不缓存，存自身 jQuery.expando 属性上
  143.         cache = isNode ?
  145. jQuery.cache : elem,
  147.         // 没设置过说明 第一次
  148.         id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey;
  150.     // 1. 第一次仅仅能写，不能读。否则 return
  151.     if ( ( !id || !cache[ id ] || ( !pvt && !cache[ id ].data ) ) &&
  152.         data === undefined && typeof name === "string" ) {
  153.         return;
  154.     }
  156.     // 2. 第一次写。先初始化 [ 属性、缓存对象 cache ]
  157.     // dom -> jQuery.cache[ elem[ internalKey ] ]。object -> object[internalKey]
  158.     if ( !id ) {
  160.         // Only DOM nodes need a new unique ID for each element since their data
  161.         // ends up in the global cache
  162.         if ( isNode ) {
  163.             id = elem[ internalKey ] = deletedIds.pop() || jQuery.guid++;
  164.         } else {
  165.             id = internalKey;
  166.         }
  167.     }
  169.     if ( !cache[ id ] ) {
  170.         cache[ id ] = isNode ? {} : { toJSON: jQuery.noop };
  171.     }
  173.     // 3. 写入与读取
  174.     // write特例：支持 name 參数为 { "key" : value } 或 函数。存入数据
  175.     if ( typeof name === "object" || typeof name === "function" ) {
  176.         // 公私不同
  177.         if ( pvt ) {
  178.             cache[ id ] = jQuery.extend( cache[ id ], name );
  179.         } else {
  180.             cache[ id ].data = jQuery.extend( cache[ id ].data, name );
  181.         }
  182.     }
  184.     thisCache = cache[ id ];
  186.     // thisCache 依据pvt索引到了应该被赋值的对象
  187.     if ( !pvt ) {
  188.         if ( !thisCache.data ) {
  189.             thisCache.data = {};
  190.         }
  192.         thisCache = thisCache.data;
  193.     }
  195.     // 写入，小驼峰为标准
  196.     if ( data !== undefined ) {
  197.         thisCache[ jQuery.camelCase( name ) ] = data;
  198.     }
  200.     // Check for both converted-to-camel and non-converted data property names
  201.     // If a data property was specified
  202.     if ( typeof name === "string" ) {
  204.         // 这不是重点。也能够读非驼峰。正常使用并不会有
  205.         ret = thisCache[ name ];
  207.         if ( ret == null ) {
  209.             // 读这里。不管读写，都要读一次
  210.             ret = thisCache[ jQuery.camelCase( name ) ];
  211.         }
  212.     } else {
  213.         // 无 name , 直接读 cache
  214.         ret = thisCache;
  215.     }
  217.     return ret;
  218. }
  220. // #3922, 删除 公/私 缓存属性 或 缓存。
  222. // 删完属性若变空cache，将移去。会处理掉 elem 上 绑定的 event
  223. function internalRemoveData( elem, name, pvt ) {
  225.     // 钩子，黑名单者，直接 return
  226.     if ( !acceptData( elem ) ) {
  227.         return;
  228.     }
  230.     var thisCache, i,
  231.         isNode = elem.nodeType,
  232.         cache = isNode ?
  234. jQuery.cache : elem,
  235.         id = isNode ?
  237. elem[ jQuery.expando ] : jQuery.expando;
  239.     // 缓存空间未初始化，return
  240.     if ( !cache[ id ] ) {
  241.         return;
  242.     }
  244.     // 1. name 存在，删除 name 属性值
  245.     if ( name ) {
  247.         thisCache = pvt ? cache[ id ] : cache[ id ].data;
  249.         if ( thisCache ) {
  251.             // 1.1 支持数组定义多属性，此处把字符串形式也转为数组[name]
  252.             // next step: 统一迭代删除
  253.             if ( !jQuery.isArray( name ) ) {
  255.                 // 这不是重点。也能够读非驼峰。
  257. 正常使用并不会有
  258.                 if ( name in thisCache ) {
  259.                     name = [ name ];
  260.                 } else {
  262.                     // 看这里，转换为小驼峰读
  263.                     name = jQuery.camelCase( name );
  264.                     if ( name in thisCache ) {
  265.                         name = [ name ];
  266.                     } else {
  267.                         // 能够字符串空格隔开多个，均变成小驼峰
  268.                         name = name.split( " " );
  269.                     }
  270.                 }
  271.             } else {
  273.                 // If "name" is an array of keys...
  274.                 // When data is initially created, via ("key", "val") signature,
  275.                 // keys will be converted to camelCase.
  276.                 // Since there is no way to tell _how_ a key was added, remove
  277.                 // both plain key and camelCase key. #12786
  278.                 // This will only penalize the array argument path.
  279.                 name = name.concat( jQuery.map( name, jQuery.camelCase ) );
  280.             }
  282.             // 1.2 删
  283.             i = name.length;
  284.             while ( i-- ) {
  285.                 delete thisCache[ name[ i ] ];
  286.             }
  288.             // 1.3 假设 cache 删除后没空。结束 return
  289.             // 假设空了, 与 name 不存在的情况一样直接删除 data
  290.             if ( pvt ? !isEmptyDataObject( thisCache ) : !jQuery.isEmptyObject( thisCache ) ) {
  291.                 return;
  292.             }
  293.         }
  294.     }
  296.     // 2. 依据 pvt 推断，false 删除公有
  297.     if ( !pvt ) {
  298.         delete cache[ id ].data;
  300.         // cache 还没空，能够闪了，return
  301.         // cache 空了，合并到 pvt 为true，私有cache 删除
  302.         if ( !isEmptyDataObject( cache[ id ] ) ) {
  303.             return;
  304.         }
  305.     }
  307.     // 3. pvt 为 true, 删除私有 cache
  308.     // 3.1 为节点时。若cache[events]里还有事件，把 elem 绑定的事件函数删除
  309.     if ( isNode ) {
  310.         jQuery.cleanData( [ elem ], true );
  312.     // 3.2 普通对象时
  313.     } else if ( support.deleteExpando || cache != cache.window ) {
  314.         // 能删则 delete
  315.         delete cache[ id ];
  317.     // 不能删, undefined
  318.     } else {
  319.         cache[ id ] = undefined;
  320.     }
  321. }
  323. // #6192, 函数内包括 删除事件队列时删除elem相应type的绑定事件 的功能
  324. // cleanData 不仅被 internalRemoveData 内部调用，remove节点的时候也$().remove调用，因此支持了elems 数组
  325. jquery.cleanData = function( elems, /* internal */ forceAcceptData ) {
  326.     var elem, type, id, data,
  327.         i = 0,
  328.         internalKey = jQuery.expando,
  329.         cache = jQuery.cache,
  330.         attributes = support.attributes,
  331.         special = jQuery.event.special;
  333.     // 支持 elems 数组迭代
  334.     for ( ; ( elem = elems[ i ] ) != null; i++ ) {
  335.         // 钩子
  336.         if ( forceAcceptData || acceptData( elem ) ) {
  338.             id = elem[ internalKey ];
  339.             data = id && cache[ id ];
  341.             if ( data ) {
  342.                 // 1. 存在事件队列
  343.                 if ( data.events ) {
  345.                     // 迭代，删除绑在 elem 上的触发函数
  346.                     for ( type in data.events ) {
  348.                         // 尽管绑定在data上的事件。都转换成标准的 eventType
  349.                         // 但标准的 eventtype 可能不被兼容
  350.                         // special.setup 钩子在绑定触发函数时会hack一次
  351.                         // 须要该方法找到绑定在elem上事件触发函数的真正类型并删除
  352.                         if ( special[ type ] ) {
  353.                             jQuery.event.remove( elem, type );
  355.                         // 普通情况，直接删除
  356.                         } else {
  357.                             jQuery.removeEvent( elem, type, data.handle );
  358.                         }
  359.                     }
  360.                 }
  362.                 // 2. 不存在（或已删去）事件队列
  363.                 if ( cache[ id ] ) {
  365.                     delete cache[ id ];
  367.                     // Support: IE<9
  368.                     // IE does not allow us to delete expando properties from nodes
  369.                     // IE creates expando attributes along with the property
  370.                     // IE does not have a removeAttribute function on Document nodes
  371.                     if ( !attributes && typeof elem.removeAttribute !== "undefined" ) {
  372.                         elem.removeAttribute( internalKey );
  374.                     } else {
  375.                         elem[ internalKey ] = undefined;
  376.                     }
  378.                     deletedIds.push( id );
  379.                 }
  380.             }
  381.         }
  382.     }
  383. }
  385. /* ---------------------------------- 4. 外观（接口API） ---------------------------------- */
  387. // #4013
  388. jQuery.extend( {
  389.     // cache、noData 上面已经提前写了
  390.     cache: {},
  391.     noData: {
  392.         "applet ": true,
  393.         "embed ": true,
  394.         "object ": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  395.     },
  397.     // 直接从缓存 cache 查找推断。dom 与 object差别对待
  398.     hasData: function( elem ) {
  399.         elem = elem.nodeType ?
  401. jQuery.cache[ elem[ jQuery.expando ] ] : elem[ jQuery.expando ];
  402.         return !!elem && !isEmptyDataObject( elem );
  403.     },
  405.     // 公用。pvt 无
  406.     data: function( elem, name, data ) {
  407.         return internalData( elem, name, data );
  408.     },
  410.     removeData: function( elem, name ) {
  411.         return internalRemoveData( elem, name );
  412.     },
  414.     // 私用，pvt true
  415.     _data: function( elem, name, data ) {
  416.         return internalData( elem, name, data, true );
  417.     },
  419.     _removeData: function( elem, name ) {
  420.         return internalRemoveData( elem, name, true );
  421.     }
  422. } );
  424. // #4049，实例方法
  425. jQuery.fn.extend( {
  426.     data: function( key, value ) {
  427.         var i, name, data,
  428.             elem = this[ 0 ],
  429.             attrs = elem && elem.attributes;
  431.         // Special expections of .data basically thwart jQuery.access,
  432.         // so implement the relevant behavior ourselves
  434.         // 1. key不存在。
  436. 获得 data缓存 全部值
  437.         if ( key === undefined ) {
  438.             if ( this.length ) {
  439.                 data = jQuery.data( elem );
  441.                 if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) {
  442.                     i = attrs.length;
  443.                     while ( i-- ) {
  445.                         // Support: IE11+
  446.                         // The attrs elements can be null (#14894)
  447.                         if ( attrs[ i ] ) {
  448.                             name = attrs[ i ].name;
  449.                             if ( name.indexOf( "data-" ) === 0 ) {
  450.                                 name = jQuery.camelCase( name.slice( 5 ) );
  452.                                 // 钩子，data[name]若无。则搜索data- attribute，并赋值给 data[ name ]
  453.                                 dataAttr( elem, name, data[ name ] );
  454.                             }
  455.                         }
  456.                     }
  457.                     jQuery._data( elem, "parsedAttrs", true );
  458.                 }
  459.             }
  461.             return data;
  462.         }
  464.         // 2. key 是 "object"
  465.         // internalData 已经支持了 "object" 參数。因此直接迭代
  466.         if ( typeof key === "object" ) {
  467.             return this.each( function() {
  468.                 jQuery.data( this, key );
  469.             } );
  470.         }
  472.         return arguments.length > 1 ?
  474. // 3. 迭代写入 key -> value
  475.             this.each( function() {
  476.                 jQuery.data( this, key, value );
  477.             } ) :
  479.             // 4. 读取 key 属性值, 没有则尝试读data- attribute，并赋值给 data[ name ]
  480.             elem ? dataAttr( elem, key, jQuery.data( elem, key ) ) : undefined;
  481.     },
  483.     removeData: function( key ) {
  484.         return this.each( function() {
  485.             jQuery.removeData( this, key );
  486.         } );
  487.     }
  488. } );

最后再说几点：

  1. $(elem).data("key", "name") 与 $.data($(elem), "key", "name") 的差别是前者内部元素被迭代。绑定在元素（dom）上，而后者绑定在 $(elem) 对象（object）上，差别不言自明。

  2. 对于支持对象等多种參数形式的逻辑本身很多其它放在外观里。这里在 internalData。由于公有私有不止一个外观，避免反复要么抽出相似 access 使用。要么放到公共方法中。而之所以不放在终于的实例 data 方法中，由于工具方法已经在jq模块内部被多次使用了，这样能够有效简化内部操作。

  3. dataAtrr 之所以在实例 data 方法中才出现被使用。是由于仅仅实用户调用的时候dom才载入完呀，才会产生这个须要。

jQuery源代码解析（1）—— jq基础、data缓存系统的更多相关文章

  1. jQuery源代码解析（3）—— ready载入、queue队列

    ready.queue放在一块写,没有特殊的意思,仅仅是相对来说它俩可能源代码是最简单的了.ready是在dom载入完毕后.以最高速度触发,非常实用. queue是队列.比方动画的顺序触发就是通过默认 ...

  2. jQuery源代码 解析一 工具方法

    1. 外层沙箱以及命名空间$ 几乎稍微有点经验前端人员都这么做,为了避免声明了一些全局变量而污染,把代码放在一个"沙箱执行",然后在暴露出命名空间(可以为API,函数,对象): 2 ...

  3. convnet源代码解析(一)：基础准备

    Jeremy Lin ConvNet是一个基于GPU实现的卷积神经网络开源码(C++11).是由多伦多大学的Geoffrey Hinton深度学习团队编写的,它的最初版本号是Hinton的学生Alex ...

  4. jQuery源代码阅读之三——jQuery实例方法和属性

    jQuery实例方法及属性相关的代码结构如下 jQuery.fn=jQuery.prototype={ jQuery:core_version, constructor:jQuery, selecto ...

  5. Spark MLlib LDA 源代码解析

    1.Spark MLlib LDA源代码解析 http://blog.csdn.net/sunbow0 Spark MLlib LDA 应该算是比較难理解的,当中涉及到大量的概率与统计的相关知识,并且 ...

  6. jQuery源代码学习之六——jQuery数据缓存Data

    一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所 ...

  7. jQuery源码解读 - 数据缓存系统：jQuery.data

    jQuery在1.2后引入jQuery.data(数据缓存系统),主要的作用是让一组自定义的数据可以DOM元素相关联——浅显的说:就是让一个对象和一组数据一对一的关联. 一组和Element相关的数据 ...

  8. jQuery.data的是jQuery的数据缓存系统

    jQuery.Data源码 jQuery.data的是jQuery的数据缓存系统 jQuery.data的是jQuery的数据缓存系统.它的主要作用就是为普通对象或者DOM元素添加数据. 1 内部存储 ...

  9. Android源代码解析之（七）--&gt;LruCache缓存类

    转载请标明出处:一片枫叶的专栏 android开发过程中常常会用到缓存.如今主流的app中图片等资源的缓存策略通常是分两级.一个是内存级别的缓存,一个是磁盘级别的缓存. 作为android系统的维护者 ...

随机推荐

  1. R in action读书笔记（4）-第六章：基本图形（下）

    6.3直方图 hist() 其中的x是一个由数据值组成的数值向量.参数freq=FALSE表示根据概率密度而不是频数绘制图形.参数breaks用于控制组的数量.在定义直方图中的单元时,默认将生成等距切 ...

  2. vs2015 qt5.8新添加文件时出现“无法找到源文件ui.xxx.h”

    转载请注明出处:http://www.cnblogs.com/dachen408/p/7147135.html vs2015 qt5.8新添加文件时出现“无法找到源文件ui.xxx.h” 暂时解决版本 ...

  3. JavaScript——分页

  4. Farseer.net轻量级开源框架 中级篇：UrlRewriter 地址重写

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 中级篇: Cookies.Session.Request 下一篇:Farseer.net轻量 ...

  5. tomcat不打印日志

    commons-logging.jar导入这个包到tomcat  lib下 2.修改tomcat的bin目录下面的catalina.bat文件   只需修改:set CLASSPATH=%CLASSP ...

  6. redisd的非持久化配置

    如何关闭redis持久化?我的需求是只把redis当作缓存来用,所以持久化到硬盘对我的需求来说没有意义. 修改redis配置文件,redis.conf 第115行左右. 1.注释掉原来的持久化规则 # ...

  7. 谈谈JVM垃圾回收机制及垃圾回收算法

    一.垃圾回收机制的意义 Java语言中一个显著的特点就是引入了垃圾回收机制,使c++程序员最头疼的内存管理的问题迎刃而解,它使得Java程序员在编写程序的时候不再需要考虑内存管理.由于有个垃圾回收机制 ...

  8. IDEA基本使用及配置（1）

    前言:现在IDEA用的人很多,我以前都是用Eclipse的,都说这个IDE比较智能.好用,于是学习一下. IDEA与Eclipse目录结构对比: IDEA中的Project相当于Eclispe中的wo ...

  9. web前端开发——css

    一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得 ...

  10. IIS 注册.NET Framework 4.0 命令

    cmd执行以下命令 32位Windows:C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe -i 64位Windows:C ...