jQuery源码剖析（一）——概览&工具方法

(function( window, undefined ) {
     //用一个函数域包起来，就是所谓的沙箱
     //在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局
     //把当前沙箱需要的外部变量通过函数参数引入进来
     //只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数
    "use strict";
    window.jQuery = window.$ = jQuery;
})( window );

(function( window, undefined ) {
  var a = undefined;
  if (a == undefined){blabla...}
 
  ....
  if (c == undefined) return;
})( window );

(function(w, u) {
  var a = u;
  if (a == u){blabla...}
 
  ....
  if (c == u) return;
})(w);

jQuery.A = function(){};
jQuery.prototype.B = function(){};

Class jQuery{
    public static A(){}
    public B(){}
}

  class2type = {},
  core_deletedIds = [],
  core_version = "1.9.0",
 
  // Save a reference to some core methods
  core_concat = core_deletedIds.concat,
  core_push = core_deletedIds.push,
  core_slice = core_deletedIds.slice,
  core_indexOf = core_deletedIds.indexOf,
  core_toString = class2type.toString,
  core_hasOwn = class2type.hasOwnProperty,
  core_trim = core_version.trim,
 
  //等同以下代码：
  core_concat = Array.prototype.concat, 
  //文章一开始的介绍有稍微提到prototype
  //core_deletedIds是一个数组实例
  //core_deletedIds.concat方法就相当于调了Array类中的成员方法concat。

core_version = "1.9.0",
core_trim = core_version.trim,
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
 
trim: core_trim && !core_trim.call("\uFEFF\xA0") ?
  function( text ) {
    return text == null ?
      "" :
      core_trim.call( text );
  } :
 
  // Otherwise use our own trimming functionality
  function( text ) {
    return text == null ?
      "" :
      ( text + "" ).replace( rtrim, "" );
  }

$.trim = function( text ) {
    return text == null ?
        "" :
        text.trim();
}

$.trim = function( text ) {
    return text == null ?
        "" :
        ( text + "" ).replace( rtrim, "" );
}

//each接受2个参数， 数组[1,2,3],回调函数
$.each([1,2,3], function(key, value){
  console.log("[" + key + "]=" + value);
  return false;
});
//输出：
[0]=1
[1]=2
[2]=3
[1,2,3]
//可以看到回调函数具有两个参数，key是数组的索引，value是对应的元素
 
//each接受3个参数， 数组[1,2,3],回调函数，一个额外的参数数组args=[4,5]
$.each([1,2,3], function(arg1, arg2){
  console.log(this + "," + arg1 + "," + arg2);
}, [4, 5]);
//输出：
1,4,5
2,4,5
3,4,5
[1,2,3]
//可以看到回调函数的两个参数就是each的第三个参数args，在函数里边的this就是遍历元素自己

//其实我觉得jQuery这段each代码写得一点也不好
//代码重复率太高了！我下边对它进行解析并改造
//貌似看注释是为了让代码运行更快，具体没测试。
//源码如下
$.each = function( obj, callback, args ) {
  //obj 是需要遍历的数组或者对象
  //callback是处理数组/对象的每个元素的回调函数，它的返回值实际会中断循环的过程
  //
 
  var value,
    i = 0,
    length = obj.length,
    isArray = isArraylike( obj );//判断是不是数组
 
  if ( args ) {
    if ( isArray ) {//数组
      for ( ; i < length; i++ ) {
        value = callback.apply( obj[ i ], args );
        //相当于:
        //args = [arg1, arg2, arg3];
        //callback(args1, args2, args3)。然后callback里边的this指向了obj[i]
 
        if ( value === false ) {
          //注意到，当callback函数返回值会false的时候，注意是全等！循环结束
          break;
        }
      }
    } else {//非数组
      for ( i in obj ) {//遍历对象的做法
        value = callback.apply( obj[ i ], args );
 
        if ( value === false ) {
          break;
        }
      }
    }
 
  // A special, fast, case for the most common use of each
  } else {
    if ( isArray ) {
      for ( ; i < length; i++ ) {
        value = callback.call( obj[ i ], i, obj[ i ] );
        //相当于callback(i, obj[i])。然后callback里边的this指向了obj[i]
 
        if ( value === false ) {
            break;
          }
        }
      } else {
        for ( i in obj ) {
          value = callback.call( obj[ i ], i, obj[ i ] );
 
          if ( value === false ) {
            break;
          }
        }
      }
    }
 
  return obj;
}

