jQuery 源码分析6: jQuery 基本静态方法（二）

jQuery.extend({

// 遍历obj的所有值
// args 这参数只能内部调用的会用到
// 注意到,如果回调函数调用失败会直接跳出并中止遍历
// 当有args数组时,使用apply调用,否则使用call调用
each: function( obj, callback, args ) {
     var value,
          i = 0,
          length = obj.length,
          isArray = isArraylike( obj );
      if ( args ) {     // 内部调用时才会有args
          if ( isArray ) {     // obj是Array

               for ( ; i < length; i++ ) {
                    value = callback.apply( obj[ i ], args );
                    if ( value === false ) {
                        break;
                    }
               }
          } else {             // obj是Object


          for ( i in obj ) {

              value = callback.apply( obj[ i ], args );

              if ( value === false ) {

                   break;

              }

          }

          }
    // 最常用的each使用方式
    } else {
         if ( isArray ) {     // obj是Array
              for ( ; i < length; i++ ) {
                   value = callback.call( obj[ i ], i, obj[ i ] );   // 回调函数会获取i 和 对应的属性
                   if ( value === false ) {
                        break;
                   }
              }
         } else {             // obj是Object
              for ( i in obj ) {
                   value = callback.call( obj[ i ], i, obj[ i ] );
                   if ( value === false ) {
                        break;
                   }
              }
          }
     }
     return obj;
},

// 支持: Android<4.1, IE<9
// rtrim = /^[suFEFFxA0]+|[suFEFFxA0]+$/g
// 删除 BOM and NBSP 
trim: function( text ) {
     return text == null ?
            "" :
            ( text + "" ).replace( rtrim, "" );
},

// results参数仅限内部调用
// 将arr变成一个Array
// 如果有results,arr会合并到results后面
// 如果arr是'string',则会转换为[arr]然后合并到Array上
makeArray: function( arr, results ) {
     var ret = results || [];
     if ( arr != null ) {
          if ( isArraylike( Object(arr) ) ) {
               jQuery.merge( ret,
                          typeof arr === "string" ?
                         [ arr ] : arr
               );
          } else {
               push.call( ret, arr );
          }
     }
     return ret;
},

// 判断elem是否在arr这个数组上
// i是检索的起始index
inArray: function( elem, arr, i ) {
     var len;
     if ( arr ) {
          if ( indexOf ) {
               return indexOf.call( arr, elem, i );     // 调用Array.indexOf
          }
          len = arr.length;
          i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;     // 如果i<0,则设i为len+i
          for ( ; i < len; i++ ) {
          // 跳过对稀疏数组的访问?
          // Skip accessing in sparse arrays
               if ( i in arr && arr[ i ] === elem ) {
                    return i;
               }
          }
     }
     return -1;
},

 // 把second合并到first上
merge: function( first, second ) {
    var len = +second.length,
        j = 0,
        i = first.length;
    while ( j < len ) {
        first[ i++ ] = second[ j++ ];
    }
    // 支持: IE<9
    // 如果类数组对象没有length,因此.length不是一个数字,例如NodeLists
    if ( len !== len ) {
         while ( second[j] !== undefined ) {
             first[ i++ ] = second[ j++ ];
         }
    }
    first.length = i;
    return first;
},

// 筛选遍历数组
// callback用于判断是否符合
// invert表示与callback的结果相反，即希望保留callback返回值为false的元素
grep: function( elems, callback, invert ) {
     var callbackInverse,
         matches = [],
         i = 0,
         length = elems.length,
         callbackExpect = !invert;   // invert == true, 表示希望callback返回false
     // 遍历数组,只保留通过筛选的元素
     for ( ; i < length; i++ ) {
         callbackInverse = !callback( elems[ i ], i );
         if ( callbackInverse !== callbackExpect ) {
             matches.push( elems[ i ] );
         }
     }
     return matches;
},

// arg参数只在内部调用时使用
map: function( elems, callback, arg ) {
    var value,
    i = 0,
    length = elems.length,
    isArray = isArraylike( elems ),
    ret = [];
     // 遍历数组,将其转换成新的值并放到ret数组中
    if ( isArray ) {
        for ( ; i < length; i++ ) {
            value = callback( elems[ i ], i, arg );
            if ( value != null ) {
                ret.push( value );
            }
        }
    // 遍历对象的属性,将其转换成新的值并放到ret数组中
    } else {
        for ( i in elems ) {
            value = callback( elems[ i ], i, arg );
            if ( value != null ) {
               ret.push( value );
            }
        }
    }
     // 如果存在嵌套的数组,将其展开
    return concat.apply( [], ret );
},

 // 对象的全局GUID计数器
guid: 1,

 // Bind a function to a context, optionally partially applying any arguments.
// 为一个function绑定一个上下文环境,
proxy: function( fn, context ) {
    var args, proxy, tmp;
    // 处理: $.proxy(context, name)
    if ( typeof context === "string" ) {
        tmp = fn[ context ];      // 从参数context提取一个function
        context = fn;             // 将上下文设置成参数context
        fn = tmp;                 // 将绑定function对象设置为conext[nam]
    }
    
    // 确保fn是一个可调用对象
    // 如果不可调用,返回undefined
    if ( !jQuery.isFunction( fn ) ) {
        return undefined;
    }
    // 模拟上下文绑定
    args = slice.call( arguments, 2 );     // 截取fn所需要的参数
    proxy = function() {
        return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
    };
    // 为唯一的句柄设置guid,这个guid应该与原理fn的guid一样,使得它可以被移除
    proxy.guid = fn.guid = fn.guid || jQuery.guid++;
    return proxy;
},

 // 新建一个时间对象并返回
now: function() {
    return +( new Date() );
},

// jQuery不会在内核中使用,但其他项目会将一些属性设置到support中
support: support

 

});

 

 

总结:

• jQuery.extend在进行扩展的时候，是使用到了深拷贝，这是教科书式的用法，对Object和Array对象进行递归合并，将其中所有的属性都作拷贝。这样做的原因是在JavaScript里，对右值为Object和Array的赋值操作是执行引用而非拷贝，因此必须遍历Object和Array的属性以实现深拷贝；
• 方法重载的技巧再次出现，如jQuery.proxy。重载的实现实际上要对参数类型、参数数量进行判断，以进行不同的处理；
• 为了绑定函数方法的上下文环境，我们可以使用jQuery.proxy，而.proxy的实现使用到了function.apply(conext, args)；
• jQuery.grep的实现也是比较巧妙，添加一个形参invert来进行反向选择，即可以利用一个callback作出双向选择，这也是一个简单而巧妙的技巧。