《jQuery 技术内幕》读书笔记（2）—— 第2章 构造函数 jQuery() 和 jQuery.fn.init()

#《jQuery 技术内幕》读书笔记（2）—— 第2章 构造函数 jQuery() 和 jQuery.fn.init ()

注意：代码部分来自 jquery 1.12.4

1.构造函数 jQuery()

2.总体结构

// 当 jQuery 初始化时，里面的代码被执行
(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 have a `window` with a `document`
		 (such as Node.js), expose a 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 ) {
	// 一堆局部变量申明
	/* 
		1.Define a local copy of jQuery
	*/
	var 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)
		// 为了使用的时候可以省去前面的 new 运算符
		return new jQuery.fn.init( selector, context );
	}
	/* 
		2.覆盖 jQuery() 的原型对象
		jQuery.fn 是 jQuery.prototype 的简写，可以省去几个字
	*/
	jQuery.fn = jQuery.prototype = {
		constructor: jQuery,
		// 一堆原型属性和方法
	}
	/* 
		3.负责解析 selector 和 context 的类型并执行相应的查找
	*/
	var init = jQuery.fn.init = function( selector, context, root ) {}
	/* 
		4.用 jQuery 构造函数的原型对象 jQuery.fn 覆盖 jQuery.fn.init() 的原型对象
	*/
	init.prototype = jQuery.fn;
	/* 
		5.用于合并两个或多个对象的属性到第一个对象
	*/
	jQuery.extend = jQuery.fn.extend = function() {}
	/* 
		6.定义一堆静态属性和方法
	*/
	jQuery.extend( {} )
	/* 
		7.把 jQuery 变量暴露给全局作用域 window， 并定义别名 $
	*/
	if ( !noGlobal ) {
		window.jQuery = window.$ = jQuery;
	}
	return jQuery;
}));

3.jQuery.fn.init ( selector, context, root )

• 参数 selector 和 context 共有 11 个分支

	selector		context	例子	构造函数
1	可以转换为 false		——	$()，$("")，$(undefined)，$(null)，$(false)
2	字符串	#id	undefined	$("#id")	jQuery( selector[, context])
3		选择器表达式	undefined	$("div p")
4		选择器表达式	jQuery 对象	$("div p", $("#id"))
5		选择器表达式	DOM 元素	$("span", this)
6		单独标签	——	$( "<div>") $( "<div>", { "class": "test" })	jQuery( html[, ownerDocument] ) jQuery( html, props)
7		复杂HTML	——	$( "<div id='info'>这是信息</div>" )
8	DOM 元素		——	$( document )	jQuery( element ) jQuery( elementArray ),
9	函数		——	$( function(){ ... } )	jQuery( callback )
10	jQuery 对象		——	$( $("div p") )	jQuery( jQuery object )
11	其他任意对象		——	$( { abc: 123 } ) $( [ 1,2,3 ] )	jQuery( object )

• 11 个分支，判断条件和执行过程

jQuery.fn.init( selector, context, root ) 11个分支
	条件	处理方式
!selector	(""), $(null), $(undefined), $(false)	return this;
字符串的6个分支	#id	document.getElementById this.context = document; this.selector = selector; return this;
	$(selector)	return ( context || root ).find( selector );
	$(selector, $(selector))
	$(selector, context)	return this.constructor( context ).find( selector );
	单独标签	[ context.createElement ] return jQuery.merge( this, [...] );
	复杂 HTML 代码	jQuery.buildFragment return jQuery.merge( this, [...] );
function		return typeof root.ready !== "undefined" ? root.ready( selector ) : // Execute immediately if ready is not present selector( jQuery );
$( $(...) )		this.selector = selector.selector; this.context = selector.context;
其他任意值		return jQuery.makeArray( selector, this );