学习 jQuery 源码整体架构，打造属于自己的 js 类库

虽然现在基本不怎么使用 jQuery 了，但 jQuery 流行 10多年 的 JS库 ，还是有必要学习它的源码的。也可以学着打造属于自己的 js 类库，求职面试时可以增色不少。

本文章学习的是 v3.4.1 版本。 unpkg.com 源码地址：https://unpkg.com/jquery@3.4.1/dist/jquery.js

jQuery github 仓库

自执行匿名函数

外界访问不到里面的变量和函数，里面可以访问到外界的变量，但里面定义了自己的变量，则不会访问外界的变量。匿名函数将代码包裹在里面，防止与其他代码冲突和污染全局环境。关于自执行函数不是很了解的读者可以参看这篇文章。[译] JavaScript：立即执行函数表达式（IIFE）

浏览器环境下，最后把 $ 和 jQuery 函数挂载到 window 上，所以在外界就可以访问到 $ 和 jQuery 了。

支持多种环境下使用 比如 commonjs、amd规范

commonjs 规范支持

commonjs 实现 主要代表 nodejs

amd 规范 主要代表 requirejs

cmd 规范 主要代表 seajs

很遗憾， jQuery 源码里没有暴露对 seajs 的支持。但网上也有一些方案。这里就不具体提了。毕竟现在基本不用 seajs 了。

无 new 构造

实际上也是可以 new 的，因为 jQuery 是函数。而且和不用 new 效果是一样的。new显示返回对象，所以和直接调用 jQuery 函数作用效果是一样的。如果对 new 操作符具体做了什么不明白。可以参看我之前写的文章。

面试官问：能否模拟实现JS的new操作符

源码：

关于这个笔者画了一张 jQuery 原型关系图，所谓一图胜千言。

jquery-v3.4.1 原型关系图

Vue 源码中，也跟 jQuery 类似，执行的是 Vue.prototype._init 方法。

核心函数之一 extend

用法：

jQuery.extend APIjQuery.fn.extend API

看几个例子：（例子可以我放到在线编辑代码的jQuery.extend例子codepen了，可以直接运行）。

结论： extend 函数既可以实现给 jQuery 函数可以实现浅拷贝、也可以实现深拷贝。可以给jQuery上添加静态方法和属性，也可以像 jQuery.fn (也就是 jQuery.prototype )上添加属性和方法，这个功能归功于 this ， jQuery.extend 调用时 this 指向是 jQuery ， jQuery.fn.extend 调用时 this 指向则是 jQuery.fn 。

浅拷贝实现

知道这些，其实实现浅拷贝还是比较容易的：

深拷贝则主要是在以下这段代码做判断。可能是数组和对象引用类型的值，做判断。

为了方便读者调试，代码同样放在jQuery.extend浅拷贝代码实现codepen，可在线运行。

深拷贝实现

为了方便读者调试，这段代码同样放在jQuery.extend深拷贝代码实现codepen，可在线运行。

深拷贝衍生的函数 isFunction

判断参数是否是函数。

深拷贝衍生的函数 jQuery.isPlainObject

jQuery.isPlainObject(obj) 测试对象是否是纯粹的对象（通过 “{}” 或者 “new Object” 创建的）。

extend 函数，也可以自己删掉写一写，算是 jQuery 中一个比较核心的函数了。而且用途广泛，可以内部使用也可以，外部使用扩展 插件等。

链式调用

jQuery 能够链式调用是因为一些函数执行结束后 returnthis 。比如 jQuery 源码中的 addClass 、 removeClass 、 toggleClass 。

jQuery.noConflict 很多  js 库都会有的防冲突函数

jQuery.noConflict API

用法：

jQuery.noConflict 源码

总结

全文主要通过浅析了 jQuery 整体结构，自执行匿名函数、无 new 构造、支持多种规范（如commonjs、amd规范）、核心函数之 extend 、链式调用、 jQuery.noConflict 等方面。

重新梳理下文中学习的源码结构。

可以学习到 jQuery 巧妙的设计和架构，为自己所用，打造属于自己的 js 类库。相关代码和资源放置在github blog中，需要的读者可以自取。

下一篇文章可能是学习 underscorejs 的源码整体架构。

读者发现有不妥或可改善之处，欢迎评论指出。另外觉得写得不错，可以点赞、评论、转发，也是对笔者的一种支持。

关于

作者：常以 若川 为名混迹于江湖。前端路上 | PPT爱好者 | 所知甚少，唯善学。

个人博客 http://lxchuan12.cn

https://github.com/lxchuan12/blog ，相关源码和资源都放在这里，求个 star ^_^~

微信交流群，加我微信 lxchuan12 ，注明来源，拉您进 前端视野交流群

下图是公众号二维码： 若川视野，一个可能比较有趣的前端开发类公众号

往期文章

工作一年后，我有些感悟(写于2017年)

高考七年后、工作三年后的感悟

点击 阅读原文 ，或许阅读体验更佳