中了源碼的毒，給你一副良藥
本文轉(zhuǎn)載自微信公眾號「全棧修仙之路」，作者阿寶哥 。轉(zhuǎn)載本文請聯(lián)系全棧修仙之路公眾號。
一、靈魂四連問
1.1 為什么要讀源代碼
1.2 如何選擇項目
1.3 如何閱讀源碼
1.4 有實際的案例么
二、如何品讀 Axios?
2.1 走進 Axios
Axios 是一個基于 Promise 的 HTTP 客戶端，同時支持瀏覽器和 Node.js 環(huán)境。它是一個優(yōu)秀的 HTTP 客戶端，被廣泛地應(yīng)用在大量的 Web 項目中。
由上圖可知，Axios 項目的 Star 數(shù)為 「78.1K」，F(xiàn)ork 數(shù)也高達 「7.3K」，是一個很優(yōu)秀的開源項目，所以值得大家細細品讀。
2.2 發(fā)現(xiàn) Axios 的美
在確認 Axios 為 “追求目標(biāo)” 之后，下一步我們就需要來發(fā)現(xiàn)它身上的優(yōu)點(特性)：
每個人對 “美” 都有不同的看法，對于阿寶哥來說，我看中了圖中已選中的三點。因此，它們也很光榮地成為讀源碼的三個切入點。當(dāng)然切入點也不是越多越好，可以先找自己最感興趣的地方作為切入點。需要注意的是，如果切入點之間有關(guān)聯(lián)關(guān)系的話，建議做個簡單的排序。
2.3 感受 Axios 的美
選擇切入點之后，我們就可以開始逐一感受 Axios 的設(shè)計之美。以 「能夠攔截請求與響應(yīng)」 這個切入點為例，首先我們就會接觸到 「攔截器」 的概念。所以我們需要先了解攔截器是什么、攔截器有什么作用以及如何使用攔截器，這里我們可以從項目的 「官方文檔」或者項目中的 「README.md」 文檔入手。
2.3.1 攔截器的作用
Axios 提供了請求攔截器和響應(yīng)攔截器來分別處理請求和響應(yīng)，它們的作用如下：
- 請求攔截器：該類攔截器的作用是在請求發(fā)送前統(tǒng)一執(zhí)行某些操作，比如在請求頭中添加 token 字段。
- 響應(yīng)攔截器：該類攔截器的作用是在接收到服務(wù)器響應(yīng)后統(tǒng)一執(zhí)行某些操作，比如發(fā)現(xiàn)響應(yīng)狀態(tài)碼為 401 時，自動跳轉(zhuǎn)到登錄頁。
2.3.2 攔截器的使用
- // 添加請求攔截器 —— 處理請求配置對象
- axios.interceptors.request.use(function (config) {
- config.headers.token = 'added by interceptor';
- return config;
- });
- // 添加響應(yīng)攔截器 —— 處理響應(yīng)對象
- 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)
- });
在了解完攔截器的作用和用法之后，我們就會把焦點聚焦到 「axios」 對象，因為注冊攔截器和發(fā)送請求都與它有緊密的聯(lián)系。不過在看具體源碼之前，阿寶哥建議先對功能點做一下梳理。以下是阿寶哥的分析思路：
Axios 的作用是用于發(fā)送 HTTP 請求，請求攔截器和響應(yīng)攔截器分別對應(yīng)于 HTTP 請求的不同階段，它們的本質(zhì)是一個實現(xiàn)特定功能的函數(shù)。這時我們就可以按照功能把發(fā)送 HTTP 請求拆解成不同類型的子任務(wù)，比如有 「用于處理請求配置對象的子任務(wù)」，「用于發(fā)送 HTTP 請求的子任務(wù)」 和 「用于處理響應(yīng)對象的子任務(wù)」。當(dāng)我們按照指定的順序來執(zhí)行這些子任務(wù)時，就可以完成一次完整的 HTTP 請求。
既然已經(jīng)提到了任務(wù)，我們就會聯(lián)想到任務(wù)管理系統(tǒng)的基本功能：任務(wù)注冊、任務(wù)編排(優(yōu)先級排序)和任務(wù)調(diào)度等。因此我們就可以考慮從 「任務(wù)注冊、任務(wù)編排和任務(wù)調(diào)度」 三個方面來分析 Axios 攔截器的實現(xiàn)。
2.3.3 任務(wù)注冊
- // 添加請求攔截器 —— 處理請求配置對象
- axios.interceptors.request.use(function (config) {
- config.headers.token = 'added by interceptor';
- return config;
- });
- // 添加響應(yīng)攔截器 —— 處理響應(yīng)對象
- axios.interceptors.response.use(function (data) {
- data.data = data.data + ' - modified by interceptor';
- return data;
- });
在 lib/axios.js 路徑下，我們可以找到 「axios」 對象的定義。為了能直觀地了解對象之間的關(guān)系，阿寶哥建議大家在讀源碼的過程中，多動手畫畫圖。比如阿寶哥使用下圖來總結(jié)一下 Axios 對象與 InterceptorManager 對象的內(nèi)部結(jié)構(gòu)與關(guān)系：
2.3.4 任務(wù)編排
現(xiàn)在我們已經(jīng)知道如何注冊攔截器任務(wù)，但僅僅注冊任務(wù)是不夠，我們還需要對已注冊的任務(wù)進行編排，這樣才能確保任務(wù)的執(zhí)行順序。
同樣對于任務(wù)編排，也可以使用圖的形式來展現(xiàn)任務(wù)編排后的結(jié)果?！高@里有一個小技巧，就是可以采用對比的形式來展示任務(wù)編排后的結(jié)果，這樣子會更加清楚任務(wù)編排的處理邏輯?！?/p>
2.3.5 任務(wù)調(diào)度
任務(wù)編排完成后，要發(fā)起 HTTP 請求，我們還需要按編排后的順序執(zhí)行任務(wù)調(diào)度。
需要注意的是：在閱讀源碼過程中，不要太在意細節(jié)。比如在研究 Axios 攔截器原理時，不需要再深入了解 「dispatchRequest」 背后的具體實現(xiàn)，只需知道該方法用于實現(xiàn)發(fā)送 HTTP 請求即可，這樣才不會把整個線路拉得太長。
在分析完特定的功能點之后，也許你已經(jīng)讀懂的具體的源代碼。但阿寶哥覺得這并不是最重要的，「更重要的是思考它的設(shè)計思想，這樣設(shè)計有什么好處，對于我們有沒有什么值得借鑒和學(xué)習(xí)的地方」。比如參考 Axios 攔截器的設(shè)計模型，我們就可以抽出以下通用的任務(wù)處理模型：
上面阿寶哥以 Axios 的攔截器為例，分享了讀 Axios 源碼的思路與技巧。接下來阿寶哥來分享一些讀源碼的建議和輔助工具。
三、讀源碼的建議
四、讀源碼輔助工具
如果你對下列輔助工具感興趣的話，可以通過以下圖片來源的鏈接，來直接打開每個工具的在線地址。
(圖片來源：https://www.processon.com/view/link/5f6d2beff346fb166d0ac4fd)
五、總結(jié)
其實除了上面的內(nèi)容之外，讀優(yōu)秀開源項目還有挺多值得關(guān)注的地方。阿寶哥在學(xué)習(xí) BetterScroll 項目源碼時，總結(jié)了一張思維導(dǎo)圖：
(圖片來源：https://www.processon.com/view/link/5f6d2beff346fb166d0ac4fd)
下面阿寶哥用一張圖來總結(jié)一下 axios 和 better-scroll 這兩個開源項目的學(xué)習(xí)路線：
1、Axios 項目的切入點是從 Github 中的功能特性中篩選出來的;
2、BetterScroll 的切入點是從掘金上 “BetterScroll 2.0 發(fā)布：精益求精，與你同行” 這篇文章中介紹的功能亮點中找到的。
除此之外，阿寶哥也來簡單總結(jié)一下本文介紹的讀源碼的思路與技巧：
- 站在巨人的肩膀，提前閱讀一些項目相關(guān)的優(yōu)質(zhì)文章;
- 匯總學(xué)習(xí)或工作中遇到的問題，帶著問題進行源碼學(xué)習(xí);
- 明確閱讀源碼的主線或切入點;
- 盡可能從簡單的示例出發(fā)來分析每個功能點;
- 先梳理清楚主要流程，不要太在意細節(jié)，避免把整個線路拉得太長;
- 在閱讀源碼過程中，要多多畫圖，這樣理解起來會更加直觀。
本文阿寶哥分享了個人讀源碼的思路、技巧與工具，希望閱讀完本文能對你有所啟發(fā)或幫助。如果你有讀源碼更好的思路與技巧，歡迎隨時跟阿寶哥交流。有寫得不好的地方，也請各位見諒哈。
