阅读前端项目源码的正确姿式

这篇文章主要介绍下笔者看源码的一些心得和方式，因为笔者看的大部分是前端项目，固然也看过一些其它领域的源码，不过很少，因此内容主要仍是之前端项目为主

了解和熟悉

1. 在准备看一个开源项目源码的时候先去熟悉下这个项目的背景、功能以及相应的API。这步为了理解整个项目的功能作准备，也是为了后面重点看哪些模块作准备
2. 查看项目的README.md文件。有些项目会在将设计文档和架构图放到md文件上，这样会让你宏观上对一些概念有些认识。例如immer

3. 查看项目总体的文件结构。好比下面提到一些重点须要查看的文件

   • package.json，能够从这个文件看到整个项目的入口文件、开发/测试/发布编译的各类命令，也能够了解到项目的依赖库、工具以及框架等等。
   • webpack/gulp/rollup配置文件，从这个文件里面能够看到项目总体的工具配置，也包含入口文件以及编译以后的代码文件，以及一些配置项的功能

4. 知道一些默认命名的文件规则，好比

   • dist，表示编译以后的源文件

   • src，源代码文件

     • index.xx，通常会用来做为前端的入口文件
     • app.xx、server.xx，通常会用来作后端的入口文件
   • static，静态文件，前端项目通常都会用来做为给浏览器运行的入口文件

   • test，测试用例文件夹

     • e2e，端对端测试
     • unit，单元测试
   • ...

这期间哪怕你遇到一些文件你不知道有什么用，有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上面阅读源码的时候能够先从一些小的项目入手，好比实现了某个功能或者组件这样的项目，先不要看一些大而全的框架，比较容易上手，当你积累了必定的经验后再尝试下看框架的源码。
另外搭配一些工具来阅读或者会更好，笔者推荐一些工具给你们

• Octotree，浏览器扩展，在github上面显示代码树，对你了解整个项目结构有着很是大的帮助
• webstorm，这个看我的喜爱吧，笔者比较喜欢WS，主要是里面的工具比较全面，好比支持typescript、babel等等一些前端常常用到的工具
• SourceTree，git可视化客户端工具，若是你喜欢从第一个commit开始看，那么这个工具对你比较有帮助，看看快速了解到每一个版本提交的内容以及源码变动记录，笔者之前比较喜欢用这个，可是后面WS有自带的可视化工具以后就没用过了。

总结

学习项目源码不是一蹴而就，每每周期比较长，最好的就是可以将项目Fork下来，单独准备好一份笔记，慢慢去研究、记录看源码过程当中的一些心得，到最后看完再回过头来你能说出它的架构和设计，那么我以为这个学习是有意义，因此我认为阅读源码的终究目标是了解项目，最终能实现它