中了源碼的毒，給你一副良藥

近期阿寶哥在團(tuán)隊(duì)內(nèi)搞了一個(gè) 「如何讀源碼」 的專題，主要目的是讓團(tuán)隊(duì)的小伙伴們了解讀源碼的思路與技巧。在此期間，阿寶哥也寫了 77.9K 的 Axios 項(xiàng)目有哪些值得借鑒的地方、從 12.9K 的前端開源項(xiàng)目我學(xué)到了啥 和?如何讓你的 Express 飛起來 三篇源碼解析的文章。

其中前兩篇在「掘金社區(qū)」獲得不錯(cuò)的評(píng)價(jià)，平均 630 多個(gè)?，所以阿寶哥就想寫一篇文章來分享一下本人讀源碼的思路、技巧與工具。

好的，讓我們開始出發(fā)吧！在進(jìn)入正題之前，我們先來個(gè)讀源碼前的 「靈魂四連問」 熱熱身。

一、靈魂四連問

1.1 為什么要讀源代碼

1.2 如何選擇項(xiàng)目

1.3 如何閱讀源碼

1.4 有實(shí)際的案例么

既然前兩篇文章比較受大家喜歡，接下來阿寶哥就以最受歡迎的 Axios 為例，來分享一下讀源碼的思路與技巧。

二、如何品讀 Axios？

2.1 走進(jìn) Axios

Axios 是一個(gè)基于 Promise 的 HTTP 客戶端，同時(shí)支持瀏覽器和 Node.js 環(huán)境。它是一個(gè)優(yōu)秀的 HTTP 客戶端，被廣泛地應(yīng)用在大量的 Web 項(xiàng)目中。

由上圖可知，Axios 項(xiàng)目的 Star 數(shù)為 「78.1K」，F(xiàn)ork 數(shù)也高達(dá) 「7.3K」，是一個(gè)很優(yōu)秀的開源項(xiàng)目，所以值得大家細(xì)細(xì)品讀。

2.2 發(fā)現(xiàn) Axios 的美

在確認(rèn) Axios 為 “追求目標(biāo)” 之后，下一步我們就需要來發(fā)現(xiàn)它身上的優(yōu)點(diǎn)（特性）：

每個(gè)人對(duì) “美” 都有不同的看法，對(duì)于阿寶哥來說，我看中了圖中已選中的三點(diǎn)。因此，它們也很光榮地成為讀源碼的三個(gè)切入點(diǎn)。當(dāng)然切入點(diǎn)也不是越多越好，可以先找自己最感興趣的地方作為切入點(diǎn)。需要注意的是，如果切入點(diǎn)之間有關(guān)聯(lián)關(guān)系的話，建議做個(gè)簡(jiǎn)單的排序。

2.3 感受 Axios 的美

選擇切入點(diǎn)之后，我們就可以開始逐一感受 Axios 的設(shè)計(jì)之美。以 「能夠攔截請(qǐng)求與響應(yīng)」 這個(gè)切入點(diǎn)為例，首先我們就會(huì)接觸到 「攔截器」 的概念。所以我們需要先了解攔截器是什么、攔截器有什么作用以及如何使用攔截器，這里我們可以從項(xiàng)目的 「官方文檔」 或者項(xiàng)目中的 「README.md」 文檔入手。

2.3.1 攔截器的作用

Axios 提供了請(qǐng)求攔截器和響應(yīng)攔截器來分別處理請(qǐng)求和響應(yīng)，它們的作用如下：

• 請(qǐng)求攔截器：該類攔截器的作用是在請(qǐng)求發(fā)送前統(tǒng)一執(zhí)行某些操作，比如在請(qǐng)求頭中添加 token 字段。
• 響應(yīng)攔截器：該類攔截器的作用是在接收到服務(wù)器響應(yīng)后統(tǒng)一執(zhí)行某些操作，比如發(fā)現(xiàn)響應(yīng)狀態(tài)碼為 401 時(shí)，自動(dòng)跳轉(zhuǎn)到登錄頁(yè)。

