jQuery 学习笔记:jQuery 代码结构

时间:2023-11-25 16:53:38

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() 对照学习。

资料: