Vue類重構代碼——01 準備:提取工具類方法

前言:之前寫了一個菜市場訂單配送的項目,剛開始用jquery寫的,後來又用了vue重寫相同的內容,發現和jquery比起來,以數據爲驅動的vue寫同樣的東西真的要簡單方便快捷很多。關於這個項目jquery踩的坑及轉換爲vue寫較jquery比較或vue遇到的難點,我之後會把筆記補上(ง •̀_•́)ง

正文前言:雖然vue相較jQuery寫同個項目代碼量縮減了很多,但是也有個很糟心的點就是,代碼複用性不高。關於菜市場訂單的頁面很多頁都是換湯不換藥的,然而我們每個頁面卻在寫很多本來可以公用的東西

注意: 要想代碼量急劇下降,不是簡單地將一些方法提爲共有的函數那麼簡單

由上總結: 將訂單頁面抽象爲類的想法應運而生 Loading……

1.正文

1.1 抽取獲取數據的方法 [get post ]

如下,頁面有很多要包含獲取數據的函數,每個函數都要使用這段代碼。因此考慮提取爲一個方法
代碼:

axios.post('http:/xxx/verify.do', qs.stringify({ID: this.curid}))
.then(response => {
    this.isVerify = 1;
    this.$message({
        message: '審覈成功',
        type: 'success'
    });
})

文件目錄結構:

—src
—-components
——-pages
————origin.vue
—-config
————fetch.js
————mutil.js
—-router
—-service
————getData.js

目錄:config/fetch.js
代碼:

import axios from 'axios'
/*
* 獲取數據 或者post 數據
*/
let basicUrl = 'http:/xxx/';//根地址
export const fetchData = (url = '', data = {},method = 'GET') => {
    method = method.toUpperCase();//將字符串轉換爲大寫
    url = basicUrl + url;
    if(method == 'GET'){
        //解析data = {} 裏面的參數
        let dataStr = '';
        Object.keys(data).forEach(key => {
            dataStr += key + '=' + data[key] + '&';
        })

        if (dataStr !== '') {
            dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
            url = url + '?' + dataStr;
        }
        //嘗試從遠程獲取數據
        try {
            //異步操作
            return new Promise((resolve,reject)=>{
                axios.get(url)
                .then(response =>{
                    const responseData = response.data;
                    resolve(responseData);
                })
            })
        } catch (error) {
            throw new Error(error)
        }
    }
}

然後我們現在在getData.js裏面統一寫獲取數據的函數,比如我要獲取頁面的訂單最大號和最小號
目錄:service/getData.js
代碼截圖:[看起來好看一點]
這裏寫圖片描述
截圖裏的代碼:[便於複製]

export const getMaxandMinpage =()=> fetchData('/logistics/originalorder/getmaxminid.do', {

});

定義了這個方法之後我們在origin.vue裏面調用這個方法
1.首先引入這個函數方法
2. 方法裏定義 這個方法[async 異步]
3. 掛載的時候使用this.initData()
代碼截圖:
這裏寫圖片描述
這裏寫圖片描述
這裏寫圖片描述
代碼:

import {getMaxandMinpage} from '@/service/getData'

mounted(){
    this.initData()
}
methods(){
    async initData(){
        //獲取最大最小id
        let ids  = await getMaxandMinpage();
        this.maxid = ids.MAXID;
        this.minid = ids.MINID;
    }
}

2.總結

總結:這樣的好處是什麼呢。就是方法公用,比如我銷售單需要獲取最大最小id,我同樣調用這個方法即可
省掉的代碼: 獲取數據的部分 + 具體函數的部分
不足: 獲取到的數據我還是得每次都要改一下。例如:

this.maxid = ids.MAXID;
this.minid = ids.MINID;

拋磚引玉:
那麼怎麼改進呢?
接下來我希望使用類的方法,比如調用p.getMaxandMinpage()
只需要寫這一行,就可以實現maxid和minid的變化。

即使用一句話完全代替以下所有代碼
這裏寫圖片描述

別看這個只替代了這麼一點點代碼,看樣子每個頁面我麻煩點自己寫忍忍不也就過去了嘛。
可是,盆友,如果有60+張頁面都是這樣的呢,你可能會說用vue組件嘛,但是。。如果頁面的大致構造一樣但是有一些佈局之類不一樣這種情況呢?
emm可能我舉的栗子有點失敗,反正就是有很多這種頁面,大同小異,且不能一概而論之提爲一個vue文件的那種,你該怎麼辦?

再回頭看看,我每個頁面只需要p.getMaxandMinpage() biu~一下就可以,豈不是很有誘惑?很有衝勁去研究?

嘿嘿那麼請不用出門直接左轉 看我的下個筆記!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章