jQuery源码学习笔记五

在正式深入jQuery的核心功能选择器之前，还有一些方法，基本都是数组方法，用于遴选更具体的需要，如获得某个元素的所有祖选元素啦，等等。接着是其缓存机制data。

001.   //去除两边的空白
002.   trim: function( text ) {
003.     return (text || "").replace( /^\s+|\s+$/g, "" );
004.   },
005.   //转换成数组，很大众的方法
006.   makeArray: function( array ) {
007.     var ret = [];
008.     if( array != null ){
009.       var i = array.length;
010.       // The window, strings (and functions) also have 'length'
011.       if( i == null || typeof array === "string" || jQuery.isFunction(array) || array.setInterval )
012.         ret[0] = array;//就只有一元素
013.       else
014.         while( i )//处理数组
015.           ret[--i] = array[i];
016.     }
017.     return ret;
018.   },
019.   //判断是否在数组中，类似indexOf
020.   inArray: function( elem, array ) {
021.     for ( var i = 0, length = array.length; i < length; i++ )
022.     // Use === because on IE, window == document
023.       if ( array[ i ] === elem )
024.         return i;
025.     return -1;
026.   },
027.   //把新元素或第二个数组加入第一个数组中
028.   //类似数组的concat
029.   merge: function( first, second ) {
030.     // We have to loop this way because IE & Opera overwrite the length
031.     // expando of getElementsByTagName
032.     var i = 0, elem, pos = first.length;
033.     // Also, we need to make sure that the correct elements are being returned
034.     // (IE returns comment nodes in a '*' query)
035.     if ( !jQuery.support.getAll ) {
036.       while ( (elem = second[ i++ ]) != null )
037.         if ( elem.nodeType != 8 )
038.           first[ pos++ ] = elem;
039.     } else
040.       while ( (elem = second[ i++ ]) != null )
041.         first[ pos++ ] = elem;
042.     return first;
043.   },
044.   //过滤重复元素，用done这个普通对象做过滤器（因为键如果同名将被覆盖掉）
045.   unique: function( array ) {
046.     var ret = [], done = {};
047.     try {
048.       for ( var i = 0, length = array.length; i < length; i++ ) {
049.         var id = jQuery.data( array[ i ] );
050.         if ( !done[ id ] ) {
051.           done[ id ] = true;
052.           ret.push( array[ i ] );
053.         }
054.       }
055.     } catch( e ) {
056.       ret = array;
057.     }
058.     return ret;
059.   },
060.   //类似数组的filter,这方法起得真不好，通常这都是与正则有关的……
061.   //$.grep( [0,1,2], function(n,i){
062.   //  return n > 0;
063.   //});
064.   //[1, 2]
065.   grep: function( elems, callback, inv ) {
066.     var ret = [];
067.     // Go through the array, only saving the items
068.     // that pass the validator function
069.     //写法很特别，callback之前的！是为了防止回调函数没有返回值
070.     //javascript默认没有返回值的函数都返回undefined，这样一搞
071.     //就变成true，原来返回true的变成false，我们需要负负得正，中和一下
072.     //于是!=出场了，而inv也是未必存在的，用!强制转换成布尔
073.     for ( var i = 0, length = elems.length; i < length; i++ )
074.       if ( !inv != !callback( elems[ i ], i ) )
075.         ret.push( elems[ i ] );
076.     return ret;
077.   },
078.   //就是数组中的map
079.   map: function( elems, callback ) {
080.     var ret = [];
081.     // Go through the array, translating each of the items to their
082.     // new value (or values).
083.     for ( var i = 0, length = elems.length; i < length; i++ ) {
084.       var value = callback( elems[ i ], i );
085.       if ( value != null )
086.         ret[ ret.length ] = value;
087.     }
088.     return ret.concat.apply( [], ret );
089.   }
090. });
091. // jQuery.browser下面的方法已经被废弃了，这些都是为兼容以前的版本与插件用
092. var userAgent = navigator.userAgent.toLowerCase();
093. // Figure out what browser is being used
094. jQuery.browser = {
095.   version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
096.   safari: /webkit/.test( userAgent ),
097.   opera: /opera/.test( userAgent ),
098.   msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
099.   mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
100. };
101. //把以下方法parent，parents，next……添加到jQuery的原型上去，都是一些过滤方法
102. jQuery.each({
103.   parent: function(elem){return elem.parentNode;},
104.   parents: function(elem){return jQuery.dir(elem,"parentNode");},
105.   next: function(elem){return jQuery.nth(elem,2,"nextSibling");},
106.   prev: function(elem){return jQuery.nth(elem,2,"previousSibling");},
107.   nextAll: function(elem){return jQuery.dir(elem,"nextSibling");},
108.   prevAll: function(elem){return jQuery.dir(elem,"previousSibling");},
109.   siblings: function(elem){return jQuery.sibling(elem.parentNode.firstChild,elem);},
110.   children: function(elem){return jQuery.sibling(elem.firstChild);},
111.   contents: function(elem){return jQuery.nodeName(elem,"iframe")?elem.contentDocument||elem.contentWindow.document:jQuery.makeArray(elem.childNodes);}
112. }, function(name, fn){
113.   jQuery.fn[ name ] = function( selector ) {//方法体
114.     var ret = jQuery.map( this, fn );
115.     if ( selector && typeof selector == "string" )
116.       ret = jQuery.multiFilter( selector, ret );
117.     return this.pushStack( jQuery.unique( ret ), name, selector );
118.   };
119. });
120. //把以下方法appendTo，prependTo，insertBefore……添加到jQuery的原型上去，
121. //利用已有的append，prepend……方法构建
122. jQuery.each({
123.   appendTo: "append",
124.   prependTo: "prepend",
125.   insertBefore: "before",
126.   insertAfter: "after",
127.   replaceAll: "replaceWith"
128. }, function(name, original){
129.   jQuery.fn[ name ] = function( selector ) {
130.     var ret = [], insert = jQuery( selector );
131.     for ( var i = 0, l = insert.length; i < l; i++ ) {
132.       var elems = (i > 0 ? this.clone(true) : this).get();
133.       jQuery.fn[ original ].apply( jQuery(insert[i]), elems );
134.       ret = ret.concat( elems );
135.     }
136.     return this.pushStack( ret, name, selector );
137.   };
138. });
139.  //一些重要常用的静态方法
140.   jQuery.each({
141.     removeAttr: function( name ) {
142.       jQuery.attr( this, name, "" );
143.       if (this.nodeType == 1)
144.         this.removeAttribute( name );
145.     },
146.     addClass: function( classNames ) {
147.       jQuery.className.add( this, classNames );
148.     },
149.     removeClass: function( classNames ) {
150.       jQuery.className.remove( this, classNames );
151.     },
152.     toggleClass: function( classNames, state ) {
153.       if( typeof state !== "boolean" )
154.         state = !jQuery.className.has( this, classNames );
155.       jQuery.className[ state ? "add" : "remove" ]( this, classNames );
156.     },
157.     remove: function( selector ) {
158.       if ( !selector || jQuery.filter( selector, [ this ] ).length ) {
159.         // Prevent memory leaks
160.         jQuery( "*", this ).add([this]).each(function(){
161.           jQuery.event.remove(this);//★★★★★
162.           jQuery.removeData(this);
163.         });
164.         if (this.parentNode)
165.           this.parentNode.removeChild( this );
166.       }
167.     },
168.     empty: function() {
169.       // Remove element nodes and prevent memory leaks
170.       jQuery(this).children().remove();
171.       // Remove any remaining nodes
172.       while ( this.firstChild )
173.         this.removeChild( this.firstChild );
174.     }
175.   }, function(name, fn){
176.     jQuery.fn[ name ] = function(){
177.       return this.each( fn, arguments );
178.     };
179.   });
180.   //将带单位的数值去掉单位
181.   // Helper function used by the dimensions and offset modules
182.   function num(elem, prop) {
183.     return elem[0] && parseInt( jQuery.curCSS(elem[0], prop, true), 10 ) || 0;
184.   }

