前言

去年做的公司專案，最近再從做升級2.0版本。因為需求是使用者需要填寫五級地址，從省到你家的自然村。

之前一個專案做過，因為在整個專案中只用到了一次，也沒去封裝。

現在使用者新增修改地址用得上，商家註冊，商家員工新增也要用上……那麼多場景我在不封裝要被打死……

如果不想看文章的可以直接去 gayhub 程式碼就在這裡。

開始講解

我們先分析一下需求。

• 使用者填寫地址的時候需要選到村
• 商家則是需要到縣
• 商家員工呢可以選擇到村，鎮，縣

辣麼選擇地址的時候 有三種情況

 普通使用者： 5級地址選擇 

 商家員工： 3,4,5級地址選擇 （花q花q花q花q花q花q花q花q花q）

 商家： 3級地址選擇 
複製程式碼
 

編寫程式碼

寫之前不妨先思考下我們需要用到vue哪些東西？

• 元件註冊 註冊元件這個必然的。

• prop 父元件給子元件傳遞資料 地址資料

• $emit 呼叫父元件的方法 地址選擇完成後關閉彈窗。

那麼開始寫程式碼吧……

這裡呢我們還是使用vant……因為支援typescript啊……

新建專案
安裝依賴
啟動專案
複製程式碼

使用typescript+vue 編寫電影資訊小專案！

具體的請看我上上篇文章……

這裡我已經把基礎的程式碼寫好了，造了一些假的資料。假資料只是為了方便編寫程式碼。

想想一件事情。普通使用者選擇地址的時候是5級，一股腦地選到底。商家呢則是3級，商家下面的員工則是3級4級5級都可以……

  // AddressPicker.vue

  private created() {
    this.columns = this.province;
  }

  @Emit()
  private close(data: any): any {
    return data;
  }
  // 關閉操作
  private onCancel() {
    this.close(false);
  }
  // 確定操作
  private onConfirm(value: string) {
    this.addressInfo.push(value);
    if (this.selectLevel < this.level - 1) {
      this.selectLevel++;
      this.getAdddata(value);
    } else
 
 {
      this.close(this.addressInfo);
    }
  }
  private getAdddata(addname: string) {
    if (this.selectLevel === 1) {
      this.columns = this.city;
    } else if (this.selectLevel === 2) {
      this.columns = this.county;
    } else if (this.selectLevel === 3) {
      this.columns = this.town;
    }  else if (this.selectLevel === 4) {
      this.columns = this.village;
    }
  }

  // Home.vue

  <AddressPicker v-if="show" :level="level"  @close="done"/>

  private addressClass: number = 5;
  private level = 5;
  // 開啟選擇框
  private select(level: number) {
    this.show = true;
    this.level = level;
  }

  private done(data: any) {
    if (data !== false) {
      this.addressInfo = '';
      data.map( (i: number) => {
        this.addressInfo += i;
      });
      this.show = false;
    } else {
      this.show = false;
  }

複製程式碼

addname 呢是你選中之後的地址，根據你選中的地址傳送請求到後臺獲取新的一輪地址。

我這裡只是為了方便演示沒有做資料互動

那麼我們ts+vue的元件就封裝好了。用了啥？prop 和 Emit，prop 傳遞資料這個不用說了，emit 其實是為了返回給父元件資料。

還有一個問題！！！！！

日後有需求變動，變成6級的只需要在getAdddata 裡再加一個if else。

那麼有沒有啥優化辦法呢？當然有了！這就要用到我們的策略模式了！！！！

簡單的策略模式

新建一個address.ts

// address.ts
export const getAaddress: any = {
    1: (addname: string) => ['合肥', '蕪湖', '阜陽'],  //  這裡對應的是一個ajax請求。
    2: (addname: string) => ['潁上縣', '阜南縣', '臨泉縣', '太和縣'],
    3: (addname: string) => ['鮦城鎮', '楊橋鎮', '韋寨鎮', '田橋鄉'],
    4: (addname: string) =>  ['某某村', '羊村', '狼堡'],
};

// 在AddressPicker.vue 引入
import { getAaddress } from './address';

// 呼叫 並沒有if else !!!!!!
private getAdddata2(index: number, addname: string) {
  this.columns = getAaddress[index](addname);
}

// 使用的時候也很方便
this.getAdddata2(this.selectLevel, value);

複製程式碼

呼叫的時候傳一個key，和addname 引數，返回的時候是一條陣列。

實際上是呼叫的getAaddress對應得一個函式。

非常簡單的幾句話解決了if else 的問題。 後期拓展也很容易再加一句就完事了，降低了耦合度，各管各的。

this.getAdddata2 裡面沒有沒有直接獲取資料的操作，獲取資料的操作全部交給getAaddress 完成。這樣我們可以向又臭又長的if else 說拜拜了。

小結

其實封裝元件不難，Prop,$emit 這些在 vue-property-decorator ，vue呢並沒有真正的支援typescript，只是一些語法糖讓開發人員對ts的一個慢慢過渡。

主要是我想引出策略模式消除if else。 下一篇文章想寫一下關於設計模式的程式碼。

看到這裡了你還不點個贊評論一下嗎？