摘要：在這篇文章中，分享了他如何克服恐懼并開始使用源代碼來提高他的知識和技能。不久之后，你正在閱讀的源代碼將引導您進入規范。

原文傳送門：《Improve Your JavaScript Knowledge By Reading Source Code》

原本作者：Carl Mungazi，是位于倫敦的能源創業公司Limejump的前端開發人員。他花時間深入挖掘所有JavaScript的深度。

簡介：當你還處于編程生涯的初期階段時，深入研究開源庫和框架的源代碼可能是一項艱巨的任務。在這篇文章中，Carl Mungazi分享了他如何克服恐懼并開始使用源代碼來提高他的知識和技能。他還使用Redux來演示他如何破壞圖書館。

你還記得你第一次深入挖掘經常使用的庫或框架的源代碼嗎？對我而言，那一刻是我三年前作為前端開發人員的第一份工作。

我們剛剛完成了用于創建電子學習課程的內部遺留框架的重寫。在重寫開始時，我們花時間研究了許多不同的解決方案，包括Mithril，Inferno，Angular，React，Aurelia，Vue和Polymer。因為我是一個非常初學者（我剛從新聞轉向網絡開發），我記得每個框架的復雜性讓人感到害怕，而不是理解每個框架的工作方式。

當我開始更深入地研究我們選擇的框架Mithril時，我的理解增長了。從那以后，我對JavaScript的了解 - 以及一般的編程 - 得到了很大的幫助，我花了很多時間深入研究我每天在工作或我自己的項目中使用的庫的內容。在這篇文章中，我將分享一些您可以采用自己喜歡的圖書館或框架并將其用作教育工具的方法。

以下是我第一次閱讀代碼的介紹是通過Mithril的hyperscript函數

閱讀源代碼的主要好處之一是增加了你可以學習的知識數量。當我第一次看到Mithril的代碼庫時，我對虛擬DOM的含義有一個模糊的概念。當我學習完后，我知道虛擬DOM是一種技術，它涉及創建描述用戶界面應該是什么樣的對象樹。然后使用DOM API將該樹轉換為DOM元素document.createElement。通過創建描述用戶界面的未來狀態的新樹，然后將其與舊樹中的對象進行比較來執行更新。

我在各種文章和教程中也都閱讀過這些內容，它對我很有幫助，并且在我們發布的應用程序的中能夠觀察它的運作，對我來說非常有啟發性。它還告訴我在比較不同的框架時要問哪些問題。例如，我現在會問諸如“每個框架執行更新的方式如何影響性能和用戶體驗？”等問題，而不是關注GitHub上的Stars。

另一個好處是增加你對優秀應用程序架構的好感和理解。雖然大多數開源項目通常與其存儲庫遵循相同的結構，但每個項目都各有差異。Mithril的結構是非常平坦的，如果你熟悉它的API，你可以猜測有關文件夾，如代碼render，router和request。另一方面，React的結構反映了它的新架構。維護者將負責UI更新（react-reconciler）的模塊與負責呈現DOM元素（react-dom）的模塊分開。

這樣做的好處之一是，現在開發人員可以通過掛鉤來編寫自己的自定義渲染器react-reconciler。我最近研究過的模塊捆綁包Parcel也有像React packages這樣的文件夾。關鍵的模塊已命名parcel-bundler，它包含負責創建捆綁包，啟動熱模塊服務器和命令行工具的代碼。

不久之后，你正在閱讀的源代碼將引導您進入JavaScript規范。

另一個好處 —— 令我感到驚訝的是：你可以更輕松地閱讀那些定義JavaScript這門語言如何工作的官方規范。我第一次讀規范是在我調查的區別throw Error和throw new Error（擾流警報是none）。我調查了這個因為我注意到Mithril用于throw Error實現它的m功能，我想知道使用它是否比throw new Error更好。從那以后，我還了解到，邏輯運算符&&和|| 不一定返回布爾值，發現這個 == 運算是如何強制轉換值的規則 ，以及還有Object.prototype.toString.call({}) 返回 "[object Object]"的理由 。

有很多方法可以處理源代碼。我發現最簡單的方法是從您選擇的庫中選擇一種方法并記錄調用它時會發生什么。不要記錄每一步，而要嘗試確定其整體流程和結構。