//我改写的版本
//这里并不是代表我的代码没有bug，for in对于数组来说性能比较低而且存在某些bug
//这里想表达的意思只是我希望用更简洁的代码来减少原先代码的重复性
$.each = function( obj, callback, args ) {
  var value,
    i = 0,
    length = obj.length;
 
  for ( i in obj ) {
    value =
      args ?
      callback.apply( obj[ i ], args ) :
      callback.call( obj[ i ], i, obj[ i ] );
 
    if ( value === false ) {
      break;
    }
  }
  return obj;
}

core_deletedIds = [],
core_indexOf = core_deletedIds.indexOf,
//相当于 core_indexOf = Array.indexOf;
 
//elem 规定需检索的值。
//arr 数组
//i 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 arr.length - 1。如省略该参数，则将从数组首元素开始检索。
inArray: function( elem, arr, i ) {
  var len;
 
  if ( arr ) {
    //原生的Array对象支持indexOf方法，直接调用
    if ( core_indexOf ) {
      return core_indexOf.call( arr, elem, i );
    }
 
    len = arr.length;
    //当i为负数的时候，从数组后边len+i的位置开始索引
    i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
 
    for ( ; i < len; i++ ) {
      // Skip accessing in sparse arrays
      //jQuery这里的(i in arr)判断是为了跳过稀疏数组中的元素
      //例如 var arr = []; arr[2] = 1;
      //此时 arr == [undefined, undefined, 1]
      //结果是 => (0 in arr == false) (1 in arr == false) (2 in arr == true)
      //但是不解的是这里
      //测试了一下 $.inArray(undefined, arr, 0)是返回-1的
      //也许你很不解，因为数组中明明第一个元素就是undefined，后边举个例子探讨一下
      if ( i in arr && arr[ i ] === elem ) {
        return i;
      }
    }
  }
 
  //全部都不符合，返回-1
  return -1;
},

$.grep( [0,1,2], function(n,i){
  return n <= 0;
});
//结果是：[0] 
 
$.grep( [0,1,2], function(n,i){
  return n <= 0;
}, true);
//结果是：[1, 2]

grep: function( elems, callback, inv ) {
  var retVal,
    ret = [],
    i = 0,
    length = elems.length;
  inv = !!inv;//转成布尔型
 
  // Go through the array, only saving the items
  // that pass the validator function
  for ( ; i < length; i++ ) {
    retVal = !!callback( elems[ i ], i );//注意这里的callback参数是先value,后key
    if ( inv !== retVal ) {
      ret.push( elems[ i ] );
    }
  }
 
  return ret;
}

merge: function( first, second ) {
  //难道first 跟second参数必须为数组？
  var l = second.length,
    i = first.length,
    j = 0;
 
  //从这个判断来看，second可以是一个对象
  if ( typeof l === "number" ) {//如果second是数组
    for ( ; j < l; j++ ) {
      first[ i++ ] = second[ j ];
    }
  } else {//如果second不是数组
    //假设second = {}; second[0] = 1; second[1] = 2; second[2] = 3;
    //那这里的逻辑也是可以成立的
    while ( second[j] !== undefined ) {
      first[ i++ ] = second[ j++ ];
    }
  }
 
  first.length = i;
 
  return first;
}

$.map( [0,1,2], function(n){
  return n + 4;
});
//结果：[4, 5, 6]

core_deletedIds = [],
core_concat = core_deletedIds.concat,
// arg is for internal usage only
map: function( elems, callback, arg ) {
  var value,
    i = 0,
    length = elems.length,
    isArray = isArraylike( elems ),
    ret = [];
 
  // Go through the array, translating each of the items to their
  if ( isArray ) {
    for ( ; i < length; i++ ) {
      value = callback( elems[ i ], i, arg );
 
      if ( value != null ) {//如果返回值是null,则不加入结果中
        ret[ ret.length ] = value;
      }
    }
 
  // Go through every key on the object,
  } else {
    for ( i in elems ) {
      value = callback( elems[ i ], i, arg );
 
      if ( value != null ) {
        ret[ ret.length ] = value;
      }
    }
  }
 
  // Flatten any nested arrays
  //这里相当于 var a = [];a.concat(ret)
  return core_concat.apply( [], ret );
},

