jQuery 基础知识总结（超级详细(1)，你有过迷茫吗

最新推荐文章于 2022-11-12 11:01:07 发布

m0_60747279

最新推荐文章于 2022-11-12 11:01:07 发布

阅读量205

点赞数

分类专栏：程序员文章标签：后端面试 java

本文链接：https://blog.csdn.net/m0_60747279/article/details/119614013

版权

程序员专栏收录该内容

37 篇文章 0 订阅

订阅专栏

new jQuery.fn.init() 相当于 new jQuery() ;
jQuery() 返回的是 new jQuery.fn.init()，而 var obj = new jQuery()，所以这 2 者是相当的，所以我们可以无 new 实例化 jQuery 对象。

四、jQuery 方法的重载

==============

1、方法重载基本介绍

jQuery 源码晦涩难读的另一个原因是，使用了大量的方法重载，但是用起来却很方便：


// 获取 title 属性的值

$('#id').attr('title');

// 设置 title 属性的值

$('#id').attr('title','jQuery');

 

// 获取 css 某个属性的值

$('#id').css('title');

// 设置 css 某个属性的值

$('#id').css('width','200px');

2、应用场景

方法的重载即是一个方法实现多种功能，经常又是 get 又是 set，虽然阅读起来十分不易，但是从实用性的角度考虑，这也是为什么 jQuery 如此受欢迎的原因，大多数人使用 jQuery() 构造方法使用的最多的就是直接实例化一个 jQuery 对象，但其实在它的内部实现中，有着 9 种不同的方法重载场景：


// 接受一个字符串，其中包含了用于匹配元素集合的 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 API 进行阅读，去了解方法重载了多少种功能，同时我想说的是，jQuery 源码有些方法的实现特别长且繁琐，因为 jQuery 本身作为一个通用性特别强的框架，一个方法兼容了许多情况，也允许用户传入各种不同的参数，导致内部处理的逻辑十分复杂，所以当解读一个方法的时候感觉到了明显的困难，尝试着跳出卡壳的那段代码本身，站在更高的维度去思考这些复杂的逻辑是为了处理或兼容什么，是否是重载，为什么要这样写，一定会有不一样的收获。其次，也是因为这个原因，jQuery 源码存在许多兼容低版本的 HACK 或者逻辑十分晦涩繁琐的代码片段，浏览器兼容这样的大坑极其容易让一个前端工程师不能学到编程的精髓，所以不要太执着于一些边角料，即使兼容性很重要，也应该适度学习理解，适可而止。

五、jQuery.fn.extend 与 jQuery.extend

==================================

1、基本分析

extend 方法在 jQuery 中是一个很重要的方法，jQuey 内部用它来扩展静态方法或实例方法，而且我们开发 jQuery 插件开发的时候也会用到它。但是在内部，是存在 jQuery.fn.extend 和 jQuery.extend 两个 extend 方法的，而区分这两个 extend 方法是理解 jQuery 的很关键的一部分。先看结论：

jQuery.extend(object) 为扩展 jQuery 类本身，为类添加新的静态方法；
jQuery.fn.extend(object) 给 jQuery 对象添加实例方法，也就是通过这个 extend 添加的新方法，实例化的 jQuery 对象都能使用，因为它是挂载在 jQuery.fn 上的方法（上文有提到，jQuery.fn = jQuery.prototype ）。

2、官方解释

它们的官方解释是：

jQuery.extend(): 把两个或者更多的对象合并到第一个当中，
jQuery.fn.extend()：把对象挂载到 jQuery 的 prototype 属性，来扩展一个新的 jQuery 实例方法。

也就是说，使用 jQuery.extend() 拓展的静态方法，我们可以直接使用 $.xxx 进行调用（xxx是拓展的方法名），

而使用 jQuery.fn.extend() 拓展的实例方法，需要使用 $().xxx 调用。

源码解析较长：


// 扩展合并函数

// 合并两个或更多对象的属性到第一个对象中，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;

};

需要注意的是这一句 jQuery.extend = jQuery.fn.extend = function() {} ，也就是 jQuery.extend 的实现和 jQuery.fn.extend 的实现共用了同一个方法，但是为什么能够实现不同的功能了，这就要归功于 Javascript 强大（怪异？）的 this 了。

在 jQuery.extend() 中，this 的指向是 jQuery 对象(或者说是 jQuery 类)，所以这里扩展在 jQuery 上；
在 jQuery.fn.extend() 中，this 的指向是 fn 对象，前面有提到 jQuery.fn = jQuery.prototype ，也就是这里增加的是原型方法，也就是对象方法。

六、jQuery 的链式调用及回溯

=================

另一个让大家喜爱使用 jQuery 的原因是它的链式调用，这一点的实现其实很简单，只需要在要实现链式调用的方法的返回结果里，返回 this ，就能够实现链式调用了。

当然，除了链式调用，jQuery 甚至还允许回溯，看看：


// 通过 end() 方法终止在当前链的最新过滤操作，返回上一个对象集合

