1、突然对jQuery的心血来潮

起因

随着饿百新零售项目一期的告一段落，算是暂时从加班的修罗场里面解放出来了，于是就想搞点事情，正好看项目js库的时候发现了躺在角落的jQuery，想到当初看源码的时候断断续续的没有看完一直是心头的遗憾，于是下定决心把这个遗憾弥补了。

阅读方法

我下载的是jQuery 3.2.1版本，大概瞄了一眼，一万行多一点，由于源码太多，怕看到最后看乱了于是采用看一点删一点的办法，优先看那些没有耦合的静态函数，所以并没有提前制定阅读结构，如果有朋友也在看我这篇文章的话可以也采用我的办法来阅读，可能会更清晰一些。如果读者刚接触前端不就推荐先去看完《js高程》掌握了js的基本概念和方法再来继续阅读。

开始 一、jQuery的结构

jQuery的最外层是一个立即执行函数，这方法在原来没有es6的正式模块化方法之前，几乎所有的js库函数都采用的这种方法来给自己定义全局变量的，利用的是js的闭包原理。js在一开始加载jQuery的时候会立刻执行这个函数，然后利用闭包原理将jQuery本身存在内存中，这样就能够保证jQuery对象在全局访问到了。

jQuery在一开始就采用了最严谨的严格模式来让代码更加规范，这样就会让代码减少出错的机会。

"use strict"

 

说到jQuery的结构，有必要说说3.0+版本和老版本还有有一些不一样的地方的。直接上图：

如果把现在的jQuery代码和很久以前的版本进行对比的话你会发现结构层有了很大的变化，老版本的jQuery的最外层并没有这么多层的结构，只是一个立即执行函数，然后函数的最后传入了唯一一个变量window，当时的简单结构是由于jQuery库只是应用在浏览器中，所以全局对象只会是Windows，而随着前端的迅速发展，出现了nodejs和不同的模块化规范，jQuery也与时俱进加了这方面的兼容性方案。在立即执行函数最后有一个：

typeof window !== "undefined"? window : this

这个是来判断函数初始化时传入的全局变量是否来自于浏览器的window，如果是就传入window，如果不是就传入未知的全局参数。后面的function则是我们平时用的所有jQuery内定义的方法。

jQuery初始化函数的最顶层有一个判断：

typeof module === "object" && typeof module.exports === "object" 

这个是来区分是否来自于类似遵从CommonJS规范，module存在切module.exports要是一个object对象。因为在CommonJS中对外暴漏借口就是类似module.exports.addX = addX。nodejs中使用的就是CommonJS规范，在上图中可以看到根据是否具有CommonJS规范jQuery的初始化参数并不一样。

这里正常的浏览器进来在构建时没有第二个参数，那么这个参数是做什么的呢？

将jQuery源码拉到底部，你会发现最后面有一个上图这样的函数，注释中说的很详细了，这个参数就是来判断是否要将jQuery和$这两个关键字绑定到浏览器全局window上的。