HTML5教程

我是怎么快速阅读前端包源码?

本文主要是介绍我是怎么快速阅读前端包源码?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

在我们开发的过程中,都会使用第三方库出现问题需要快速修复,都需要阅读源码,而时间可能是比较紧急的,那平时如何养成快速的阅读源码的能力,就是我们的必修课了,而经常阅读优秀的源码,我们的水平和思想也会有明显的提升

这里我简单介绍一下我的思路,这里以前端的包为例子

背景和理念

在准备看代码之前,对文档网站(或者README.md)先过一遍

  • 这个库解决了什么问题?

  • 解决相同问题的库都有哪些?

  • 如果有解决相同问题的库,为什么还要另做这一个?他们之间有什么区别

  • 这个库的理念是什么?

  • 有什么功能、配置?

  • 了解项目怎么跑起来

做到心里有数,有些库甚至会将架构也放到文档里,然后了解整个文件结构,通过package.json

  • scripts有哪些脚本

  • 依赖了哪些库

一般可能是webpack、rollup、vite,typescript等打包工具配置的,都会有入口和出口文件

确定方向

看完背景和理念,就可以开始针对某个功能,确定方向了,带着问题去debugger,你需要解决什么问题,这个问题可能是由哪些功能影响的,或者你需要了解什么功能

阅读

有了方向就可以开始查看代码,这时候,如果是比较老的项目,我建议是下载最新的,除非刚开始没多久,那可以从第一个commit开始看,一般会从入口文件开始看,先了解下整个项目的架构,迅速找到模块的文件,开始了解,有些读不懂的也可以先跳过,打上标记,知道是做什么用的就行了,如果你觉得一些实现的很巧妙也可以记录下来,当粗略读完的时候,就可以开始尝试打断点一下不懂的地方,逐步了解

如果有测试用例,也可以查看测试用例,可以快速了解函数的输入和输出、以及使用边界

图片描述

建议

  • 多数项目都可以搭配 Vscode 的调试查看代码,调试的时候查看也是非常的方便

  • 将实现巧妙的片段记录下来,多想想为什么会这么实现,有其他的方案

  • 了解不同项目的流程是有哪一些

  • 可以搭配往上的阅读源码系列的文章一起看,顺便记录下看过的资源

如果没有什么目标,可以先从工作当中使用的库,从小型的库开始阅读,比如某个UI组件也可以

最后

有时候大型项目的源码的阅读不是一次就能够读完的,最好还是有笔记记录一下,而阅读后解决了问题,或者能够说出功能实现思路,并且能实现它,我觉得这次阅读源码就是成功了,就是有意义的,并且尝试用费曼学习法,去给别人输出出来(无论是口述、文章等),输出的过程中可能也会发现自身有一些点有遗漏,再去补充即可

这篇关于我是怎么快速阅读前端包源码?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!