jQuery1.11.1源代码初步剖析

jQuery是web程序员的必备js库，估计90%以上的web项目都会用到它。今天周末，心血来潮，打算仔细瞧瞧其庐山真面目。记得以前也对其分析过一次，半途而废了，也没有记录下来。呵呵。废话少说，直接开始。高手请绕行，勿喷，有错误请指正。谢谢。
用eclipse打开jquery-1.11.1.js，源代码如下所示：

(function( global, factory ) {

	if ( typeof module === "object" && typeof module.exports === "object" ) {
		// For CommonJS and CommonJS-like environments where a proper window is present,
		// execute the factory and get jQuery
		// For environments that do not inherently posses a window with a document
		// (such as Node.js), expose a jQuery-making factory as module.exports
		// This accentuates the need for the creation of a real window
		// e.g. var jQuery = require("jquery")(window);
		// See ticket #14549 for more info
		module.exports = global.document ?
			factory( global, true ) :
			function( w ) {
				if ( !w.document ) {
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};
	} else {
		factory( global );
	}

// Pass this if window is not defined yet
}(typeof window !== "undefined" ? window : this, function( window, noGlobal ) {

// Can't do this because several apps including ASP.NET trace
// the stack via arguments.caller.callee and Firefox dies if
// you try to trace through "use strict" call chains. (#13335)
// Support: Firefox 18+
//

var deletedIds = [];

var slice = deletedIds.slice;
... ...

[color=red]1.[/color] 在代码行的第一行的第一个左括号(的右边双击，定位到了代码的最后：

... ...
// Expose jQuery and $ identifiers, even in
// AMD (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
if ( typeof noGlobal === strundefined ) {
	window.jQuery = window.$ = jQuery;
}
return jQuery;
}));

所以整个jquery源代码可以简化为：( ... ... );
就是一个小括号包含了一些javascript的表达式在里面。

[color=red]2.[/color]我们再看看小括号里面是什么东西：

(function( global, factory ) {

在第一行的第一个大括号{右边双击，通过代码定位知道了，这是一个[color=darkred]匿名[/color]函数调用，可以简化为如下所示：

(function( global, factory ) {
   ... ...
}());

[color=red]3.[/color]下面是最重要的：那么上面那个匿名函数的参数是什么呢？其参数的源代码如下：

// Pass this if window is not defined yet
}(typeof window !== "undefined" ? window : this, function( window, noGlobal ) {

很显然，第一个参数很简单：

typeof window !== "undefined" ? window : this

就是全局对象window.
那么第二个参数呢？我们看到了function( window, noGlobal ) {，通过在大括号的右边双击，定位又到了代码的最后。所以第二个参数可以简化成如下所示：

function( window, noGlobal ) {
... ...
if ( typeof noGlobal === strundefined ) {
	window.jQuery = window.$ = jQuery;
}
return jQuery;
}

所以第二个参数是一个函数，注意这里和上面的匿名函数调用不一样，这里没有调用，就是一个函数的定义，所以第二个参数就是一个函数，或者说函数句柄，也就是我们时时刻刻使用的jQuery,或者$，因为window.jQuery = window.$ = jQuery;。所以jQuery和$是等价的。
到了这里，那么整个代码就可以简化成如下：

(function( global, factory ) {
   ... ...
}(window, jQuery));

这里window传给形参global，jQuery传给形参factory。

[color=red]4. [/color]我们把上面我们刚刚得到的简化结果在细化一下，通过阅读代码注释，知道

if ( typeof module === "object" && typeof module.exports === "object" )

上面这个判断是为了适应CommonJS的环境。如果没有CommonJS环境，那么代码就是下面这个样子：

(function( global, factory ) {
  factory( global );
}(window, jQuery));

显然其实就等价于：jQuery(window);
上面的分析，只是理解了jquery中外边的一些枝节。最重要的是理解函数jQuery(window)的定义。

[color=red]5. [/color]上面我们说到了函数function( window, noGlobal ){... ...}就是jQuery的函数定义。
那么：jQuery(window);调用其实就是：jQuery(window, undefined);
也就是： function(window, undefined)();调用。
也就是说noGlobal 参数为的值为undefined.我们Ctrl+F在源代码中查找noGlobal 的有关情况：

function( window, noGlobal ){
// General-purpose constants
strundefined = typeof undefined,
... ...

if ( typeof noGlobal === strundefined ) {
	window.jQuery = window.$ = jQuery;
}
return jQuery;
}

所以函数function( window, noGlobal )的第二个参数用了noGlobal的含义是，是否将jQuery和$等价，并且赋值给全局对象window。[color=red][color=darkred]也就是决定了是否向全局变量中引入jQuery和$这两个全局变量[/color][/color]。

所以如果在CommonJS环境中的话，并没有引入全局变量jQuery和$，而是仅仅将jQuery赋值给了module.exports：

module.exports = global.document ? factory( global, true ) :function( w ) {};

也就是：module.exports = jQuery; 注意这里没有 $ 等价于 jQuery 了。
到了这里，jQuery源代码的外围枝节相关的代码已经分析完成。下面才是最核心的代码。

6. 下面开始看function( window, noGlobal ){... ...}的源代码：

function( window, noGlobal ) {

var deletedIds = [];
var slice = deletedIds.slice;
var concat = deletedIds.concat;
var push = deletedIds.push;
var indexOf = deletedIds.indexOf;
var class2type = {};
var toString = class2type.toString;
var hasOwn = class2type.hasOwnProperty;
var support = {};
var
	version = "1.11.1",
	// Define a local copy of jQuery
	jQuery = function( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		// Need init if jQuery is called (just allow error to be thrown if not included)
		return new jQuery.fn.init( selector, context );
	},
... ...

最上面的几行代码应该是为将javascript中数组和对象的一些原生函数句柄赋值给jQuery 做准备的。
上面的代码明显：jQuery = new jQuery.fn.init( selector, context );
所以关键是jQuery.fn.init( selector, context );的定义。

在源代码中搜索：init 得到下面的代码：

	init = jQuery.fn.init = function( selector, context ) {
		var match, elem;

		// HANDLE: $(""), $(null), $(undefined), $(false)
		if ( !selector ) {
			return this;
		}

		// Handle HTML strings
		if ( typeof selector === "string" ) {
			if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
				// Assume that strings that start and end with <> are HTML and skip the regex check
				match = [ null, selector, null ];

			} else {
				match = rquickExpr.exec( selector );
			}

			// Match html or make sure no context is specified for #id
			if ( match && (match[1] || !context) ) {

				// HANDLE: $(html) -> $(array)
				if ( match[1] ) {
					context = context instanceof jQuery ? context[0] : context;

					// scripts is true for back-compat
					// Intentionally let the error be thrown if parseHTML is not present
					jQuery.merge( this, jQuery.parseHTML(
						match[1],
						context && context.nodeType ? context.ownerDocument || context : document,
						true
					) );

					// HANDLE: $(html, props)
					if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
						for ( match in context ) {
							// Properties of context are called as methods if possible
							if ( jQuery.isFunction( this[ match ] ) ) {
								this[ match ]( context[ match ] );

							// ...and otherwise set as attributes
							} else {
								this.attr( match, context[ match ] );
							}
						}
					}

					return this;

				// HANDLE: $(#id)
				} else {
					elem = document.getElementById( match[2] );

					// Check parentNode to catch when Blackberry 4.6 returns
					// nodes that are no longer in the document #6963
					if ( elem && elem.parentNode ) {
						// Handle the case where IE and Opera return items
						// by name instead of ID
						if ( elem.id !== match[2] ) {
							return rootjQuery.find( selector );
						}

						// Otherwise, we inject the element directly into the jQuery object
						this.length = 1;
						this[0] = elem;
					}

					this.context = document;
					this.selector = selector;
					return this;
				}

			// HANDLE: $(expr, $(...))
			} else if ( !context || context.jquery ) {
				return ( context || rootjQuery ).find( selector );

			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)
			} else {
				return this.constructor( context ).find( selector );
			}

		// HANDLE: $(DOMElement)
		} else if ( selector.nodeType ) {
			this.context = this[0] = selector;
			this.length = 1;
			return this;

		// HANDLE: $(function)
		// Shortcut for document ready
		} else if ( jQuery.isFunction( selector ) ) {
			return typeof rootjQuery.ready !== "undefined" ?
				rootjQuery.ready( selector ) :
				// Execute immediately if ready is not present
				selector( jQuery );
		}

		if ( selector.selector !== undefined ) {
			this.selector = selector.selector;
			this.context = selector.context;
		}

		return jQuery.makeArray( selector, this );
	};

所以：jQuery = function( selector, context ) { ... ...};
也就是jQuery函数就是根据：[color=darkred]选择子selector[/color]在对应的[color=darkred]上下文context[/color]中进行查找，找到之后将其构造成一个jQuery对象返回，这样可以就可以使用这个返回的jQuery对象所具有的各种函数了。其实大多数情况下，我们一般没有传递context改jQuery函数，那么默认context就是document了。最后一行代码：
return jQuery.makeArray( selector, this );
告诉我们，jquery是面向集合（数组）编程的，他返回的都是集合（数组）。
上面这103行代码才是jquery的核心。
对于上面核心代码的分析，下次在具体分析。