我最近按這個方式做了ReactDOM.render的記錄，也因此學到了很多關于React Fiber及其實現背后的一些原因。值得慶幸的是，由于React是一個流行的框架，我在同一個問題上遇到了很多其他開發人員撰寫的文章，這讓我少走很多彎路。

這次深入探討還向我介紹了合作調度的概念，window.requestIdleCallback方法和鏈接列表的真實示例（React通過將它們放入隊列中來處理更新，隊列是優先級更新的鏈接列表）。執行此操作時，建議使用庫創建一個非常基本的應用程序。這使得調試時更容易，因為你不必處理由其他庫引起的堆棧跟蹤。

如果我沒有進行深入審查，我將打開/node_modules我正在處理的項目中的文件夾，或者我將轉到GitHub存儲庫。當我遇到錯誤或有趣的功能時，通常會發生這種情況。在GitHub上閱讀代碼時，一定要確保你正在閱讀的代碼是最新的版本。你可以通過單擊用于更改分支的按鈕并選擇“tags”來查看具有最新版本標記的提交中的代碼。因為代碼庫和框架一直都在迭代更新，你當然也不希望了解一些可能在下一版本中刪除的內容，所以及時留意最新的版本。

另一種復雜點的閱讀源代碼的方式，我喜歡稱之為“粗略一瞥”。在我開始閱讀代碼的早期，我安裝了express.js，打開了它的/node_modules文件夾并安裝了它的依賴。如果看了README文件沒有給到我很好理解的話，我會直接閱讀源碼。這樣做讓我得到了以下這個有趣的發現：

Express依賴于兩個模塊，這兩個模塊合并對象但以非常不同的方式這樣做。merge-descriptors只添加直接在源對象上直接找到的屬性，它還合并不可枚舉的屬性，同時utils-merge只迭代對象的可枚舉屬性以及在其原型鏈中找到的屬性。merge-descriptors使用Object.getOwnPropertyNames()和Object.getOwnPropertyDescriptor()同時utils-merge使用for..in;

setprototypeof模塊提供了一種設置實例化對象原型的跨平臺方式;

escape-html 是一個78行模塊，用于轉義一串內容，以便可以在HTML內容中進行插值。

雖然這些發現并不能馬上運用，但是讓你對代碼庫或框架使用的依賴關系有一個大致的了解。

在調試前端代碼時，瀏覽器的調試工具是你最好的朋友。除此之外，它們可以讓你隨時中斷程序運行并檢查當前的狀態，再決定跳過函數的執行或進入或退出程序。如果代碼已經壓縮過，可能無法很好地進行調試。我個人就喜歡把沒有壓縮的代碼復制到/node_modules文件夾中的相關文件中，再將其進行解析。

React-Redux是一個用于管理React應用程序狀態的庫。在處理諸如此類的流行庫時，我首先會搜索一些寫過有關其實現的文章。在本案例研究中，我遇到了這篇文章。這是閱讀源代碼的另一個好處。研究階段通常會引導你閱讀這樣的文章，這些文章會改善你自己的思考和理解。

connect是一個React-Redux函數，它將React組件連接到應用程序的Redux存儲。他是怎么做的呢？根據文檔，它做了以下事情：

“...返回一個新的，連接的組件類，它包裝你傳入的組件。”

看完之后，我會問下列問題：

我是否知道函數接受輸入的任何模式或概念，然后返回包含其他功能的相同輸入？

如果我知道任何這樣的模式，我將如何根據文檔中給出的解釋實現這一點？

通常，下一步是創建一個使用的非常基本的示例應用程序connect。但是，在這種情況下，我選擇使用我們在Limejump上構建的新React應用程序，因為我想connect在最終將進入生產環境的應用程序的上下文中理解。

我關注的組件看起來像這樣：

class MarketContainer extends Component {
 // code omitted for brevity
}

const mapDispatchToProps = dispatch => {
 return {
   updateSummary: (summary, start, today) => dispatch(updateSummary(summary, start, today))
 }
}

export default connect(null, mapDispatchToProps)(MarketContainer);

它是一個容器組件，包裹著四個較小的連接組件。你在文件中遇到的第一個導出connect方法是注釋：connect是connectAdvanced上的外觀。沒有走得太遠，我們就有了第一個學習時刻：一個觀察立面設計模式的機會。在文件的末尾，我們看到connect導出一個名為的函數的調用createConnect。它的參數是一堆已被解構的默認值，如下所示：