2.3.2 攔截器的使用

//?添加請(qǐng)求攔截器?——?處理請(qǐng)求配置對(duì)象
axios.interceptors.request.use(function?(config)?{
??config.headers.token?=?'added?by?interceptor';
??return?config;
});

//?添加響應(yīng)攔截器?——?處理響應(yīng)對(duì)象
axios.interceptors.response.use(function?(data)?{
??data.data?=?data.data?+?'?-?modified?by?interceptor';
??return?data;
});

axios({
??url:?'/hello',
??method:?'get',
}).then(res?=>{
??console.log('axios?res.data:?',?res.data)
});

在了解完攔截器的作用和用法之后，我們就會(huì)把焦點(diǎn)聚焦到 「axios」 對(duì)象，因?yàn)樽?cè)攔截器和發(fā)送請(qǐng)求都與它有緊密的聯(lián)系。不過在看具體源碼之前，阿寶哥建議先對(duì)功能點(diǎn)做一下梳理。以下是阿寶哥的分析思路：

Axios 的作用是用于發(fā)送 HTTP 請(qǐng)求，請(qǐng)求攔截器和響應(yīng)攔截器分別對(duì)應(yīng)于 HTTP 請(qǐng)求的不同階段，它們的本質(zhì)是一個(gè)實(shí)現(xiàn)特定功能的函數(shù)。這時(shí)我們就可以按照功能把發(fā)送 HTTP 請(qǐng)求拆解成不同類型的子任務(wù)，比如有 「用于處理請(qǐng)求配置對(duì)象的子任務(wù)」，「用于發(fā)送 HTTP 請(qǐng)求的子任務(wù)」 和 「用于處理響應(yīng)對(duì)象的子任務(wù)」。當(dāng)我們按照指定的順序來執(zhí)行這些子任務(wù)時(shí)，就可以完成一次完整的 HTTP 請(qǐng)求。

既然已經(jīng)提到了任務(wù)，我們就會(huì)聯(lián)想到任務(wù)管理系統(tǒng)的基本功能：任務(wù)注冊(cè)、任務(wù)編排（優(yōu)先級(jí)排序）和任務(wù)調(diào)度等。因此我們就可以考慮從 「任務(wù)注冊(cè)、任務(wù)編排和任務(wù)調(diào)度」 三個(gè)方面來分析 Axios 攔截器的實(shí)現(xiàn)。

2.3.3 任務(wù)注冊(cè)

//?添加請(qǐng)求攔截器?——?處理請(qǐng)求配置對(duì)象
axios.interceptors.request.use(function?(config)?{
??config.headers.token?=?'added?by?interceptor';
??return?config;
});

//?添加響應(yīng)攔截器?——?處理響應(yīng)對(duì)象
axios.interceptors.response.use(function?(data)?{
??data.data?=?data.data?+?'?-?modified?by?interceptor';
??return?data;
});

在 lib/axios.js 路徑下，我們可以找到 「axios」 對(duì)象的定義。為了能直觀地了解對(duì)象之間的關(guān)系，阿寶哥建議大家在讀源碼的過程中，多動(dòng)手畫畫圖。比如阿寶哥使用下圖來總結(jié)一下 Axios 對(duì)象與 InterceptorManager 對(duì)象的內(nèi)部結(jié)構(gòu)與關(guān)系：

2.3.4 任務(wù)編排

現(xiàn)在我們已經(jīng)知道如何注冊(cè)攔截器任務(wù)，但僅僅注冊(cè)任務(wù)是不夠，我們還需要對(duì)已注冊(cè)的任務(wù)進(jìn)行編排，這樣才能確保任務(wù)的執(zhí)行順序。

