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

在接受一个新的项目后,要想快速了解它,就需要一种抽象思维进行剥茧抽丝,遵守项目搭建的基本规律,犹如庖丁解牛,游刃有余。 以达到可能给快速跟上团队成员的节奏进行开发。下面我就给大家总结一下,拿到一个新的前端项目后,如果进行解牛。这些思路可以延伸到其他项目,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这个项目的时候, 文字记录这个习惯确实帮了我很多。而且这些东西沉淀起来,以后可以教导新人,这样一做绩效就上去了,也树立了在新人中的高大的形象。


查阅项目文档

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


第一天下班前

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

拿我格子衫来 CSDN认证博客专家 拿我格子衫来 范马勇次郎 琦玉君
积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页