（前端）「狀態」設計模式在專案開發中的應用

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設計模式》張容銘著