【深入浅出jQuery】源码浅析--整体架构

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

(function(window) {
   // JS代码
})(window, undefined);

undefined = 42
console.log(undefined) // 42

// 压缩策略
// w -> windwow , u -> undefined
(function(w, u) {

})(window);

// 无 new 构造
$('#test').text('Test');

// 当然也可以使用 new
var test = new $('#test');
test.text('Test');

(function(window, undefined) {
	var 
	// ...
	jQuery = function(selector, context) {
		// The jQuery object is actually just the init constructor 'enhanced'
		// 看这里，实例化方法 jQuery() 实际上是调用了其拓展的原型方法 jQuery.fn.init
		return new jQuery.fn.init(selector, context, rootjQuery);
	},

	// jQuery.prototype 即是 jQuery 的原型，挂载在上面的方法，即可让所有生成的 jQuery 对象使用
	jQuery.fn = jQuery.prototype = {
		// 实例化化方法，这个方法可以称作 jQuery 对象构造器
		init: function(selector, context, rootjQuery) {
			// ... 
		}
	}
	// 这一句很关键，也很绕
	// jQuery 没有使用 new 运算符将 jQuery 实例化，而是直接调用其函数
	// 要实现这样,那么 jQuery 就要看成一个类，且返回一个正确的实例
	// 且实例还要能正确访问 jQuery 类原型上的属性与方法
	// jQuery 的方式是通过原型传递解决问题，把 jQuery 的原型传递给jQuery.prototype.init.prototype
	// 所以通过这个方法生成的实例 this 所指向的仍然是 jQuery.fn，所以能正确访问 jQuery 类原型上的属性与方法
	jQuery.fn.init.prototype = jQuery.fn;

})(window);

// 获取 title 属性的值
$('#id').attr('title');
// 设置 title 属性的值
$('#id').attr('title','jQuery');

// 获取 css 某个属性的值
$('#id').css('title');
// 设置 css 某个属性的值
$('#id').css('width','200px');

// 接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器
jQuery([selector,[context]])
// 传入单个 DOM 
jQuery(element)
// 传入 DOM 数组
jQuery(elementArray)
// 传入 JS 对象
jQuery(object)
// 传入 jQuery 对象
jQuery(jQuery object)
// 传入原始 HTML 的字符串来创建 DOM 元素
jQuery(html,[ownerDocument])
jQuery(html,[attributes])
// 传入空参数
jQuery()
// 绑定一个在 DOM 文档载入完成后执行的函数
jQuery(callback)

