Vue类重构代码——02 开始:一个简单的类

本文介绍了如何在Vue中重构代码,通过创建一个名为`CommonList`的订单类,该类包含获取最大最小ID的方法。文章详细阐述了类的定义、属性和方法的设计,并展示了在Vue组件中实例化并调用类方法的过程。同时,提出了关于实例化时参数过多的问题,引发对简化实例化和使用工厂模式的思考。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言:

上文总结:
接上文《 Vue类重构代码——01 准备:提取工具类方法》总结,上文主要做的且本文及以后还可以用到的有用功是:将获取数据的方法提取成一个公共的函数,放到了fetch.js里面,使用的时候调用fetchData(api,{参数})即可获取数据

本文引言:
定一个订单类,订单类里有个方法就是获取最大最小id,然后我们把他封装好之后在具体的vue文件里取实例化它,再调用相应函数即可获取并更新最大最小id
即解决上文提到的p.getMaxandMinpage() 这条代码的具体实施技术

Vue类重构代码——01 准备:提取工具类方法

正文:

1. 定义CommonList类

我们在service目录下新建orderClass.js文件,里面写我们的订单类
首先我们可以打个腹稿想下类里面有哪些属性和方法
这里写图片描述

同样的引入工具类方法

import {fetchData} from '../config/fetch'
class CommonList{
    MINID = 0;
    MAXID = 0;
    CURID = 0;
    ISVERIRY = 0;//0 默认未审核
    ADDFLAG = true;//true 默认是新增 上张下张时修改为false
    IMGSRC = '';
    initData(){
        this.getMaxandMinpage()
    }
    async getMaxandMinpage(){
        let backIds = await fetchData('/getmaxminid.do', {});
        this.MINID = backIds.MINID;
        this.MAXID = backIds.MAXID;
        this.CURID = backIds.MINID + 1;
    }
}
export{
    CommonList
 }

唉。本来千言万语要说的,但是涉及到代码怎么。。又一股脑的直接把代码贴上来了。
实际上我是走了很多弯路试了较多方法我才决定用如上所示结构定义一个类的,es6/还是直接原生写,或者关于公共属性的写法
公共属性之前用过:

// 一
class XX(X,Y,Z){
    this.x =x
    this.y =y
}

或者

// 二
class CommonList {
    constructor(props){
        this.MINID = 0;//0
        this.MAXID = 0;//0
        this.CURID = 0;//0
        this.ISVERIRY = 0;//0 默认未审核
        this.ADDFLAG = true;//true 默认是新增 上张下张时修改为false
        this.IMGSRC = '';//'' 审核结果的图片标识 默认未通过
        Object.assign(this, props);
        ////Object.assign方法用于对象的合并
        return this;
    }
    initData(){
        XXX
    }
}

要么就是下面的函数调用数据的时候this指向有问题要么就是实例化时输入的东西不够直观 比如类似这种 匹配于“一” 的实例过程

    let a = new CommonList(0,0,0,0,true,'')

后来尝试觉得“二”挺不错还巧妙,

//实例化过程
let a = new CommonList({
        MINID:0,//0
        MAXID:0,//0
        CURID:0,//0
        ISVERIRY:0,//0 默认未审核
        ADDFLAG: true,//true 默认是新增 上张下张时修改为false
        IMGSRC: ''
})
console.log(a)

控制台打印结果:
这里写图片描述

二属性定义和我最早贴出的代码类似,看个人喜好。

2. 实例化调用

我们在origin.vue文件里实例化这个基类

let a = new CommonList({
    MINID:0,//0
    MAXID:0,//0
    CURID:0,//0
    ISVERIRY:0,//0 默认未审核
    ADDFLAG: true,//true 默认是新增 上张下张时修改为false
    IMGSRC: ''
})
console.log(a.initData())
console.log(a)

这里写图片描述

于是就修改了相应的数值,然后在vue里面将实例化后的数据绑定即可
然后此文结束。
啥??这样就结束了??你在逗我。。
emmm其实并没有
留个小思考:
实例化的时候你们有么有觉得

let a = new CommonList({
    MINID:0,//0
    MAXID:0,//0
    CURID:0,//0
    ISVERIRY:0,//0 默认未审核
    ADDFLAG: true,//true 默认是新增 上张下张时修改为false
    IMGSRC: ''
})

new CommonList( )括号里面的东西太多了?
有没有办法不要这么多?

我们实例化的时候真的需要暴露这些”接口”使其自定义吗?其实我们可以完全只暴露实例化结果。
如:
这里写图片描述

其实这是简单的工厂模式,只不过这里对应生产一种订单类~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值