欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery 学习笔记:jQuery 代码结构

程序员文章站 2022-07-24 20:30:14
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出。 jQuery 的最外层 $,jQuery 上面是 jQuery 3.3.1 的一部分代码,是最外层的一部分,包含 ......

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

资料: