Typescript版本VUE+元件封裝+最簡單的策略模式，地址選擇
去年做的公司專案，最近再從做升級2.0版本。因為需求是使用者需要填寫五級地址，從省到你家的自然村。
之前一個專案做過，因為在整個專案中只用到了一次，也沒去封裝。
現在使用者新增修改地址用得上，商家註冊，商家員工新增也要用上……那麼多場景我在不封裝要被打死……
如果不想看文章的可以直接去 ofollow,noindex">gayhub 程式碼就在這裡。
開始講解
我們先分析一下需求。
- 使用者填寫地址的時候需要選到村
- 商家則是需要到縣
- 商家員工呢可以選擇到村，鎮，縣
辣麼選擇地址的時候 有三種情況
普通使用者： 5級地址選擇 商家員工： 3,4,5級地址選擇 （花q花q花q花q花q花q花q花q花q） 商家： 3級地址選擇 複製程式碼
編寫程式碼
寫之前不妨先思考下我們需要用到vue哪些東西？
-
元件註冊 註冊元件這個必然的。
-
prop 父元件給子元件傳遞資料 地址資料
-
$emit 呼叫父元件的方法 地址選擇完成後關閉彈窗。
那麼開始寫程式碼吧……
這裡呢我們還是使用vant……因為支援typescript啊……
新建專案 安裝依賴 啟動專案 複製程式碼
具體的請看我上上篇文章……
這裡我已經把基礎的程式碼寫好了，造了一些假的資料。假資料只是為了方便編寫程式碼。
想想一件事情。普通使用者選擇地址的時候是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。 下一篇文章想寫一下關於設計模式的程式碼。
看到這裡了你還不點個贊評論一下嗎？