使用这些思路与技巧，我读懂了多个优秀的开源项目

ゝ一世哀愁。 2022-11-20 08:03 122阅读 0赞

好的，让我们开始出发吧！在进入正题之前，我们先来个读源码前的 灵魂四连问 热热身。

一、灵魂四连问

1.1 为什么要读源代码![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
1.2 如何选择项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]  
1.3 如何阅读源码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]  
1.4 有实际的案例么![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]  
既然前两篇文章比较受大家喜欢，接下来阿宝哥就以最受欢迎的 Axios 为例，来分享一下读源码的思路与技巧。

二、如何品读 Axios？

2.1 走进 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，同时支持浏览器和 Node.js 环境。它是一个优秀的 HTTP 客户端，被广泛地应用在大量的 Web 项目中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]  
由上图可知，Axios项目的 Star 数为78.1K，Fork 数也高达7.3K，是一个很优秀的开源项目，所以值得大家细细品读。

2.2 发现 Axios 的美

在确认Axios为 “追求目标” 之后，下一步我们就需要来发现它身上的优点（特性）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]  
每个人对 “美” 都有不同的看法，对于阿宝哥来说，我看中了图中已选中的三点。因此，它们也很光荣地成为读源码的三个切入点。当然切入点也不是越多越好，可以先找自己最感兴趣的地方作为切入点。需要注意的是，如果切入点之间有关联关系的话，建议做个简单的排序。

2.3 感受 Axios 的美

选择切入点之后，我们就可以开始逐一感受 Axios 的设计之美。以能够拦截请求与响应这个切入点为例，首先我们就会接触到拦截器的概念。所以我们需要先了解拦截器是什么、拦截器有什么作用以及如何使用拦截器，这里我们可以从项目的官方文档或者项目中的README.md文档入手。

2.3.1 拦截器的作用

Axios 提供了请求拦截器和响应拦截器来分别处理请求和响应，它们的作用如下：

请求拦截器：该类拦截器的作用是在请求发送前统一执行某些操作，比如在请求头中添加 token 字段。

响应拦截器：该类拦截器的作用是在接收到服务器响应后统一执行某些操作，比如发现响应状态码为 401 时，自动跳转到登录页。

2.3.2 拦截器的使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]  
在了解完拦截器的作用和用法之后，我们就会把焦点聚焦到axios对象，因为注册拦截器和发送请求都与它有紧密的联系。不过在看具体源码之前，阿宝哥建议先对功能点做一下梳理。以下是阿宝哥的分析思路：

Axios 的作用是用于发送 HTTP 请求，请求拦截器和响应拦截器分别对应于 HTTP 请求的不同阶段，它们的本质是一个实现特定功能的函数。这时我们就可以按照功能把发送 HTTP 请求拆解成不同类型的子任务，比如有用于处理请求配置对象的子任务，用于发送 HTTP 请求的子任务和用于处理响应对象的子任务。当我们按照指定的顺序来执行这些子任务时，就可以完成一次完整的 HTTP 请求。

既然已经提到了任务，我们就会联想到任务管理系统的基本功能：任务注册、任务编排（优先级排序）和任务调度等。因此我们就可以考虑从任务注册、任务编排和任务调度三个方面来分析 Axios 拦截器的实现。

2.3.3 任务注册  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]  
在lib/axios.js路径下，我们可以找到axios对象的定义。为了能直观地了解对象之间的关系，阿宝哥建议大家在读源码的过程中，多动手画画图。比如阿宝哥使用下图来总结一下Axios对象与InterceptorManager对象的内部结构与关系：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]  
2.3.4 任务编排

现在我们已经知道如何注册拦截器任务，但仅仅注册任务是不够，我们还需要对已注册的任务进行编排，这样才能确保任务的执行顺序。

同样对于任务编排，也可以使用图的形式来展现任务编排后的结果。这里有一个小技巧，就是可以采用对比的形式来展示任务编排后的结果，这样子会更加清楚任务编排的处理逻辑。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 9]  
2.3.5 任务调度

任务编排完成后，要发起 HTTP 请求，我们还需要按编排后的顺序执行任务调度。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 10]  
需要注意的是：在阅读源码过程中，不要太在意细节。比如在研究 Axios 拦截器原理时，不需要再深入了解dispatchRequest背后的具体实现，只需知道该方法用于实现发送 HTTP 请求即可，这样才不会把整个线路拉得太长。

在分析完特定的功能点之后，也许你已经读懂的具体的源代码。但阿宝哥觉得这并不是最重要的，更重要的是思考它的设计思想，这样设计有什么好处，对于我们有没有什么值得借鉴和学习的地方。比如参考 Axios 拦截器的设计模型，我们就可以抽出以下通用的任务处理模型：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 11]  
上面以 Axios 的拦截器为例，分享了读 Axios 源码的思路与技巧。接下来阿宝哥来分享一些读源码的建议和辅助工具。

三、读源码的建议  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 12]  
四、读源码辅助工具

如果你对下列辅助工具感兴趣的话，可以通过以下图片来源的链接，来直接打开每个工具的在线地址。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 13]  
五、总结

其实除了上面的内容之外，读优秀开源项目还有挺多值得关注的地方。在学习 BetterScroll 项目源码时，总结了一张思维导图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 14]  
下面用一张图来总结一下 axios 和 better-scroll 这两个开源项目的学习路线：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 15]

> 我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流3000人裙：前面：851 中间：231  
> 最后：348。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

1、Axios 项目的切入点是从 Github 中的功能特性中筛选出来的；

2、BetterScroll 的切入点是从掘金上BetterScroll 2.0 发布：精益求精，与你同行这篇文章中介绍的功能亮点中找到的。

除此之外，阿宝哥也来简单总结一下本文介绍的读源码的思路与技巧：

站在巨人的肩膀，提前阅读一些项目相关的优质文章；

汇总学习或工作中遇到的问题，带着问题进行源码学习；

明确阅读源码的主线或切入点；

尽可能从简单的示例出发来分析每个功能点；

先梳理清楚主要流程，不要太在意细节，避免把整个线路拉得太长；

在阅读源码过程中，要多多画图，这样理解起来会更加直观。

本文分享了个人读源码的思路、技巧与工具，希望阅读完本文能对你有所启发或帮助。如果你有读源码更好的思路与技巧，欢迎随时交流哈。有写得不好的地方，也请各位见谅哈。

> 作者：阿宝哥  
> 链接：https://juejin.im/post/6887689159918485511  
> 来源：掘金

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/aaf2425dd82741b3b2a2f0e1428c27bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/5faffdbb676b47e5a7915d3f28d58800.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/f2ea0328a84549e89936e9b2b1b3b7d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201027150714115.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201027150723142.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201027150732544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20201027150743130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]: https://img-blog.csdnimg.cn/2020102715075319.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]: https://img-blog.csdnimg.cn/20201027150802918.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 9]: https://img-blog.csdnimg.cn/20201027150813533.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 10]: https://img-blog.csdnimg.cn/20201027150823494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 11]: https://img-blog.csdnimg.cn/20201027150937647.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 12]: https://img-blog.csdnimg.cn/20201027150945969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 13]: https://img-blog.csdnimg.cn/2020102715095634.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 14]: https://img-blog.csdnimg.cn/20201027151005755.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 15]: https://img-blog.csdnimg.cn/20201027151016317.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70#pic_center