起因

隨著餓百新零售項目一期的告一段落，算是暫時從加班的修羅場裡面解放出來了，於是就想搞點事情，正好看項目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上的。