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

导语 这篇文章主要介绍下笔者看源码的一些心得和方式,由于笔者看的大部分是前端项目,当然也看过一些其它领域的源码,不过不多,所以内容主要还是以前端项目为主。

了解和熟悉

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个方式可以了解到

1、直接用google搜该文件名,往往能找到相关答案,比如.eslintrc.js:

2、进去看文件内容,一般会有注释,如果都没有的话说明这个文件往往不是很重要,可以先忽略。

上手

做完前面的准备工作后,这时候你应该对这个项目有一个大致的了解,这里你可以先简单写写你对这个项目的一些疑惑,请注意!!!这里的问题很重要,因为看源码必须要带着问题去看,不然你会摸不到方向。至于这里的问题,你可以先列个清单,比如mpvue

  • 小程序是不支持npm引入库文件的,但是mpvue支持,是怎么做到的呢?
  • 小程序和vue都有自己的生命周期,框架是怎么去兼容?
  • mpvue是怎么样让小程序支持单文件组件(.vue)
  • …..

接着我可以开始正式的看源码了,这里容我说句题外话。有人可能喜欢先从第一个commit看起,因为第一个commit的源码会比较简单易懂,但是我并不喜欢这样,因为第一个commit的代码往往跟现有的文档差距比较大(除非这个项目比较新),无法了解到整体的结构,而且第一个commit的代码可能跟最新的代码在架构上面有着翻天覆地的变化,反而做了一些无用功。

1、入口文件,几乎所有的项目都会有一个入口文件,其实你做上面的准备工作之后,基本你都能找到入口文件,无非就是从2个方面入手

  • package.json,因为是入口文件,一般都会使用默认命名,比如in
  • dex.xx app.xx之类。

2、工具的配置文件,比如webpack的entry字段,gulp.src执行的文件路径等等

以模块为单元开始阅读,带着你上面准备的问题,抽丝剥茧、层层深入。这里分享一个小技巧,可以先Fork下一个项目,在阅读的过程中不断加上自己的注释和理解,一个好的项目往往在结构上面都是很清晰,例如

好的源码是可以从命名上面都能直接给读者一些信息,方便阅读。

3、当你深入读到某一块源码不理解,先试着在网上找找有没有相关的资料学习下,实在找不到可以先标记下放着,等你看到后面再回过头来看不理解的地方或者会茅塞顿开。

技巧

1、在你阅读的过程中,如果发现一些代码片段很精妙的可以记录一下,或者尝试下有没有更好的方式去实现,也许你就成了这个项目contributors了

2、当你不了解某个模块的作用时,你可以去看看测试用例,特别是单元测试(unit),测试用例包含对输入输出的校验,从这里可以快速了解到模块相关的作用

3、要学会给项目打断点,在边读边运行项目源码的过程中,通过断点输出当前执行的堆栈信息对你理解项目也是有很大的帮助

建议

初学者在github上面阅读源码的时候可以先从一些小的项目入手,比如实现了某个功能或者组件这样的项目,先不要看一些大而全的框架,比较容易上手,当你积累了一定的经验后再尝试下看框架的源码。

另外搭配一些工具来阅读或者会更好,笔者推荐一些工具给大家

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

总结

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

---------------------------------------------------------------

原文作者:腾讯工程师邹世杰。

来源:腾讯内部KM论坛。

原文发布于微信公众号 - 腾讯NEXT学位(NextDegree)

原文发表时间:2018-08-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开源优测

有那么几张图给大家看看

681
来自专栏听雨堂

读书笔记:基于web的工作流引擎设计

1、工作流引擎以工作流管理联盟的XPDL(XML Process Definition Language)语言为过程定义语言。 2、基于B/S结构的工作流系统...

3459
来自专栏编程

开发一款app从PHP到API接口

一、先简单回答两个问题: 1、PHP 可以开发客户端? 答:不可以,因为PHP是脚本语言,是负责完成 B/S架构 或 C/S架构 的S部分,即:服务端的开发。(...

3509
来自专栏FreeBuf

看我如何发现Google云平台漏洞并获得$7500赏金

本文讲述了一名乌拉圭17岁高中生,因对信息安全感兴趣,通过学习研究,独立发现谷歌云平台漏洞并获得$7500美金(此前,他曾发现了价值$10000美金的谷歌主机头...

4518
来自专栏古时的风筝

学了两天 react,乱讲一下学习思路,顺便弄了一个脚手架

现在的项目基本上都是前后端分离的,后端就先不提了。前端的框架也是层出不穷,使用最多的就是 angular、vue、react 。angular 是前几年用的比较...

943
来自专栏猿人谷

三种Linux服务器监控技术的对比

本文介绍三种Linux服务器监控技术的优缺点,其中有SNMP代理(客户端)方式、SSH方式、安装私有代理(客户端)方式等内容。 Linux系统的强大的功能和绚丽...

2277
来自专栏Netkiller

压力测试中存在的问题

压力测试中存在的问题 (What) 什么是压力测试 软件压力测试是一种基本的质量保证行为,它是每个重要软件测试工作的一部分。软件压力测试的基本思路很简单: 不是...

2934
来自专栏Java后端技术栈

秒杀系统的技术挑战、应对策略以及架构设计总结一二!

秒杀是电商常见的一种营销手段:将少量的商品,以极低的价格,在特定的时间点开始出售,网站通过这种营销手段,制造某种轰动效应,从而达到网站推广的目的,秒杀虽然对网站...

992
来自专栏匠心独运的博客

过来人的经验,谈谈一致性处理方案—分布式事务(DTS)

传统事务是使用数据库自身的事务属性(ACID),而数据库自身的事务属性是局限于当前实例,不能实现跨库。而对于大型分布式/微服务集群系统中,不仅存在着跨库的事务,...

3154
来自专栏大葡萄元元

开发一款app从PHP到API接口

答:不可以,因为PHP是脚本语言,是负责完成 B/S架构 或 C/S架构 的S部分,即:服务端的开发。(别去纠结 GTK、WinBinder)

3481

扫码关注云+社区