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

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

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

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

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

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

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

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

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

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

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

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

不久之后，你正在閱讀的源代碼將引導(dǎo)您進(jìn)入JavaScript規(guī)范。

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

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

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

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

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

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

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

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

escape-html 是一個78行模塊，用于轉(zhuǎn)義一串內(nèi)容，以便可以在HTML內(nèi)容中進(jìn)行插值。

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

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

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

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

“...返回一個新的，連接的組件類，它包裝你傳入的組件?！?/pre>
看完之后，我會問下列問題：

我是否知道函數(shù)接受輸入的任何模式或概念，然后返回包含其他功能的相同輸入？
如果我知道任何這樣的模式，我將如何根據(jù)文檔中給出的解釋實現(xiàn)這一點？

通常，下一步是創(chuàng)建一個使用的非?；镜氖纠龖?yīng)用程序connect。但是，在這種情況下，我選擇使用我們在Limejump上構(gòu)建的新React應(yīng)用程序，因為我想connect在最終將進(jìn)入生產(chǎn)環(huán)境的應(yīng)用程序的上下文中理解。
我關(guān)注的組件看起來像這樣：
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);
它是一個容器組件，包裹著四個較小的連接組件。你在文件中遇到的第一個導(dǎo)出connect方法是注釋：connect是connectAdvanced上的外觀。沒有走得太遠(yuǎn)，我們就有了第一個學(xué)習(xí)時刻：一個觀察立面設(shè)計模式的機(jī)會。在文件的末尾，我們看到connect導(dǎo)出一個名為的函數(shù)的調(diào)用createConnect。它的參數(shù)是一堆已被解構(gòu)的默認(rèn)值，如下所示：
export function createConnect({
 connectHOC = connectAdvanced,
 mapStateToPropsFactories = defaultMapStateToPropsFactories,
 mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
 mergePropsFactories = defaultMergePropsFactories,
 selectorFactory = defaultSelectorFactory
} = {})
同樣，我們遇到了另一個學(xué)習(xí)時刻：導(dǎo)出調(diào)用函數(shù)和解構(gòu)默認(rèn)函數(shù)參數(shù)。解構(gòu)部分是一個學(xué)習(xí)時刻，因為代碼編寫如下：
export function createConnect({
 connectHOC = connectAdvanced,
 mapStateToPropsFactories = defaultMapStateToPropsFactories,
 mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
 mergePropsFactories = defaultMergePropsFactories,
 selectorFactory = defaultSelectorFactory
})
它會導(dǎo)致發(fā)生這個錯誤。Uncaught TypeError: Cannot destructure property "connectHOC" of "undefined" or "null". 這是因為這個函數(shù)沒有默認(rèn)參數(shù)可供使用。
注意：有關(guān)此內(nèi)容的更多信息，請閱讀David Walsh的文章。根據(jù)你對語言的了解，一些學(xué)習(xí)時刻可能看起來微不足道，因此最好將注意力放在您以前從未見過或需要了解更多信息的事情上。
createConnect它本身在函數(shù)體中沒有任何作用。它返回一個名為的函數(shù)connect，我在這里使用的函數(shù)：
export default connect(null, mapDispatchToProps)(MarketContainer)
它需要四個參數(shù)，都是可選的，前三個參數(shù)都通過一個match函數(shù)來幫助根據(jù)參數(shù)是否存在以及它們的值類型來定義它們的行為?，F(xiàn)在，因為提供的第二個參數(shù)match是導(dǎo)入的三個函數(shù)之一connect，我必須決定要遵循哪個線程。
如果這些參數(shù)是函數(shù)，用于包裝第一個參數(shù)的代理函數(shù)connect，isPlainObject用于檢查普通對象的實用程序或warning揭示如何設(shè)置調(diào)試器以中斷所有異常的模塊，有學(xué)習(xí)時刻。在匹配函數(shù)之后，我們來了connectHOC一個函數(shù)，它接受我們的React組件并將它連接到Redux。它是另一個返回的函數(shù)調(diào)用，wrapWithConnect它實際上處理將組件連接到存儲的函數(shù)。
看看connectHOC它的實現(xiàn)，我可以理解為什么它需要connect隱藏它的實現(xiàn)細(xì)節(jié)。它是React-Redux的核心，包含不需要通過暴露的邏輯connect。盡管我原本打算在這個地方結(jié)束對它的深度探討，我也會繼續(xù)，這也將是我翻查之前發(fā)現(xiàn)的參考資料的最佳時機(jī)，因為有些資料對對代碼庫的解釋非常詳細(xì)。
摘要
閱讀源代碼一開始是很困難的，但跟任何事情一樣，隨著時間的推移它會慢慢變得更容易。我們的目標(biāo)不是說要理解每一行代碼，而是要通過閱讀進(jìn)而得到不同的視角和新的知識。關(guān)鍵是既對整個過程進(jìn)行深思熟慮，也要對所有事情充滿好奇。
例如，我發(fā)現(xiàn)isPlainObject函數(shù)很有趣，因為它使用它if (typeof obj !== "object" || obj === null) return false來確保給定的參數(shù)是一個普通的對象。當(dāng)我第一次閱讀它的實現(xiàn)過程，我想知道為什么它沒有使用Object.prototype.toString.call(opts) !== "[object Object]"，這樣會產(chǎn)生更少的代碼并能區(qū)分對象和對象子類型，比如Date對象。但是，閱讀下一行意識到，在開發(fā)人員幾乎無法用connect去返回一個Date對象，比如，這個是由Object.getPrototypeOf(obj) === null 進(jìn)行檢查校驗的。
另一個很吸引人的是在isPlainObject中的這段代碼：
while (Object.getPrototypeOf(baseProto) !== null) {
 baseProto = Object.getPrototypeOf(baseProto)
}
在谷歌搜索的時候，有些會引導(dǎo)我進(jìn)入這個 StackOverflow社區(qū) 或 Redux issue 查看關(guān)于該代碼如何處理的案例，例如檢查iFrame的對象來源。
另外，還有一些有利于閱讀源碼的文章


《如何通過逆向工程進(jìn)行框架設(shè)計》，Max Koretskyi，Medium

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


【作者簡介】：土撥鼠，蘆葦科技web前端開發(fā)工程師，代表作品：飛花亭小程序、續(xù)航基因、YY表情紅包、YY疊方塊直播競賽小游戲。擅長網(wǎng)站建設(shè)、公眾號開發(fā)、微信小程序開發(fā)、小游戲、公眾號開發(fā)，專注于前端框架、服務(wù)端渲染、SEO技術(shù)、交互設(shè)計、圖像繪制、數(shù)據(jù)分析等研究。
歡迎和我們一起并肩作戰(zhàn)： [email protected]
訪問 www.talkmoney.cn 了解更多