react、vue项目代码阅读熟悉技巧

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

---

1. 拉项目，先熟悉项目的README.md项目介绍，主要了解项目的技术栈、运行命令、配置项（如配置什么请求域名）、测试账号、注意事项等等。
2. 再来熟悉项目的package.json文件，主要了解项目的运行命令、技术栈、大致的依赖包等。
3. 安装项目，启动项目。项目能很顺利的运行在好不过了，如果运行不了还是需要找你给你项目的人要账号或配置项什么的。
4. 观赏项目成果，主要大致了解业务功能、功能框架（大致多少功能组成）等。
5. 了解项目文件夹结构目录，如页面在哪个、路由在哪、接口在哪、状态在哪、静态资源在哪等等。
6. 不建议直接阅读源码，如果项目庞大很容易伤信心，要结合运行的项目页面和源码一起阅读，可以在运行的项目大致的可以估出多少个功能页面，做好心里有数，然后制定优先级页面对照源码来熟悉，优先从项目打开第一个页面开始看。
7. 好记性不如烂笔头，建议项目git切出注释分支，不要提交远程只给自己注释源码用的本地分支，项目如果有注释那可能是最幸福了。页面对照源码时，看懂的地方注释自己的懂的意思，慢慢叠加注释很容易克服阅读项目困难。通过注释来增加项目的阅读足迹慢慢的你会对项目有了把控信心、方便后面反复阅读，增加你对项目描述的能力。
8. 阅读项目功能遵循由浅到深、由整体到细节。要做到快速的对项目有全局对把控，心里要有项目的大致框架。一般情况下项目是由多个页面组成，页面是由多个组件功能组成，一个组件功能由多个小组件组成等，按照这样的规律了由上至下阅读，浅阅读掌握到页面级别差不多就可以了。

9. 优先级阅读项目、选择性功能阅读。如果遇到项目着急入手开发，那就更应该注重优先级阅读策略，如果没有遇到也应该要养成这样良好习惯，这将会增加你的摸鱼时间。分析项目着急开发的功能，整理出涉及开发相关的页面，将重点阅读；当项目开发时间宽松，也要分析整理出热业务功能页面，重点阅读，其他不重要的如个人中心页面、登录页面等冷业务页面后面将简单过下就行了，这也是根据情况来制定该策略。

10. 页面位置查询阅读。阅读一个页面html的时候，可能很多时候一个页面会封装很多的组件，不知道哪个组件对应浏览器页面哪一个范围部分，除了看组件名字定义和组件页面的关键字对应找，还可以利用class名称，再谷歌浏览器调试工具的元素一栏下，直接ctrl+f查类名，会直接看到大致的范围。再进行描述注释。

11. 链式阅读。经常会遇到js嵌套很深的方法难以很快阅读，建议尝试用vscode或者其他工具查询功能，耐心的找到调用的或封装定义的源头，通过大致的查阅调用链和源头的表达再和方法名的定义给一个大致的注释。

12. 以上是我大致等常用阅读方式，通过我个人等经历感悟：在各种情况下我自己会灵活把控制定上面的阅读策略，常常以很短时间内掌握项目、开发项目，总会是令人吃惊和认可。你只要有一点毅力和多点策略，相信你可能也是可以的。

---

多多关注，分享干货。