共计 3248 个字符，预计需要花费 9 分钟才能阅读完成。
近期阿宝哥在团队内搞了一个 如何读源码 的专题，次要目标是让团队的小伙伴们了解读源码的思路与技巧。在此期间，阿宝哥也写了 77.9K 的 Axios 我的项目有哪些值得借鉴的中央、从 12.9K 的前端开源我的项目我学到了啥 和 如何让你的 Express 飞起来 三篇源码解析的文章。其中前两篇在 掘金社区 取得不错的评估，均匀 705+ 个 ????，所以阿宝哥就想写一篇文章来分享一下自己读源码的思路、技巧与工具。
好的，让咱们开始登程吧！在进入正题之前，咱们先来个读源码前的 灵魂四连问 热热身。
一、灵魂四连问
1.1 为什么要读源代码
1.2 如何抉择我的项目
1.3 如何浏览源码
1.4 有理论的案例么
既然前两篇文章比拟受大家喜爱，接下来阿宝哥就以最受欢迎的 Axios 为例，来分享一下读源码的思路与技巧。
二、如何品读 Axios？
2.1 走进 Axios
Axios 是一个基于 Promise 的 HTTP 客户端，同时反对浏览器和 Node.js 环境。它是一个优良的 HTTP 客户端，被宽泛地利用在大量的 Web 我的项目中。
由上图可知，Axios 我的项目的 Star 数为 78.1K，Fork 数也高达 7.3K，是一个很优良的开源我的项目，所以值得大家细细品读。
2.2 发现 Axios 的美
在确认 Axios 为“谋求指标”之后，下一步咱们就须要来发现它身上的长处（个性）：
每个人对“美”都有不同的认识，对于阿宝哥来说，我看中了图中已选中的三点。因而，它们也很光彩地成为读源码的三个切入点。当然切入点也不是越多越好，能够先找本人最感兴趣的中央作为切入点。须要留神的是，如果切入点之间有关联关系的话，倡议做个简略的排序。
2.3 感触 Axios 的美
抉择切入点之后，咱们就能够开始逐个感触 Axios 的设计之美。以 可能拦挡申请与响应 这个切入点为例，首先咱们就会接触到 拦截器 的概念。所以咱们须要先理解拦截器是什么、拦截器有什么作用以及如何应用拦截器，这里咱们能够从我的项目的 官网文档 或者我的项目中的 README.md 文档动手。
2.3.1 拦截器的作用
Axios 提供了申请拦截器和响应拦截器来别离解决申请和响应，它们的作用如下：
- 申请拦截器：该类拦截器的作用是在申请发送前对立执行某些操作，比方在申请头中增加 token 字段。
- 响应拦截器：该类拦截器的作用是在接管到服务器响应后对立执行某些操作，比方发现响应状态码为 401 时，主动跳转到登录页。
2.3.2 拦截器的应用
// 增加申请拦截器 —— 解决申请配置对象
axios.interceptors.request.use(function (config) {
config.headers.token = 'added by interceptor';
return config;
});
// 增加响应拦截器 —— 解决响应对象
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 对象，因为注册拦截器和发送申请都与它有严密的分割。不过在看具体源码之前，阿宝哥倡议先对性能点做一下梳理。以下是阿宝哥的剖析思路：
Axios 的作用是用于发送 HTTP 申请，申请拦截器和响应拦截器别离对应于 HTTP 申请的不同阶段，它们的实质是一个实现特定性能的函数。这时咱们就能够依照性能把发送 HTTP 申请拆解成不同类型的子工作，比方有 用于解决申请配置对象的子工作 ， 用于发送 HTTP 申请的子工作 和 用于解决响应对象的子工作。当咱们依照指定的程序来执行这些子工作时，就能够实现一次残缺的 HTTP 申请。
既然曾经提到了工作，咱们就会联想到工作管理系统的基本功能：工作注册、工作编排（优先级排序）和任务调度等。因而咱们就能够思考从 工作注册、工作编排和任务调度 三个方面来剖析 Axios 拦截器的实现。
2.3.3 工作注册
// 增加申请拦截器 —— 解决申请配置对象
axios.interceptors.request.use(function (config) {
config.headers.token = 'added by interceptor';
return config;
});
// 增加响应拦截器 —— 解决响应对象
axios.interceptors.response.use(function (data) {
data.data = data.data + '- modified by interceptor';
return data;
});在 lib/axios.js 门路下，咱们能够找到 axios 对象的定义。为了能直观地理解对象之间的关系，阿宝哥倡议大家在读源码的过程中，多入手画画图。比方阿宝哥应用下图来总结一下 Axios 对象与 InterceptorManager 对象的内部结构与关系：
2.3.4 工作编排
当初咱们曾经晓得如何注册拦截器工作，但仅仅注册工作是不够，咱们还须要对已注册的工作进行编排，这样能力确保工作的执行程序。
同样对于工作编排，也能够应用图的模式来展示工作编排后的后果。这里有一个小技巧，就是能够采纳比照的模式来展现工作编排后的后果，这样子会更加分明工作编排的解决逻辑。
2.3.5 任务调度
工作编排实现后，要发动 HTTP 申请，咱们还须要按编排后的程序执行任务调度。
须要留神的是：在浏览源码过程中，不要太在意细节。比方在钻研 Axios 拦截器原理时，不须要再深刻理解 dispatchRequest 背地的具体实现，只需晓得该办法用于实现发送 HTTP 申请即可，这样才不会把整个线路拉得太长。
在剖析完特定的性能点之后，兴许你曾经读懂的具体的源代码。但阿宝哥感觉这并不是最重要的，更重要的是思考它的设计思维，这样设计有什么益处，对于咱们有没有什么值得借鉴和学习的中央。比方参考 Axios 拦截器的设计模型，咱们就能够抽出以下通用的工作解决模型：
下面阿宝哥以 Axios 的拦截器为例，分享了读 Axios 源码的思路与技巧。接下来阿宝哥来分享一些读源码的倡议和辅助工具。
三、读源码的倡议
四、读源码辅助工具
如果你对下列辅助工具感兴趣的话，能够通过以下图片起源的链接，来间接关上每个工具的在线地址。
（图片起源：https://www.processon.com/vie…）
五、总结
其实除了下面的内容之外，读优良开源我的项目还有挺多值得关注的中央。阿宝哥在学习 BetterScroll 我的项目源码时，总结了一张思维导图：
（图片起源：https://www.processon.com/vie…）
上面阿宝哥用一张图来总结一下 axios 和 better-scroll 这两个开源我的项目的学习路线：
1、Axios 我的项目的切入点是从 Github 中的性能个性中筛选进去的；
2、BetterScroll 的切入点是从掘金上 BetterScroll 2.0 公布：精益求精，与你同行 这篇文章中介绍的性能亮点中找到的。
除此之外，阿宝哥也来简略总结一下本文介绍的读源码的思路与技巧：
- 站在伟人的肩膀，提前浏览一些我的项目相干的优质文章；
- 汇总学习或工作中遇到的问题，带着问题进行源码学习；
- 明确浏览源码的主线或切入点；
- 尽可能从简略的示例登程来剖析每个性能点；
- 先梳理分明次要流程，不要太在意细节，防止把整个线路拉得太长；
- 在浏览源码过程中，要多多画图，这样了解起来会更加直观。
本文阿宝哥分享了集体读源码的思路、技巧与工具，心愿浏览完本文能对你有所启发或帮忙。如果你有读源码更好的思路与技巧，欢送随时跟阿宝哥交换哈。有写得不好的中央，也请各位见谅哈。
六、参考资源
- 77.9K 的 Axios 我的项目有哪些值得借鉴的中央
- 从 12.9K 的前端开源我的项目我学到了啥？
- 如何让你的 Express 飞起来