如何快速了解一个新的前端项目?
快速浏览项目目录结构首页登陆流程,快速了解项目数据流转查看package.json文件,快速了解项目技术栈查看vue.config.js文件,快速了解API请求地址查看router文件夹,思考怎么增加菜单和页面?查看request文件夹,快速了解接口请求和响应拦截以及错误信息统一提示查看component文件夹,快速了解项目的公共组件,代码复用查看store文件夹,快速了解项目全局变量查阅项目基础
- 快速浏览项目目录结构
- 首页登陆流程,快速了解项目数据流转
- 查看package.json文件,快速了解项目技术栈
- 查看vue.config.js文件,快速了解API请求地址
- 查看router文件夹,思考怎么增加菜单和页面?
- 查看request文件夹,快速了解接口请求和响应拦截以及错误信息统一提示
- 查看component文件夹,快速了解项目的公共组件,代码复用
- 查看store文件夹,快速了解项目全局变量
- 查阅项目基础文档,快速了解项目代码规范,测试环境部署等
在接受一个新的项目后,要想快速了解它,就需要一种抽象思维进行剥茧抽丝,遵守项目搭建的基本规律,犹如庖丁解牛,游刃有余。 以达到可能给快速跟上团队成员的节奏进行开发。下面我就给大家总结一下,拿到一个新的前端项目后,如果进行解牛。这些思路可以延伸到其他项目,java,python,php。正所谓一法通,万法通。让我们开始吧。
项目架构每个目录的作用
目前的前端项目大部分都是使用@vue/cli或vue cli脚手架来生成的,所有目录一般都会大同小异。 但也有一些例外,比如我之前接触的lasam这个项目,使用nuxt.js脚手架搭建,刚接触时真是让我苦恼了几个小时。
梳理数据流转
数据流转指的是用户页面上的表单数据是创建的,获取表单数据后,调用了什么方法,做了什么验证,拦截,调用的那个http库发起的xhr请求,以及如何后端返回值的统一拦截,这是从用户到服务端的数据流转。还有就是从服务器获取数据渲染到用户页面上这个流程,期间也会调用很多方法。大多数项目都会封装一个http请求的统一处理方法。
那么熟悉这一块有什么用处那?http请求几乎是每个功能需求都需要用到的,将表单数据提交到服务端,从服务端查询数据显示到页面上。是再平常不过的功能。如果你不了解这个数据是怎么流转的,数据如何从一个方法到另一个方法的,对数据做了那些处理,那么你在做功能时会就会遇到很多问题。
如果遇到了使用vuex,或者Mobx,redux,dva,React Hooks, 这种状态管理库,一时间看不明白,最好的办法是对照着官方一起看,然后自己在模仿着现有的功能做一个增删改查。
package.json中的内容
package.json 这个文件里面显示了当前项目使用了那些js包,看了这个文件的内容就知道是什么技术栈了,以及使用技术。 一些用的多的核心包要多去查询文档,走在前面。 不要等到用到的时候再去学,比如用到了很多vue-class-component插件,那就vue-class-component文档刷起来。
Vue.config.js中的内容
这个文件里面显示了当前项目请求接口的跨域代理地址,网关鉴权,以及webpack的相关配置,思考怎么直连后端本地调试接口?怎么走网关联调?大型企业一般都会涉及到网关,如果没有可以省略这步
路由的映射,跳转
路由的调整,路由的映射,这部分也是比较重要的,但基本上,路由库就那么官方的几个,稍微看一下就能了解其用法,vue-router, React-Router。这部分不算难。需要注意的是路由守卫,拦截,这部分代码,还有菜单的配置。如果分配给你一个功能,很有可能需要配置一个新的菜单。有时候你明明按照现有的路由配置了一个新的路由,但就是无法显示在菜单里,这个时候就要通读一下有关路由逻辑处理的代码了。
request 文件夹
这个文件里面封装了全局的axios实例的方法,包括请求和响应拦截统一处理
component公共组件
在开始一个任务之前最好了解项目中有哪些公共组件了,避免重复造轮子,和前辈们写的不一致。能够省下不少时间。
查阅项目文档
一般成型的团队都有一些沉淀的文档,像代码约定,规范,提交规范。多读两遍。
根据URL快速找到对应的组件
这个技能是必备,而且收益最快的,试想一下,你刚入职二天,领导让你改一个页面的bug,bug上指定了是那个页面,路径也给你了,这个时候就需要你更加url快速定位到问题所在的组件。有时路由是一层套一层, 组件也是一层套一层。
那么如何快速找到想要的组件那? 简单的办法是使用程序员超神技能 全局搜索
在vscode中 CTRL + SHIFT + F 即可打开全局搜索框。搜索关键词一点要找一些有特别的,越独特越好,最好全局唯一。 此外有些做了国际化的项目,直接搜页面的字段只能搜到国际化配置文件,这个时候就要再用配置文件做第二次搜索了。可以限制一些搜索文件。比如在 .vue 中搜索。
记录文档
刚开始接触项目时,需要在短时间里掌握很多知识,这些知识可能当时是理解了,或者当时不理解。 而这些得到的知识点,或者疑惑点,尽量都要记录下来。以备查阅。在学习rancher-ui这个项目的时候, 文字记录这个习惯确实帮了我很多。而且这些东西沉淀起来,以后可以教导新人,这样一做绩效就上去了,也树立了在新人中的高大的形象。
第一天下班前
第一天下班前可以把自己的疑惑向自己的前辈,或者组长请教。说一下自己的见解。给组长留下一个好的印象,也让他知道你对项目了解的程度。有哪些方面需要他的帮助。
更多推荐
所有评论(0)