如何阅读前端源码

GPT时代，写知识类的博客变得越来越没有必要，论知识储备谁赶得上chatGPT😒。于是我决定开始写写经验类的，把blog作为记录个人经验和想法的工具吧。😀

整体思路

1. 先把代码跑起来，方便调试
2. 开始看,看的时候注意两点：

• 全局上，利用思维导图，梳理出所有的流程,或者核心的流程。

• 细节上，对于读不懂的地方，把代码贴给chatGPT，寻求答案。

如果你阅读的是项目代码

一般来说流程如下：

1. 把项目跑起来
2. 看路由，看有哪些页面
3. 看自己需要修改的模块是哪个，去看对应的代码

如果是Vue项目，一般一个模块是一个.vue文件。

个人的习惯是：

• 看<template>中的html代码，看视图是怎样的。
• 看mounted等初始化生命周期，里面会有初始化流程。
• 看html中绑定的事件，看下页面事件交互逻辑。

如果是React，也差不多，以函数式组件举例：

• 看函数组件return的html代码，看视图是怎样的
• 看初始化流程。代码一般在 useEffect中。
• 看页面交互逻辑。代码从视图(html)代码中开始找。

梳理出主要流程之后，用思维导图记录一下，个人的习惯是 记录代码截图(包含代码行数)

说一下为什么用思维导图记录

一个主要的原因是，用思维导图可以很方便地记录函数调用栈。

举个例子在main()函数中调用函数a()和b()，在函数a中调用c()和d()

可以看到在图中所有的流程都可以看到，很清晰，而且我可以正着看，也可以倒着看。

思维导图和函数调用栈简直是绝配

如果你阅读的是开源项目代码

阅读开源项目代码一定要紧贴文档去看。

1. 根据文档梳理出主要的流程，每个流程去深入。

2. 文档上介绍一下方法，你自己想想它是如何实现的，然后去看代码，对比和作者思路的差异。

编辑器

看源码，你的编辑器要能跳转

• 遇到某个函数调用，点击(一般是按住一个什么键再点击command或者ctrl)可以跳转到定义
• 可以调过去，也可以调回来，最好绑定快捷键(这个操作的名称叫”返回上一个位置“)

一些技巧

1. 如果你看的是github上的一些比较老的前端代码，可能你很难跑起来，因为项目依赖了乱七八糟的开发环境，这时候你可以试试vite,使用vite新建一个对应的项目（js、ts、vue、react），把源码放到vite新建的项目中跑。

2. 问一下chatGPT有没有对应的语料库，有的话让chatGPT先讲一下该库设计的整体的思路。

3. 你可能需要了解下断点调试。如何打断点，如何进入一个函数，如何出来，如何跳到下一个断点。

以上均为个人浅见+碎碎念，有问题评论区评论😀。