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。 下一篇文章想寫一下關於設計模式的程式碼。
看到這裡了你還不點個贊評論一下嗎？