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.});