$.map( [0,1,2], function(n){
  return [ n, n + 1 ];
});
//输出：[0, 1, 1, 2, 2, 3]
//如果是return ret的话，输出将会是：[[0,1], [1,2], [2,3]]

makeArray: function( arr, results ) {
  var ret = results || [];//不由得不赞js这个技巧
  //等同于:var ret = (!results) ? [] : results;
 
  if ( arr != null ) {
    if ( isArraylike( Object(arr) ) ) {
      //如果arr是一个类数组对象，调用merge合到返回值
      jQuery.merge( ret,
        typeof arr === "string" ?
        [ arr ] : arr
      );
    } else {//如果不是数组，则将其放到返回数组末尾
      //等同于ret.push(arr);
      core_push.call( ret, arr );
    }
  }
 
  return ret;
},

// Evaluates a script in a global context
// Workarounds based on findings by Jim Driscoll
// http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context
globalEval: function( data ) {
  if ( data && jQuery.trim( data ) ) {
    // We use execScript on Internet Explorer
    // We use an anonymous function so that context is window
    // rather than jQuery in Firefox
    ( window.execScript || function( data ) {
      window[ "eval" ].call( window, data );
    } )( data );
  }
},

globalEval: function( data ) {
  if ( data && jQuery.trim( data ) ) {//data不是空字符串
    var fn = window.execScript;
    //在IE跟旧版本的Chrome是支持此方法的
    if (!window.execScript){//新版浏览器没有此api
      fn = function( data ) {
        window[ "eval" ].call( window, data );
        //这里为何不能直接：eval.call( window, data );
        //查了以下，在chrome一些旧版本里eval.call( window, data )无效 
      }
    }
    fn(data);
  }
},

// Bind a function to a context, optionally partially applying any
// arguments.
proxy: function( fn, context ) {
  var tmp, args, proxy;
 
  if ( typeof context === "string" ) {
    tmp = fn[ context ];
    context = fn;
    fn = tmp;
  }
 
  // Quick check to determine if target is callable, in the spec
  // this throws a TypeError, but we will just return undefined.
  if ( !jQuery.isFunction( fn ) ) {
    return undefined;
  }
 
  // Simulated bind
  //由此看出，proxy的参数必须是2个，否则有无法预料的bug
  args = core_slice.call( arguments, 2 );
  proxy = function(/*arguments*/) {
    //需要注意到的是这里的arguments是当前函数的参数列表
    return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );
  };
 
  // Set the guid of unique handler to the same of original handler, so it can be removed
  //之后再探讨以下guid是做什么的
  proxy.guid = fn.guid = fn.guid || jQuery.guid++;
 
  return proxy;
},

function a(){
  console.log(arguments);//输出[1,2,3,4,5]
}
var b = $.proxy(a, this, 1, 2, 3);//这里arguments = [a, this, 1, 2, 3];
b(4,5);//这里arguments = [4,5];

nodeName: function( elem, name ) {
  //IE下，DOM节点的nodeName是大写的，例如DIV
  //所以统一转成小写再判断
  //这里不return elem.nodeName.toLowerCase();
  //我认为原因是为了保持浏览器自身的对外的规则，避免所有引用nodeName都要做转换的动作
  return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
 
  //可以看到这里的&&使用技巧，以上代码等同于：
  //if (elem.nodeName) return elem.nodeName.toLowerCase() === name.toLowerCase();
  //else return elem.nodeName;
  //如此之简洁
},

typeof 1 == 'number'
typeof {} == 'object'
typeof [] == 'object'
(1).toString() == "1"
({}).toString() == "[object Object]"
//再针对一些边界的测试，
typeof null == "object"
typeof undefined == "undefined"
(null).toString()//非法
(undefined).toString()//非法
 
//再看看很诡异的几个：
([]).toString() == ""
(new Error()).toString() == "Error"
//出现以上两个的结果的原因是，Array跟Error类重写了toSting方法
//如果用Object的toString方法的话，就是一下结果
Object.prototype.toString.call([]) == "[object Array]"
Object.prototype.toString.call(new Error()) == "[object Error]"

// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
  class2type[ "[object " + name + "]" ] = name.toLowerCase();
});
 
$.type = function( obj ) {
  if ( obj == null ) {//如果是null或者undefined，直接转成String返回
    //注意到这里是==而不是===
    return String( obj );
  }
  //RegExp，Array等都属于Object
  //为了精准判断类型，借由Object.prototype.toString跟class2type表
  //这里为什么要用core_toString而不用obj.toString的原因在刚刚试验中说明了
  return typeof obj === "object" || typeof obj === "function" ?
    class2type[ core_toString.call(obj) ] || "object" :
    typeof obj;
},

// See test/unit/core.js for details concerning isFunction.
// Since version 1.3, DOM methods and functions like alert
// aren't supported. They return false on IE (#2968).
isFunction: function( obj ) {
  return jQuery.type(obj) === "function";
},
 
isArray: Array.isArray || function( obj ) {
  return jQuery.type(obj) === "array";
},
 
isWindow: function( obj ) {
  return obj != null && obj == obj.window;
},
 
isNumeric: function( obj ) {
  return !isNaN( parseFloat(obj) ) && isFinite( obj );
},
isPlainObject: function( obj ) {
  // Must be an Object.
  // Because of IE, we also have to check the presence of the constructor property.
  // Make sure that DOM nodes and window objects don't pass through, as well
  if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
    return false;
  }
 
  try {
    // Not own constructor property must be Object
    if ( obj.constructor &&
      !core_hasOwn.call(obj, "constructor") &&
      !core_hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
      return false;
    }
  } catch ( e ) {
    // IE8,9 Will throw exceptions on certain host objects #9897
    return false;
  }
 
  // Own properties are enumerated firstly, so to speed up,
  // if last one is own, then all properties are own.
 
  var key;
  for ( key in obj ) {}
 
  return key === undefined || core_hasOwn.call( obj, key );
},
 
isEmptyObject: function( obj ) {
  var name;
  for ( name in obj ) {
    return false;
  }
  return true;
},

  var Plugin = function(opt){
    //opt为传入的配置
    this.opt = $.extend({
      'title':'默认标题',
      'content':'默认内容'
    }, opt);
  };
 
  var p = new Plugin({title:'传入标题'})

jQuery.extend = jQuery.fn.extend = function() {
  var options, name, src, copy, copyIsArray, clone,
    target = arguments[0] || {},
    i = 1,
    length = arguments.length,
    deep = false;
 
  // Handle a deep copy situation
  if ( typeof target === "boolean" ) {
    //第一个参数表示是否要深递归，类型是布尔值
    deep = target;
    target = arguments[1] || {};
    // skip the boolean and the target
    i = 2;
  }
 
  // Handle case when target is a string or something (possible in deep copy)
  if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
    target = {};
  }
 
  // extend jQuery itself if only one argument is passed
  if ( length === i ) {
    //$("#id").extend(dest)的时候
    target = this;
    --i;
  }
 
  for ( ; i < length; i++ ) {//可以传入多个复制源
    // Only deal with non-null/undefined values
    if ( (options = arguments[ i ]) != null ) {
      // Extend the base object
      //将每个源的属性全部复制到target上
      for ( name in options ) {
        src = target[ name ];
        copy = options[ name ];
 
        // Prevent never-ending loop
        if ( target === copy ) {
          //防止有环，例如 extend(true, target, {'target':target});
          continue;
        }
 
        // Recurse if we're merging plain objects or arrays
        if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
          //如果是深复制
          if ( copyIsArray ) {
            copyIsArray = false;//这句话我认为是多余的。
            //克隆原来target上的原属性
            clone = src && jQuery.isArray(src) ? src : [];
 
          } else {
            clone = src && jQuery.isPlainObject(src) ? src : {};
          }
 
          // Never move original objects, clone them
          //递归深复制
          target[ name ] = jQuery.extend( deep, clone, copy );
 
        // Don't bring in undefined values
        //可以看到undefined的属性对时不会复制到target上的
        } else if ( copy !== undefined ) {
          target[ name ] = copy;
        }
      }
    }
  }
 
  // Return the modified object
  return target;
};