jQuery 学习笔记：jQuery 代码结构
这是我学习 jQuery 过程中整理的笔记，这一部分主要包括 jQuery 的代码最外层的结构，写出来整理自己的学习成果，有错误欢迎指出。
jQuery 的最外层 $,jQuery
(function (global, factory) {
"use strict";
if (typeof module === "object" && typeof module.exports === "object") { // 判断是否使用 commonjs 环境
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);
}
})(typeof window !== "undefined" ? window : this, function (window, noGlobal){
if (typeof define === "function" && define.amd) { // 是否使用 AMD 模块化规范
define("jquery", [], function () {
return jQuery;
});
}
var
_jQuery = window.jQuery,
_$ = window.$;
jQuery.noConflict = function (deep) {
if (window.$ === jQuery) {
window.$ = _$;
}
if (deep && window.jQuery === jQuery) {
window.jQuery = _jQuery;
}
return jQuery;
};
if (!noGlobal) {
window.jQuery = window.$ = jQuery;
}
return jQuery;
});
上面是 jQuery-3.3.1 的一部分代码，是最外层的一部分，包含了大量的信息。
(function (global, factory) {
})(typeof window !== "undefined" ? window : this, function (window, noGlobal){
});
jQuery 代码包含在一个自执行的函数内，然后返回出一个指向 jQuery 的索引，就形成了一个闭包，利用 jQuery 对象，可以访问定义在自执行函数内的方法，在外面则访问不到，防止变量命名同外界产生冲突，同时，window 对象作为参数传入函数，在函数内，将 jQuery 和 $ 挂载到 window 对象对象上，这样，在外界也可以直接通过 window.$ 和 window.jQuery 访问到 jQuery 对象。通常使用较多的 $，实际指的就是 window.$，但通常会省略掉 window 对象。
if (!noGlobal) {
window.jQuery = window.$ = jQuery; // 将 jQuery 和 $ 挂载到 window 对象对象上
}
return jQuery; // 然后返回出一个指向 jQuery 的索引
同时，为了防止不同库对 $ 的指向产生冲突，jQuery 还可以将 $ 和 jQuery 还原成原来的指向，只要使用 jQuery.noConflict 方法。
var
_jQuery = window.jQuery, // 保存 window.jQuery 的值
_$ = window.$; // 保存 window.$ 的值
jQuery.noConflict = function (deep) {
if (window.$ === jQuery) {
window.$ = _$;
}
if (deep && window.jQuery === jQuery) { // 根据参数判断是否还原 window.jQuery 的值
window.jQuery = _jQuery;
}
return jQuery;
};
先使用 _jQuery 和 _$ 保存 window.jQuery 和 window.$ 的原始值，如果调用 jQuery.noConflict 方法，判断传入的参数，如果参数值为 false，就仅释放 $，还原为原来的值，如果参数值为 true，就将 window.jQuery 也还原为原来的值。
jQuery 函数的重载
jQuery 在使用时，既可以作为一个函数，直接调用 $，传入参数，也可以将其作为对象，调用对象的方法，作为对象的情况之后再讨论，先说将 $ 作为函数使用。
由于 jQuery 中同名函数会覆盖，传入参数不同时，不能从多个同名函数中选择某个函数，而且根据函数名选择唯一的函数，所以当传入参数种类不同时，就需要根据参数的个数，类型等信息判断具体的处理方式了。当调用 jQuery 时，指向的是一个函数。
jQuery = function (selector, context) {
return new jQuery.fn.init(selector, context);
},
会直接返回一个以 jQuery.fn.init 为构造函数，new 出的对象。而在 jQuery.fn.init 函数中，则会根据传入的参数的不同，进行不同的处理。
init = jQuery.fn.init = function (selector, context, root) {
var match, elem;
if (!selector) { // 如果第一个参数为空，直接 return 调用函数的对象
return this;
}
root = root || rootjQuery;
if (typeof selector === "string") {
// 参数为字符串，进行处理
} else if (selector.nodeType) {
// 参数为元素节点，进行处理
} else if (isFunction(selector)) {
//参数为函数，进行处理
}
return jQuery.makeArray(selector, this);
};
init.prototype = jQuery.fn; // 将 init 函数的原型指定为 jQuery.fn，则 init 构造函数 new 出的对象就都可以直接使用 init 函数的原型也就是 jQuery.fn 包含的方法。
当参数为空时，返回 init 函数的调用者，最终，会返回 jQuery，即 $ 对象，可以使用对象上的方法。当第一个参数为字符串时，可以是选择器，html代码（会创建DOM元素并包装成 jQuery 对象），当为 DOM 对象时，包装成 jQuery 对象，当为函数时，$(fn) 相当于 $(document).ready(fn)，会在页面页面 DOM 加载完成后调用 fn，性能上优于 window.onload。
jQuery 插件
上面说到，jQuery 可以作为一个对象，使用其绑定的方法，例如 $.trim 方法，可以去除字符串两边的空格。此外，jQuery 对象的构造函数 init 的原型指向 jQuery.fn，则 DOM 对象被包装成 jQuery 对象后，就可以调用 jQuery.fn 的方法了，例如 $('p').css 方法等。这两种方法都可以添加新的方法，对应了 jQuery 的两种插件。
添加插件使用的是 jQuery.extend 函数，以及 jQuery.fn.extend，其实指向的是同一个函数，只是函数的调用者不同，this 指向就不同了。
$.extend 函数本身可以作为一个工具函数，处理对象的合并，语法 jQuery.extend([deep], target, object1, [objectN])，这个函数会判断第一个参数是否是一个 Boolean 值（可选），如果是，则进行深拷贝，如果不是，则进行浅拷贝。然后根据除了 Boolean 值之外的其他参数的个数，判断是否是添加插件，如果剩余参数不止一个，则第一个作为 target，其他对象的属性将会复制到 target 上，而如果只有一个参数，则会将这个参数对象的方法添加到 jQuery 对象上，或者 jQuery.fn 上，根据调用函数的对象不同决定。例如：
:(function($) {
$.fn.extend({ // 参数对象
'color': function(){ // 对象的属性将会复制到 $.fn 上
// 插件代码
},
'border': function () {
// 插件代码
}
});
})(jQuery);
jQuery 本身的代码中，也大量使用了 $.extend 方法。这个方法可以和 Object.assign() 对照学习。
资料：