同樣對(duì)于任務(wù)編排，也可以使用圖的形式來展現(xiàn)任務(wù)編排后的結(jié)果。「這里有一個(gè)小技巧，就是可以采用對(duì)比的形式來展示任務(wù)編排后的結(jié)果，這樣子會(huì)更加清楚任務(wù)編排的處理邏輯?！?/strong>

2.3.5 任務(wù)調(diào)度

任務(wù)編排完成后，要發(fā)起 HTTP 請(qǐng)求，我們還需要按編排后的順序執(zhí)行任務(wù)調(diào)度。

?

需要注意的是：在閱讀源碼過程中，不要太在意細(xì)節(jié)。比如在研究 Axios 攔截器原理時(shí)，不需要再深入了解 「dispatchRequest」 背后的具體實(shí)現(xiàn)，只需知道該方法用于實(shí)現(xiàn)發(fā)送 HTTP 請(qǐng)求即可，這樣才不會(huì)把整個(gè)線路拉得太長(zhǎng)。

?

在分析完特定的功能點(diǎn)之后，也許你已經(jīng)讀懂的具體的源代碼。但阿寶哥覺得這并不是最重要的，「更重要的是思考它的設(shè)計(jì)思想，這樣設(shè)計(jì)有什么好處，對(duì)于我們有沒有什么值得借鑒和學(xué)習(xí)的地方」。比如參考 Axios 攔截器的設(shè)計(jì)模型，我們就可以抽出以下通用的任務(wù)處理模型：

上面阿寶哥以 Axios 的攔截器為例，分享了讀 Axios 源碼的思路與技巧。接下來阿寶哥來分享一些讀源碼的建議和輔助工具。

三、讀源碼的建議

四、讀源碼輔助工具

如果你對(duì)下列輔助工具感興趣的話，可以通過以下圖片來源的鏈接，來直接打開每個(gè)工具的在線地址。

（圖片來源：https://www.processon.com/view/link/5f6d2beff346fb166d0ac4fd）

五、總結(jié)

其實(shí)除了上面的內(nèi)容之外，讀優(yōu)秀開源項(xiàng)目還有挺多值得關(guān)注的地方。阿寶哥在學(xué)習(xí) BetterScroll 項(xiàng)目源碼時(shí)，總結(jié)了一張思維導(dǎo)圖：

（圖片來源：https://www.processon.com/view/link/5f6d2beff346fb166d0ac4fd）

下面阿寶哥用一張圖來總結(jié)一下 axios 和 better-scroll 這兩個(gè)開源項(xiàng)目的學(xué)習(xí)路線：

?

1、Axios 項(xiàng)目的切入點(diǎn)是從 Github 中的功能特性中篩選出來的；

2、BetterScroll 的切入點(diǎn)是從掘金上 “BetterScroll 2.0 發(fā)布：精益求精，與你同行” 這篇文章中介紹的功能亮點(diǎn)中找到的。

?

除此之外，阿寶哥也來簡(jiǎn)單總結(jié)一下本文介紹的讀源碼的思路與技巧：

• 站在巨人的肩膀，提前閱讀一些項(xiàng)目相關(guān)的優(yōu)質(zhì)文章；
• 匯總學(xué)習(xí)或工作中遇到的問題，帶著問題進(jìn)行源碼學(xué)習(xí)；
• 明確閱讀源碼的主線或切入點(diǎn)；
• 盡可能從簡(jiǎn)單的示例出發(fā)來分析每個(gè)功能點(diǎn)；
• 先梳理清楚主要流程，不要太在意細(xì)節(jié)，避免把整個(gè)線路拉得太長(zhǎng)；
• 在閱讀源碼過程中，要多多畫圖，這樣理解起來會(huì)更加直觀。

本文阿寶哥分享了個(gè)人讀源碼的思路、技巧與工具，希望閱讀完本文能對(duì)你有所啟發(fā)或幫助。如果你有讀源碼更好的思路與技巧，歡迎隨時(shí)跟阿寶哥交流。有寫得不好的地方，也請(qǐng)各位見諒哈。