|
1、了解和熟悉
在准备看一个开源项目源码的时候先去熟悉下这个项目的背景、功能以及相应的API。【这步为了理解整个项目的功能做准备，也是为了后面重点看哪些模块做准备】
查看项目的README.md文件。有些项目会在将设计文档和架构图放到md文件上，这样会让你宏观上对一些概念有些认识。例如immer
查看项目整体的文件结构。
（1）比如下面提到一些重点需要查看的文件
package.json，可以从这个文件看到整个项目的入口文件、开发/测试/发布编译的各种命令，也可以了解到项目的依赖库、工具以及框架等等。
webpack/gulp/rollup配置文件，从这个文件里面可以看到项目整体的工具配置，也包含入口文件以及编译之后的代码文件，以及一些配置项的功能
（2）知道一些默认命名的文件规则，比如
e2e，端对端测试
unit，单元测试
index.xx，一般会用来作为前端的入口文件
app.xx、server.xx，一般会用来做后端的入口文件
dist，表示编译之后的源文件
src，源代码文件
static，静态文件，前端项目一般都会用来作为给浏览器运行的入口文件
test，测试用例文件夹
…这期间哪怕你遇到一些文件你不知道有什么用，有2个方式可以了解到
直接用google搜该文件名，往往能找到相关答案，比如.eslintrc.js
进去看文件内容，一般会有注释，如果都没有的话说明这个文件往往不是很重要，可以先忽略
二、上手
做完前面的准备工作后，这时候你应该对这个项目有一个大致的了解，这里你可以先简单写写你对这个项目的一些疑惑，请注意！！！这里的问题很重要，因为看源码必须要带着问题去看，不然你会摸不到方向。至于这里的问题，你可以先列个清单，比如mpvue
小程序是不支持npm引入库文件的，但是mpvue支持，是怎么做到的呢？
小程序和vue都有自己的生命周期，框架是怎么去兼容？
mpvue是怎么样让小程序支持单文件组件(.vue)…
接着我可以开始正式的看源码了，这里容我说句题外话。有人可能喜欢先从第一个commit看起，因为第一个commit的源码会比较简单易懂，但是我并不喜欢这样，因为第一个commit的代码往往跟现有的文档差距比较大（除非这个项目比较新），无法了解到整体的结构，而且第一个commit的代码可能跟最新的代码在架构上面有着翻天覆地的变化，反而做了一些无用功。
1.入口文件，几乎所有的项目都会有一个入口文件，其实你做上面的准备工作之后，基本你都能找到入口文件，无非就是从2个方面入手
package.json，因为是入口文件，一般都会使用默认命名，比如index.xx app.xx之类。
工具的配置文件，比如webpack的entry字段，gulp.src执行的文件路径等等
2.以模块为单元开始阅读，带着你上面准备的问题，抽丝剥茧、层层深入。这里分享一个小技巧，可以先Fork下一个项目，在阅读的过程中不断加上自己的注释和理解，一个好的项目往往在结构上面都是很清晰
好的源码是可以从命名上面都能直接给读者一些信息，方便阅读。
3.当你深入读到某一块源码不理解，先试着在网上找找有没有相关的资料学习下，实在找不到可以先标记下放着，等你看到后面再回过头来看不理解的地方或者会茅塞顿开。
三、技巧
1.在你阅读的过程中，如果发现一些代码片段很精妙的可以记录一下，或者尝试下有没有更好的方式去实现，也许你就成了这个项目contributors了
2.当你不了解某个模块的作用时，你可以去看看测试用例，特别是单元测试(unit)，测试用例包含对输入输出的校验，从这里可以快速了解到模块相关的作用
3.要学会给项目打断点，在边读边运行项目源码的过程中，通过断点输出当前执行的堆栈信息对你理解项目也是有很大的帮助
四、建议
初学者在github上面阅读源码的时候可以先从一些小的项目入手，比如实现了某个功能或者组件这样的项目，先不要看一些大而全的框架，比较容易上手，当你积累了一定的经验后再尝试下看框架的源码。
五、总结
学习项目源码不是一蹴而就，往往周期比较长，最好的就是能够将项目Fork下来，单独准备好一份笔记，慢慢去研究、记录看源码过程中的一些心得，到最后看完再回过头来你能说出它的架构和设计，那么我觉得这个学习是有意义，所以我认为阅读源码的终究目标是了解项目，最终能实现.
|