高效读源码

如何高效阅读开源项目的源码

解答一

0、了解项目的技术背景

我默认你是知道你要看的开源项目是干嘛的，比如 RocketMQ 是消息队列，消息队列是干嘛的你应该先知道。我也默认你用过这个开源项目，业务上没用过自己私下也要先用用，了解简单功能怎么用，让它先跑起来。如果是内部的项目，直接看项目文档。了解项目使用的框架和主要技术。

1、看名词概念

了解具体涉及到的概念、名称、特性、架构这是第一步。这一步能让你脑子里有个角色分布图和数据流转图，让你明白整体项目的主要角色及之间的交互。

2、看源码目录

你得先知道每个目录是干嘛的涉及哪些功能，这其实和你看业务源码一样。

3、找突破口

这种开源项目都有 demo ，打断点就完事儿了！(找到入口文件或者主函数)

知晓大体会涉及到的角色和数据流转之下读源码，

你会对一些方法调用有一种“认可感”，因为你知晓大致的流程，所以觉得本该如此。

4、理清核心流程

先拷贝一份，然后把一些异常处理和不常见的分支先删了。

并且理清楚了一个流程之后开始画图，流程图、脑图都上。

清楚之后再看没删减的代码，把异常处理的一些也理解了，补充完整流程图、脑图等。

看看我之前分析 Kafka 的时候画的图，就类似这样的搞清楚一个流程：

先略过一些不能理解的细节，主流程先搞懂。

5、理解细节

所以在理清整体流程之后不要错过细节。往往你觉得很奇怪的地方可能就是一些“骚操作”，学的就是“骚操作”。

为了找bug而读源码

这个目的性很强，有时候是项目出错，一般而言有日志，所以通过日志搜就行。

如果你本身对这个框架很熟悉那当然最好，如果不熟悉通过日志搜索结合上下文其实也能找到一些缘由。

不过有时候还是得整个链路分析下来才能排查问题，这个看功力了。

有时候是因为看到一些文章的说法冲突了，一篇说 A 另一篇说 B 。

如果你找不到权威的信息你只能自己去看源码，通过关键字搜。

解答二

高效读代码的核心不在于读，而在于动手。

IT行业是最典型的工科行业，要的不是多么高深的理论基础，而是不断动手实战，很多问题只看不做，等于没看。要想高效理解，深度理解，必须在看代码的同时配合动手练习。

其实在读代码的同时，做好以下七个步骤即可：

1、弄清楚这个项目的作用和主要用到的技术及框架

2、部署项目，并设置debug模式

3、先从前端每个主要功能都走一遍

4、每个action的方法打断点，action中因为有断点，比如java后端代码，acting、service、DAO都走一遍

5、用visio或艺图把类结构图和代码流程图画出来(问下自己，有没有可以参考的visio文档？)

6、尝试修改一些代码逻辑，让项目继续跑起来，看看能发生什么奇妙的事情

7、抽离主干代码，重建工程，再重新填充逻辑代码，尝试是否能让项目跑起来且功能基本一致

这七个步骤反复做，不光能吃透目，也可以拿来学习各种开源项目。

案例链接

下面是两个源码解析：VUE+REACT

https://github.com/answershuto/learnVue

https://github.com/7kms/react-illustration-series

实际案例

以 table 项目为例

0、技术背景

产品介绍：这是一个轻量级的在线表格+数据库，以表格、列表、统计等多种形式展现数据。本质上是管理数据，展示数据的项目。
前端框架是 react
组件库是 reactstrap + ant-design mobile
没有状态管理工具(react-redux)
开发工具是 webpack + babel
样式是 css + 少量 less
其他的第三方库有 moment dayjs calendar g2 lodash deep-copy is-hotkey conva image-lightbox 等

1、名词概念(model)

这个阶段只是定性了解核心名词，不涉及全部的属性
base 一个表格，这是操作的基本单位
folder 一个文件夹，内部包含若干表格
table 一个子表，类似 Excel 中一个 sheet 界面显示成一页表格
row 表格中的一行
column 表格中的一列
cell 表格中的一个单元格

2、看源码目录

可以使用 tree 命令，查看 src 下面的目录

3、找突破口

找到 index.js app.js 入口文件查看主要的依赖，如果项目很大，可以写成树形结构图

4、理清核心流程

react 是典型的状态驱动，那么只要把数据(状态)的传参理清，就理清了项目的核心流程

可以把项目跑起来，然后在浏览器控制台，查看 react 组件的层级(实际上可能有20层)，核心流程可能有很多

表格数据流：app - table - table main - reactDataGrid- Grid - canvas - row - cell 渲染如何实现，保存如何实现
表单数据流：formConfig - header + main + footer , header = title + background + describe, main = columns 提交表单
统计数据流：data - label - axix (统计只做展示，单项数据流)展示方式为饼图，折线图，柱状图，气泡图等
数据存储：UI 层通过 API 调用 action，改变 store 中的数据，然后触发全局或者部分 state 更新，更新页面。用户的每个操作使用 action 队列实现，这样可以实现多人协同和 undo+redo 操作。

5、其他细节

Column 的属性配置
过滤筛选分组的逻辑，动画实现
长文本渲染和数据转换(普通视图和归档视图)
数据处理的实现
通知规则和自定义规则的前端实现

6、更改删除一部分代码，看项目是否正常运行(例如删除统计部分，或者更改统计的配置)