reactvue项目熟悉技巧

Posted 2022-01-01 3个半只松鼠

在没有人给你解读项目的情况下，接手到老项目该如何开始起步熟悉呢？除了要大致到了解项目业务背景、技术栈，还应该要有通用化熟悉项目的技巧，每个人熟悉项目习惯技巧都不一样，尊重每个人的习惯和想法，建议收藏以下我的分享的熟悉项目技巧。

1. 拉项目，先熟悉项目的README.md项目介绍，主要了解项目的技术栈、运行命令、配置项（如配置什么请求域名）、测试账号、注意事项等等。
2. 再来熟悉项目的package.json文件，主要了解项目的运行命令、技术栈、大致的依赖包等。
3. 安装项目，启动项目。项目能很顺利的运行在好不过了，如果运行不了还是需要找你给你项目的人要账号或配置项什么的。
4. 观赏项目成果，主要大致了解业务功能、功能框架（大致多少功能组成）等。
5. 了解项目文件夹结构，如页面在哪个、路由在哪、接口在哪、状态在哪、静态资源在哪等等。
6. 不建议直接阅读源码，如果项目庞大很容易伤信心，要结合运行的项目页面和源码一起阅读，可以在运行的项目大致的可以估出多少个功能页面，做好心里有数，然后制定优先级页面对照源码来熟悉，优先从项目打开第一个页面开始看。
7. 好记性不如烂笔头，建议项目git切出注释分支，不要提交远程只给自己注释源码用的本地分支，项目如果有注释那可能是最幸福了。页面对照源码时，看懂的地方注释自己的懂的意思，慢慢叠加注释很容易克服阅读项目困难。通过注释来增加项目的阅读足迹慢慢的你会对项目有了把控信心、方便后面反复阅读，增加你对项目描述的能力。
8. 阅读项目功能遵循由浅到深、选择性功能阅读。经常会遇到js嵌套很深的方法难以很快阅读，建议尝试用vscode或者其他工具查询功能，耐心的找到调用的或封装定义的源头，通过大致的查阅调用链和源头的表达再和方法名的定义给一个大致的注释。
9. 阅读一个页面html的时候，可能很多时候一个页面会封装很多的组件，不知道哪个组件对应浏览器页面哪一个范围部分，除了看组件名字定义和组件页面的关键字对应找，还可以利用class名称查找，再谷歌浏览器调试工具的元素一栏下，直接ctrl+f查类名，会直接看到大致的范围。再进行描述注释。
10. 时间原因，我后面有时间在补上，关注下后面会发更多干货。