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

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 = https://www.cnblogs.com/lingda-blogs/p/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設計模式》張容銘著

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/501016.html

標籤：設計模式

上一篇：設計模式之配接器模式

下一篇：設計模式之配接器模式