$('div').eq(0).show().end().eq(1).hide();

jQuery 完整的链式调用、增栈、回溯通过 return this 、 return this.pushStack() 、return this.prevObject 实现，看看源码实现：

总的来说，

end() 方法返回 prevObject 属性，这个属性记录了上一步操作的 jQuery 对象合集；
而 prevObject 属性由 pushStack() 方法生成，该方法将一个 DOM 元素集合加入到 jQuery 内部管理的一个栈中，通过改变 jQuery 对象的 prevObject 属性来跟踪链式调用中前一个方法返回的 DOM 结果集合
当我们在链式调用 end() 方法后，内部就返回当前 jQuery 对象的 prevObject 属性，完成回溯。

七、jQuery 正则与细节优化

================

不得不提 jQuery 在细节优化上做的很好。也存在很多值得学习的小技巧，下一篇将会以 jQuery 中的一些编程技巧为主题行文，这里就不再赘述。

然后想谈谈正则表达式，jQuery 当中用了大量的正则表达式，我觉得如果研读 jQuery ，正则水平一定能够大大提升，如果是个正则小白，我建议在阅读之前先去了解以下几点：

了解并尝试使用 Javascript 正则相关 API，包括了 test() 、replace() 、match() 、exec() 的用法；
区分上面 4 个方法，哪个是 RegExp 对象方法，哪个是 String 对象方法；
了解简单的零宽断言，了解什么是匹配但是不捕获以及匹配并且捕获。

八、jQuery 变量冲突处理

===============

1、源码分析

最后想提一提 jQuery 变量的冲突处理，通过一开始保存全局变量的 window.jQuery 以及 windw.$ 。

当需要处理冲突的时候，调用静态方法 noConflict()，让出变量的控制权，源码如下：


(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 还原成之前的状况



## 言尽于此，完结

无论是一个初级的 coder，高级的程序员，还是顶级的系统架构师，应该都有深刻的领会到设计模式的重要性。

*   第一，设计模式能让专业人之间交流方便，如下：

程序员A：这里我用了XXX设计模式

程序员B：那我大致了解你程序的设计思路了

*   第二，易维护

项目经理：今天客户有这样一个需求…

程序员：明白了，这里我使用了XXX设计模式，所以改起来很快

*   第三，设计模式是编程经验的总结

程序员A：B，你怎么想到要这样去构建你的代码

程序员B：在我学习了XXX设计模式之后，好像自然而然就感觉这样写能避免一些问题

*   第四，学习设计模式并不是必须的

程序员A：B，你这段代码使用的是XXX设计模式对吗？

程序员B：不好意思，我没有学习过设计模式，但是我的经验告诉我是这样写的

![image](https://img-blog.csdnimg.cn/img_convert/2779f3f59b87121a4bd0090119810add.png)

从设计思想解读开源框架，一步一步到Spring、Spring5、SpringMVC、MyBatis等源码解读，我都已收集整理全套，篇幅有限，这块只是详细的解说了23种设计模式，整理的文件如下图一览无余！

[**资料领取方式：点击这里下载**](https://gitee.com/vip204888/java-p7)

![image](https://img-blog.csdnimg.cn/img_convert/9d1bde2ec2575b28b30ca50562ffc26b.png)

B：那我大致了解你程序的设计思路了

*   第二，易维护

项目经理：今天客户有这样一个需求…

程序员：明白了，这里我使用了XXX设计模式，所以改起来很快

*   第三，设计模式是编程经验的总结

程序员A：B，你怎么想到要这样去构建你的代码

程序员B：在我学习了XXX设计模式之后，好像自然而然就感觉这样写能避免一些问题

*   第四，学习设计模式并不是必须的

程序员A：B，你这段代码使用的是XXX设计模式对吗？

程序员B：不好意思，我没有学习过设计模式，但是我的经验告诉我是这样写的

[外链图片转存中...(img-XZlFXzp2-1628677939955)]

从设计思想解读开源框架，一步一步到Spring、Spring5、SpringMVC、MyBatis等源码解读，我都已收集整理全套，篇幅有限，这块只是详细的解说了23种设计模式，整理的文件如下图一览无余！

[**资料领取方式：点击这里下载**](https://gitee.com/vip204888/java-p7)

[外链图片转存中...(img-ujiXbJUI-1628677939958)]

搜集费时费力，能看到此处的都是真爱！

m0_60747279

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 基础知识总结（超级详细(1)，你有过迷茫吗

new jQuery.fn.init() 相当于 new jQuery() ;jQuery() 返回的是 new jQuery.fn.init()，而 var obj = new jQuery()，所以这 2 者是相当的，所以我们可以无 new 实例化 jQuery 对象。四、jQuery 方法的重载==============1、方法重载基本介绍jQuery 源码晦涩难读的另一个原因是，使用了大量的方法重载，但是用起来却很方便：// 获取 title 属性的值$('#id'..
复制链接

扫一扫