1. 事件起因 最近在做一個關於星座的移動端項目,想實現這樣一個需求,每次切換導航欄NavBar item時,都會使下麵的頁面級組件TodayView更改背景色樣式(如圖1到圖2,導航欄從雙魚座切換到處女座,下麵頁面級組件的背景顏色由黃色切換至粉色)。 圖1 圖2 如果利用傳統的辦法,在點擊事件的事 ...
1. 事件起因
最近在做一個關於星座的移動端項目,想實現這樣一個需求,每次切換導航欄NavBar item時,都會使下麵的頁面級組件TodayView更改背景色樣式(如圖1到圖2,導航欄從雙魚座切換到處女座,下麵頁面級組件的背景顏色由黃色切換至粉色)。
圖1 圖2
如果利用傳統的辦法,在點擊事件的事件處理函數中進行多層條件語句判斷,代碼如下:
function handleClick(e) {
if(e.target.innerText === '雙魚座‘) {
store.state.vnode.style.backgroundColor = 'yellow';
}else if(e.target.innerText === '處女座‘){
store.state.vnode.style.backgroundColor = 'pink';
}else if(...){
...
}
}
我們大概有12個星座,那就要寫12層條件判斷語句,並且每一層的判斷以及做的事情其實是一樣的,如此代碼會十分冗餘。因此考慮「狀態」設計模式。
2. 解決方案
利用「狀態」設計模式。
大致思路: 每當切換NavBar item時,都給關於NavBar的一個狀態類添加狀態,例如切換到雙魚座時,就給這個狀態類添加一個狀態為“雙魚座”,然後執行該狀態對應的動作方法,此方法內就是對頁面級組件DOM的背景色修改為特定的顏色。
先封裝狀態類,代碼如下:
src/NavBarState/index.ts:
// CONSTELLATIONS是我定義的枚舉類型, 裡面的每個枚舉都對應了一個星座, 並且我把該枚舉就作為我要添加的狀態名,以及該狀態的對應的動作方法的名字
import { CONSTELLATIONS } from '../typings/index';
const NavBarState = function(vnode: any) {
// currentStates裡面存儲所有的狀態(key), 對應的值為true(value)則表示可以執行該狀態對應的動作方法
let currentStates = {}; // key為動作方法的函數名, 也是狀態
// statesAction中是 狀態-動作方法 的映射關係, 狀態名即為動作方法名, 當然也可以寫成 '狀態名': function 動作方法名(){...}
const statesAction = {
// 如果該狀態為'雙魚座', 就將虛擬DOM的背景色改為黃色
[CONSTELLATIONS.m1]() {
vnode.style.backgroundColor = 'yellow';
},
[CONSTELLATIONS.m2]() {
vnode.style.backgroundColor = 'pink';
},
[CONSTELLATIONS.m3]() {
vnode.style.backgroundColor = 'purple';
},
[CONSTELLATIONS.m4]() {
vnode.style.backgroundColor = 'green';
},
[CONSTELLATIONS.m5]() {
vnode.style.backgroundColor = 'red';
},
[CONSTELLATIONS.m6]() {
vnode.style.backgroundColor = 'orange';
},
[CONSTELLATIONS.m7]() {
vnode.style.backgroundColor = 'skyblue';
},
[CONSTELLATIONS.m8]() {
vnode.style.backgroundColor = 'blue';
},
[CONSTELLATIONS.m9]() {
vnode.style.backgroundColor = '#FFBB00';
},
[CONSTELLATIONS.m10]() {
vnode.style.backgroundColor = '#880000';
},
[CONSTELLATIONS.m11]() {
vnode.style.backgroundColor = '#D28EFF';
},
[CONSTELLATIONS.m12]() {
vnode.style.backgroundColor = '#FFC8B4';
}
}
// Action中封裝了2個方法, addState用於給狀態類NavBarState添加進狀態, goes用於執行狀態類現有狀態的動作方法
const Action = {
addState(...args: any[]) {
// eslint-disable-next-line prefer-rest-params
currentStates = {};
for(const key in args) {
currentStates[args[key]] = true;
}
// 把調用者return出去是為了方便後續的鏈式調用, 例如NavBarState(vnode).addState('雙魚座').goes()
return this;
},
goes() {
for(const key in currentStates) {
if(currentStates[key] === true) {
statesAction[key] && statesAction[key]();
}
}
return this;
}
}
return {
addState: Action.addState,
goes: Action.goes
}
}
export default NavBarState;
我們在組件中試一下:
src/components/NavBar/index.vue:
/**
* 當切換NavBar item時子組件(NavBar/Item.vue)會給父組件發佈事件, 並帶上自己的index過去
* 父組件監聽這個事件觸發的回調就是changeCurNavId, 更新記錄標記curIdx
*/
const changeCurNavId = (idx: number): void => {
curIdx.value = idx;
}
/*
* 當監聽到curIdx變化時, 說明切換了Item, 立刻給狀態類NavBarState添加進狀態('雙魚座'), 然後執行該狀態對應的動作方法, 進而修改虛擬DOM的樣式
* 這裡有個問題就是, 如果我同步給NavBarState添加狀態並執行的話, 效果是不會出來的, 必須非同步添加狀態才可以。
* 我猜想可能是因為在外殼組件App.vue中, NavBar組件是先於頁面級組件TodayView渲染的, 而我將TodayView的虛擬DOM設置進store中
是在TodayView組件中完成的, 也就是說當NavBar組件渲染時store.state.todayDom還沒有值, 為null, 因此賦予其狀態並修改其樣式
自然是無效的。
*/
watch(curIdx, () => {
store.commit(actionTypes.SET_CONSNAME, navCons[curIdx.value].cons);
// 在today中已經改變了todayDomRef, 接下來給這個todayDomRef在切換curIdx時賦予不同樣式; 並延遲更改NavBar的狀態
setTimeout(() => {
NavBarState(store.state.todayDom).addState(navCons[curIdx.value].cons).goes();
})
}, { immediate: true });
以上,就是我關於「狀態」設計模式在項目開發中的一些應用場景,感謝閱讀!
參考書籍: 《JavaScript設計模式》 張容銘 著