前言:
之前接手项目的时候,请求接口都是放在api.js里面的一个个函数 ,
项目小还好说,项目大后api.js中有几千个函数就很难在维护, 再加上很多情况下请接口数据并不是视图所直接需要的数据,必须得二次处理和缓存数据,还有些公共逻辑可以抽离的.
所以新项目,我采用了class的特性把请求接接口函数按照业务逻辑进行抽象分离
经过一段时间使用,发现不管是扩展性,维护性,便捷性,都得到了显著提升.
1.简单先了解函数与类异同
| 对比 | 函数 | 类 |
|---|---|---|
| 缓存上下文或者状态或者数据 | × | √ |
| 封装 | √ | √ |
2.新老项目对数据层的处理方式对比
旧项目api.js:
新项目:
- Http类是封装了Ajax,ClassModel继承Http,并调用父类this.request方法
2.每个class对应每个业务模块,静态方法是为了调用方法且不用实例化
.vue(视图层)调用接口数据
const { code, msg } = await Device.addDevice(this.addForm);
class封装api优点
优点 简述 引入简单 from {GetUserList} from "./api/user" 代码解耦 每个类对应每个业务模块,代码解耦 记录上下文,可以处理复杂业务 分页,toast提示信息,商品的sku,spu选择都可以用class封装
3.数据流向
通过类来控制vuex中storage,来耦合vue页面和vuex的代码也是非常非常香的~~
通过一个userlist页面来举例:
1.userlist页面调用User类获取页面需要数据
2. User改变vuex中storage的值
3. userlist页面监听vuex中storage的值改变,并刷新表格和toast提示
最后
class的特性可以缓存数据,上下文,状态,再加上与vuex结合,视图就只需要关注ui交互逻辑就可以,从而达到解构的目的,按照这样的逻辑编写业务感觉不管从维护性和便捷性都感觉到了显著的提升.
如果你有更好的注意,一起交流下吧
如果这篇文章带给你新的启发和思路,请鼓励我给我留言点赞~~