接着下来看jQuery的缓存机制，jQuery的性能很大部分依仗于它。

001. var expando = "jQuery" + now(), uuid = 0, windowData = {};
002. jQuery.extend({
003.   cache: {},
004.   data: function( elem, name, data ) {
005.     //坚决不染指window
006.     elem = elem == window ?
007.       windowData :
008.       elem;
009.     //在elem上设置一个变量
010.     var id = elem[ expando ];
011.     // Compute a unique ID for the element
012.     if ( !id )
013.     //  同时为id,elem[expando]赋值，值为单一数字
014.       id = elem[ expando ] = ++uuid;
015.     // Only generate the data cache if we're
016.     // trying to access or manipulate it
017.     if ( name && !jQuery.cache[ id ] )
018.     //在jQuery.cache上开辟一个对象，专门用于储存与那个elem有关的东西
019.       jQuery.cache[ id ] = {};
020.     // Prevent overriding the named cache with undefined values
021.     if ( data !== undefined )//data必须定义
022.       jQuery.cache[ id ][ name ] = data;
023.     // Return the named cache data, or the ID for the element
024.     //根据第二个参数是否存在决定返回的是缓存数据还是element的特别ID
025.     return name ?
026.       jQuery.cache[ id ][ name ] :
027.       id;
028.   },
029.   //移除缓存数据
030.   removeData: function( elem, name ) {
031.     elem = elem == window ?
032.       windowData :
033.       elem;
034.     var id = elem[ expando ];
035.     // If we want to remove a specific section of the element's data
036.     if ( name ) {
037.       if ( jQuery.cache[ id ] ) {
038.         // Remove the section of cache data
039.         delete jQuery.cache[ id ][ name ];
040.         // If we've removed all the data, remove the element's cache
041.         name = "";
042.         for ( name in jQuery.cache[ id ] )
043.           break;
044.         if ( !name )
045.           jQuery.removeData( elem );
046.       }
047.       // Otherwise, we want to remove all of the element's data
048.     } else {
049.       // Clean up the element expando
050.       try {
051.         //IE不能直接用delete去移除，要用removeAttribute
052.         delete elem[ expando ];
053.       } catch(e){
054.         // IE has trouble directly removing the expando
055.         // but it's ok with using removeAttribute
056.         if ( elem.removeAttribute )
057.           elem.removeAttribute( expando );
058.       }
059.       // Completely remove the data cache
060.       //用缓存体中把其索引值也移掉
061.       delete jQuery.cache[ id ];
062.     }
063.   },
064.   //缓存元素的类组数属性
065.   //可读写
066.   queue: function( elem, type, data ) {
067.     if ( elem ){
068.       type = (type || "fx") + "queue";
069.       var q = jQuery.data( elem, type );
070.       if ( !q || jQuery.isArray(data) )
071.       //q是数组
072.         q = jQuery.data( elem, type, jQuery.makeArray(data) );
073.       else if( data )
074.         q.push( data );
075.     }
076.     return q;
077.   },
078.   //对元素的类数组缓存进行dequeue（也就是shift）
079.   dequeue: function( elem, type ){
080.     var queue = jQuery.queue( elem, type ),
081.     fn = queue.shift();
082.     if( !type || type === "fx" )
083.       fn = queue[0];
084.     if( fn !== undefined )
085.       fn.call(elem);
086.   }
087. });
088. //让jQuery对象也能获得这种缓存能力
089. //都是用上面静态方法实现，最终的缓存体还是jQuery.cache
090. jQuery.fn.extend({
091.   data: function( key, value ){
092.     var parts = key.split(".");
093.     parts[1] = parts[1] ? "." + parts[1] : "";
094.     if ( value === undefined ) {
095.       var data = this.triggerHandler("getData" + parts[1] + "!", [parts[0]]);
096.       if ( data === undefined && this.length )
097.         data = jQuery.data( this[0], key );
098.       return data === undefined && parts[1] ?
099.         this.data( parts[0] ) :
100.         data;
101.     } else
102.       return this.trigger("setData" + parts[1] + "!", [parts[0], value]).each(function(){
103.         jQuery.data( this, key, value );
104.       });
105.   },
106.   removeData: function( key ){
107.     return this.each(function(){
108.       jQuery.removeData( this, key );
109.     });
110.   },
111.   queue: function(type, data){
112.     if ( typeof type !== "string" ) {
113.       data = type;
114.       type = "fx";
115.     }
116.     if ( data === undefined )
117.       return jQuery.queue( this[0], type );
118.     return this.each(function(){
119.       var queue = jQuery.queue( this, type, data );
120.       if( type == "fx" && queue.length == 1 )
121.         queue[0].call(this);
122.     });
123.   },
124.   dequeue: function(type){
125.     return this.each(function(){
126.       jQuery.dequeue( this, type );
127.     });
128.   }
129. });