Vue類重構代碼——02 開始：一個簡單的類

前言：

上文總結：
接上文《 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( )括號裏面的東西太多了？
有沒有辦法不要這麼多？

我們實例化的時候真的需要暴露這些”接口”使其自定義嗎？其實我們可以完全只暴露實例化結果。
如：

其實這是簡單的工廠模式，只不過這裏對應生產一種訂單類~