拿到一个新项目,浅谈阅读代码心得
入职第一天,算是我的mentor吧,给到我两个项目源码,也可以说一个项目,因为其中一个项目算是另一个项目的一部分。
然后第一步就是将项目跑起来咯。
由于项目要用到内部接口,mentor帮我安装内部vpn,然后 npm install
一个项目跑起来了,另一个项目没跑起来,遂换yarn安装,一番操作,success!
好,一上午就这么过去了,(捂脸
由于整个项目源码是比较多的,大致一看可以了解到项目栈是 react
由于我们接下来的任务是完成项目子页面的移动端适配部分,所以mentor就让我优先阅读这部分代码
好家伙,nm的,我光找这个页面的源码就找了好大一会。
最后找了好久也算找到了
现在回过头来看,我只能说,要善于搜索!
快速定位页面对应源代码
相信大部分前端项目我们用 VSCode 比较多吧。
就比如要找一个页面的源代码
页面本地运行路径 http://localhost:8000/layout/home
那么这个路径就很关键了,一个标准的项目,它的页面路由应该是项目对应路径的最后部分
我们可以直接在vscode搜路径,由路由找到对应引用到的组件
这样的话,只需要看对应路由文件,然后看它引用的组件即可定位!
查看请求的数据
我们可以在运行后,再次刷新页面,打开Chrom 检查->网络
这个部分就是向后端发起请求过来的json
数据
然后可以打开在线json
解析的网站,复制json
数据到上面,这样展示出来的json
数据可读性较好
这里推荐一个 https://www.json.cn/
还有就是要熟悉git的那几种命令 比如切换分支、拉取分支、规范提交信息这些
mentor让我拉取项目时候,他说着我敲着(捂脸
这里给到提交git commit的一些规范
feat:新功能(feature)
fix:修补bug
docs:文档(documentation)
style: 格式(不影响代码运行的变动)
refactor:重构(即不是新增功能,也不是修改bug的代码变动)
test:增加测试
chore:构建过程或辅助工具的变动
暂时就是这些了,感谢阅读
冲ya!