// 扩展合并函数
// 合并两个或更多对象的属性到第一个对象中，jQuery 后续的大部分功能都通过该函数扩展
// 虽然实现方式一样，但是要注意区分用法的不一样，那么为什么两个方法指向同一个函数实现，但是却实现不同的功能呢,
// 阅读源码就能发现这归功于 this 的强大力量
// 如果传入两个或多个对象，所有对象的属性会被添加到第一个对象 target
// 如果只传入一个对象，则将对象的属性添加到 jQuery 对象中，也就是添加静态方法
// 用这种方式，我们可以为 jQuery 命名空间增加新的方法，可以用于编写 jQuery 插件
// 如果不想改变传入的对象，可以传入一个空对象：$.extend({}, object1, object2);
// 默认合并操作是不迭代的，即便 target 的某个属性是对象或属性，也会被完全覆盖而不是合并
// 如果第一个参数是 true，则是深拷贝
// 从 object 原型继承的属性会被拷贝，值为 undefined 的属性不会被拷贝
// 因为性能原因，JavaScript 自带类型的属性不会合并
jQuery.extend = jQuery.fn.extend = function() {
	var src, copyIsArray, copy, name, options, clone,
		target = arguments[0] || {},
		i = 1,
		length = arguments.length,
		deep = false;

	// Handle a deep copy situation
	// target 是传入的第一个参数
	// 如果第一个参数是布尔类型，则表示是否要深递归，
	if (typeof target === "boolean") {
		deep = target;
		target = arguments[1] || {};
		// skip the boolean and the target
		// 如果传了类型为 boolean 的第一个参数，i 则从 2 开始
		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
	// 如果参数的长度为 1 ，表示是 jQuery 静态方法
	if (length === i) {
		target = this;
		--i;
	}

	// 可以传入多个复制源
	// i 是从 1或2 开始的
	for (; i < length; i++) {
		// Only deal with non-null/undefined values
		// 将每个源的属性全部复制到 target 上
		if ((options = arguments[i]) != null) {
			// Extend the base object
			for (name in options) {
				// src 是源（即本身）的值
				// copy 是即将要复制过去的值
				src = target[name];
				copy = options[name];

				// Prevent never-ending loop
				// 防止有环，例如 extend(true, target, {'target':target});
				if (target === copy) {
					continue;
				}

				// Recurse if we're merging plain objects or arrays
				// 这里是递归调用，最终都会到下面的 else if 分支
				// jQuery.isPlainObject 用于测试是否为纯粹的对象
				// 纯粹的对象指的是 通过 "{}" 或者 "new Object" 创建的
				// 如果是深复制
				if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
					// 数组
					if (copyIsArray) {
						copyIsArray = false;
						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
					// 最终都会到这条分支
					// 简单的值覆盖
				} else if (copy !== undefined) {
					target[name] = copy;
				}
			}
		}
	}

	// Return the modified object
	// 返回新的 target
	// 如果 i < length ，是直接返回没经过处理的 target，也就是 arguments[0]
	// 也就是如果不传需要覆盖的源，调用 $.extend 其实是增加 jQuery 的静态方法
	return target;
};

// 通过 end() 方法终止在当前链的最新过滤操作，返回上一个对象集合
$('div').eq(0).show().end().eq(1).hide();

jQuery.fn = jQuery.prototype = { 
	// 将一个 DOM 元素集合加入到 jQuery 栈
	// 此方法在 jQuery 的 DOM 操作中被频繁的使用, 如在 parent(), find(), filter() 中
	// pushStack() 方法通过改变一个 jQuery 对象的 prevObject 属性来跟踪链式调用中前一个方法返回的 DOM 结果集合
	// 当我们在链式调用 end() 方法后, 内部就返回当前 jQuery 对象的 prevObject 属性
	pushStack: function(elems) {
		// 构建一个新的jQuery对象，无参的 this.constructor()，只是返回引用this
		// jQuery.merge 把 elems 节点合并到新的 jQuery 对象
		// this.constructor 就是 jQuery 的构造函数 jQuery.fn.init，所以 this.constructor() 返回一个 jQuery 对象
		// 由于 jQuery.merge 函数返回的对象是第二个函数附加到第一个上面，所以 ret 也是一个 jQuery 对象，这里可以解释为什么 pushStack 出入的 DOM 对象也可以用 CSS 方法进行操作
		var ret = jQuery.merge(this.constructor(), elems);

		// 给返回的新 jQuery 对象添加属性 prevObject
		// 所以也就是为什么通过 prevObject 能取到上一个合集的引用了
		ret.prevObject = this;
		ret.context = this.context;

		// Return the newly-formed element set
		return ret;
	},
	// 回溯链式调用的上一个对象
	end: function() {
		// 回溯的关键是返回 prevObject 属性
		// 而 prevObject 属性保存了上一步操作的 jQuery 对象集合
		return this.prevObject || this.constructor(null);
	},
	// 取当前 jQuery 对象的第 i 个
	eq: function(i) {
		// jQuery 对象集合的长度
		var len = this.length,
			j = +i + (i < 0 ? len : 0);

		// 利用 pushStack 返回
		return this.pushStack(j >= 0 && j < len ? [this[j]] : []);
	},	
}

(function(window, undefined) {
	var
		// Map over jQuery in case of overwrite
		// 设置别名，通过两个私有变量映射了 window 环境下的 jQuery 和 $ 两个对象，以防止变量被强行覆盖
		_jQuery = window.jQuery,
		_$ = window.$;

	jQuery.extend({
		// noConflict() 方法让出变量 $ 的 jQuery 控制权，这样其他脚本就可以使用它了
		// 通过全名替代简写的方式来使用 jQuery 
		// deep -- 布尔值，指示是否允许彻底将 jQuery 变量还原(移交 $ 引用的同时是否移交 jQuery 对象本身)
		noConflict: function(deep) {
			// 判断全局 $ 变量是否等于 jQuery 变量
			// 如果等于，则重新还原全局变量 $ 为 jQuery 运行之前的变量（存储在内部变量 _$ 中）
			if (window.$ === jQuery) {
				// 此时 jQuery 别名 $ 失效
				window.$ = _$;
			}
			// 当开启深度冲突处理并且全局变量 jQuery 等于内部 jQuery，则把全局 jQuery 还原成之前的状况
			if (deep && window.jQuery === jQuery) {
				// 如果 deep 为 true，此时 jQuery 失效
				window.jQuery = _jQuery;
			}

			// 这里返回的是 jQuery 库内部的 jQuery 构造函数（new jQuery.fn.init()） 
			// 像使用 $ 一样尽情使用它吧
			return jQuery;
		}
	})
}(window)

// 让出 jQuery 、$ 的控制权不代表不能使用 jQuery 和 $ ，方法如下：
var query = jQuery.noConflict(true);

(function($) { 

// 插件或其他形式的代码，也可以将参数设为 jQuery
})(query);

//  ... 其他用 $ 作为别名的库的代码