export function createConnect({
 connectHOC = connectAdvanced,
 mapStateToPropsFactories = defaultMapStateToPropsFactories,
 mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
 mergePropsFactories = defaultMergePropsFactories,
 selectorFactory = defaultSelectorFactory
} = {})

同樣，我們遇到了另一個學習時刻：導出調用函數和解構默認函數參數。解構部分是一個學習時刻，因為代碼編寫如下：

export function createConnect({
 connectHOC = connectAdvanced,
 mapStateToPropsFactories = defaultMapStateToPropsFactories,
 mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
 mergePropsFactories = defaultMergePropsFactories,
 selectorFactory = defaultSelectorFactory
})

它會導致發生這個錯誤。Uncaught TypeError: Cannot destructure property "connectHOC" of "undefined" or "null". 這是因為這個函數沒有默認參數可供使用。

注意：有關此內容的更多信息，請閱讀David Walsh的文章。根據你對語言的了解，一些學習時刻可能看起來微不足道，因此最好將注意力放在您以前從未見過或需要了解更多信息的事情上。

createConnect它本身在函數體中沒有任何作用。它返回一個名為的函數connect，我在這里使用的函數：

export default connect(null, mapDispatchToProps)(MarketContainer)

它需要四個參數，都是可選的，前三個參數都通過一個match函數來幫助根據參數是否存在以及它們的值類型來定義它們的行為。現在，因為提供的第二個參數match是導入的三個函數之一connect，我必須決定要遵循哪個線程。

如果這些參數是函數，用于包裝第一個參數的代理函數connect，isPlainObject用于檢查普通對象的實用程序或warning揭示如何設置調試器以中斷所有異常的模塊，有學習時刻。在匹配函數之后，我們來了connectHOC一個函數，它接受我們的React組件并將它連接到Redux。它是另一個返回的函數調用，wrapWithConnect它實際上處理將組件連接到存儲的函數。

看看connectHOC它的實現，我可以理解為什么它需要connect隱藏它的實現細節。它是React-Redux的核心，包含不需要通過暴露的邏輯connect。盡管我原本打算在這個地方結束對它的深度探討，我也會繼續，這也將是我翻查之前發現的參考資料的最佳時機，因為有些資料對對代碼庫的解釋非常詳細。

閱讀源代碼一開始是很困難的，但跟任何事情一樣，隨著時間的推移它會慢慢變得更容易。我們的目標不是說要理解每一行代碼，而是要通過閱讀進而得到不同的視角和新的知識。關鍵是既對整個過程進行深思熟慮，也要對所有事情充滿好奇。

例如，我發現isPlainObject函數很有趣，因為它使用它if (typeof obj !== "object" || obj === null) return false來確保給定的參數是一個普通的對象。當我第一次閱讀它的實現過程，我想知道為什么它沒有使用Object.prototype.toString.call(opts) !== "[object Object]"，這樣會產生更少的代碼并能區分對象和對象子類型，比如Date對象。但是，閱讀下一行意識到，在開發人員幾乎無法用connect去返回一個Date對象，比如，這個是由Object.getPrototypeOf(obj) === null 進行檢查校驗的。

另一個很吸引人的是在isPlainObject中的這段代碼：

while (Object.getPrototypeOf(baseProto) !== null) {
 baseProto = Object.getPrototypeOf(baseProto)
}

在谷歌搜索的時候，有些會引導我進入這個 StackOverflow社區 或 Redux issue 查看關于該代碼如何處理的案例，例如檢查iFrame的對象來源。

《如何通過逆向工程進行框架設計》，Max Koretskyi，Medium

《如何閱讀代碼》 ，Aria Stewart，GitHub

【作者簡介】：土撥鼠，蘆葦科技web前端開發工程師，代表作品：飛花亭小程序、續航基因、YY表情紅包、YY疊方塊直播競賽小游戲。擅長網站建設、公眾號開發、微信小程序開發、小游戲、公眾號開發，專注于前端框架、服務端渲染、SEO技術、交互設計、圖像繪制、數據分析等研究。

歡迎和我們一起并肩作戰： web@talkmoney.cn

訪問 www.talkmoney.cn 了解更多