如何快速了解一个新的前端项目？

r囧r小猫 2022-10-31 00:37 199阅读 0赞

在接受一个新的项目后，要想快速了解它，就需要一种抽象思维进行剥茧抽丝，遵守项目搭建的基本规律，犹如庖丁解牛，游刃有余。 以达到可能给快速跟上团队成员的节奏进行开发。下面我就给大家总结一下，拿到一个新的前端项目后，如果进行`解牛`。这些思路可以延伸到其他项目，java，python，php。正所谓一法通，万法通。让我们开始吧。  
  
  
`庖丁解牛 游刃有余`

### 梳理数据流转 ###

**数据流转**指的是用户页面上的表单数据是创建的，获取表单数据后，调用了什么方法，做了什么验证，拦截，调用的那个http库发起的xhr请求，以及如何后端返回值的统一拦截，这是从用户到服务端的数据流转。还有就是从服务器获取数据渲染到用户页面上这个流程，期间也会调用很多方法。大多数项目都会封装一个http请求的统一处理方法。

那么熟悉这一块有什么用处那？http请求几乎是每个功能需求都需要用到的，将表单数据提交到服务端，从服务端查询数据显示到页面上。是再平常不过的功能。如果你不了解这个数据是怎么流转的，数据如何从一个方法到另一个方法的，对数据做了那些处理，那么你在做功能时会就会遇到很多问题。

如果遇到了使用vuex，或者Mobx，redux，dva，React Hooks， 这种状态管理库，一时间看不明白，最好的办法是对照着官方一起看,然后自己在模仿着现有的功能做一个增删改查。

### 路由的映射，跳转 ###

路由的调整，路由的映射，这部分也是比较重要的，但基本上，路由库就那么官方的几个，稍微看一下就能了解其用法，vue-router， React-Router。这部分不算难。需要注意的是路由守卫，拦截，这部分代码，还有菜单的配置。如果分配给你一个功能，很有可能需要配置一个新的菜单。有时候你明明按照现有的路由配置了一个新的路由，但就是无法显示在菜单里，这个时候就要通读一下有关路由逻辑处理的代码了。

### 每个目录的作用 ###

目前的前端项目大部分都是使用脚手架来生成的，所有目录一般都会大同小异。 但也有一些例外，比如我之前接触的rancher-ui这个项目，使用`ember.js`脚手架搭建，刚接触时真是让我苦恼了几个小时。

### 根据URL快速找到对应的组件 ###

这个技能是必备，而且收益最快的，试想一下，你刚入职二天，领导让你改一个页面的bug，bug上指定了是那个页面，路径也给你了，这个时候就需要你更加url快速定位到问题所在的组件。有时路由是一层套一层， 组件也是一层套一层。  
那么如何快速找到想要的组件那？ 简单的办法是使用程序员超神技能 **`全局搜索`**  
在vscode中 `CTRL + SHIFT + F` 即可打开全局搜索框。搜索关键词一点要找一些有特别的，越独特越好，最好全局唯一。 此外有些做了国际化的项目，直接搜页面的字段只能搜到国际化配置文件，这个时候就要再用配置文件做第二次搜索了。可以限制一些搜索文件。比如在 `.vue` 中搜索。

### 公共组件 ###

在开始一个任务之前最好了解项目中有哪些公共组件了，避免重复造轮子，和前辈们写的不一致。能够省下不少时间。

#### package.json中的内容 ####

package.json 这个文件里面显示了当前项目使用了那些js包，看了这个文件的内容就知道是什么技术栈了，以及使用技术。 一些用的多的核心包要多去查询文档，走在前面。 不要等到用到的时候再去学，比如用到了很多echarts图表，那就echarts文档刷起来。

#### 记录文档 ####

刚开始接触项目时，需要在短时间里掌握很多知识，这些知识可能但是理解了，或者当时不理解。 而这些得到的知识点，或者疑惑点，尽量都要记录下来。以备查阅。在学习rancher-ui这个项目的时候， 文字记录这个习惯确实帮了我很多。而且这些东西沉淀起来，以后可以教导新人，这样一做绩效就上去了，也树立了在新人中的高大的形象。

#### 查阅项目文档 ####

一般成型的团队都有一些沉淀的文档，像代码约定，规范，提交规范。多读两遍。

#### 第一天下班前 ####

第一天下班前可以把自己的疑惑向自己的前辈，或者组长请教。说一下自己的见解。给组长留下一个好的印象，也让他知道你对项目了解的程度。有哪些方面需要他的帮助。