(前端)「狀態」設計模式在項目開發中的應用

来源:https://www.cnblogs.com/lingda-blogs/archive/2022/08/05/16552670.html
-Advertisement-
Play Games

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • BOM BOM的概述: bom 稱為瀏覽器對象模型(bowser object model),也就意味他可以獲取瀏覽器上的所有內容以及相關的操作。BOM缺乏規範的,存在共有對象來解決這個問題,但是共有對象也存在相容問題(ie10以後) BOM的結構 window 概述: window是頂層對象 屬於 ...
  • 1 ref 接受一個內部值並返回一個響應式且可變的 ref 對象。ref 對象僅有一個 .value property,指向該內部值。 案例 <template> <div> <button @click="changeMsg">change</button> <div>{{ message }}< ...
  • JS相容問題總結 “標準瀏覽器”和“低版本瀏覽器(IE)”相容寫法 一、瀏覽器捲去的高度和寬度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop var scrollLeft = documen ...
  • 1 模板插值語法 在script 聲明一個變數可以直接在template 使用用法為{{變數名稱}} 模板語法是可以編寫條件運算的 運算也是支持的 操作API 也是支持的 <template> {{ message }} {{ message2==0 ? '我是老大' : '我笑的' }} {{ m ...
  • 在實際開發工作中,經常會碰到當select下拉數據過需要做分頁的情況 這裡簡單介紹封裝的一個Pagination-Select組件幾個步驟 封裝的比較簡易,可以根據自己的項目進行改動 /components/Pagination-Select/index.vue <template> <div id ...
  • AG Grid是一個客戶端 JavaScript網格 旨在與框架無關 它不依賴於任何框架 因此可以輕鬆地與任何框架集成 AG Grid支持具有相同API的多個框架 通過為每個框架量身定製的GUI層 獲得更好的開發人員體驗和性能 提供Community及Enterprise兩個版本 其中Enterpr ...
  • 本文將介紹一種巧用 background 配合 backdrop- filter 來構建有趣的透視背景效果的方式。 本技巧源自於一名群友的提問,如何構建如 ElementUI 文檔的一種頂欄背景特效,看看效果: 仔細看,在頁面的的滾動過程中,頂欄的背景不是白色的,也不是毛玻璃效果,而是能夠將背景顆粒 ...
  • ​ sass 運算符雖然沒有像那些編程語言那麼強大,但為了更靈活的輸出css,也增強了一些運算符的功能,例如賦值運算符、等號操作符、比較運算符、邏輯運算符、字元串運算符...等等,接下來就來詳細介紹下這些運算符的基本使用 賦值運算符 賦值運算符就是把一個值賦值給一個變數,通過冒號(:)的方式進行承接 ...
一周排行
    -Advertisement-
    Play Games
  • 使用原因: 在我們服務端調用第三方介面時,如:支付寶,微信支付,我們服務端需要模擬http請求並加上一些自己的邏輯響應給前端最終達到我們想要的效果 1.使用WebClient 引用命名空間 using System.Net; using System.Collections.Specialized; ...
  • WPF 實現帶蒙版的 MessageBox 消息提示框 WPF 實現帶蒙版的 MessageBox 消息提示框 作者:WPFDevelopersOrg 原文鏈接: https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal 框架使用大於等於.N ...
  • 一、JSON(JavaScript Object Notation)的簡介: ① JSON和XML類似,主要用於存儲和傳輸文本信息,但是和XML相比,JSON更小、更快、更易解析、更易編寫與閱讀。 ② C、Python、C++、Java、PHP、Go等編程語言都支持JSON。 二、JSON語法規則: ...
  • 1.避免Scoped模式註冊的服務變成Singleton模式 當提供一個生命周期模式為Singleton的服務實例時,如果發現該服務中還依賴生命周期模式為Scoped的服務實例(Scoped服務實例將被一個Singleton服務實例所引用),那麼這個被依賴的Scoped服務實例最終會成為一個Sing ...
  • 索引時資料庫提高數據查詢處理性能的一個非常關鍵的技術,索引的使用可以對性能產生上百倍甚至上千倍的影響。接下來,會介紹索引的基本原理、概念,並深入學習資料庫中所使用的索引結構和存儲方式,以及如何管理、維護索引等。 1.索引的基本概念 索引時用來快速查詢表記錄的一種存儲結構,一般使用索引有一下兩個方面: ...
  • django2 路由控制器 Route路由,是一種映射關係。路由是把客戶端請求的url路徑和用戶請求的應用程式,這裡意指django裡面的視圖進行綁定映射的一種關係。 請求路徑和視圖函數不是一一對應的關係 在django中所有的路由最終都被保存到一個叫urlpatterns的文件里,並且該文件必須在 ...
  • 1、我們的目標是獲取微博某博主的全部圖片、視頻 2、拿到網址後 我們先觀察 打開F12 隨著下滑我們發現載入出來了一個叫mymblog的東西,展開響應發現需要的東西就在裡面 3、重點來了!!! 通過觀察發現第二頁比第一頁多了參數since_id 而第二頁的since_id參數剛好在上一頁中能獲取到, ...
  • 一、實現原理 在Servlet3協議規範中,包含在JAR文件/META-INFO/resources/路徑下的資源可以直接訪問。 二、舉例說明 如下圖所示,是我新建的一個Spring Boot Starter項目:zimug-minitor-threadpool,用於實現可配置、可觀測的線程池。其中 ...
  • 精華筆記: static final常量:應用率高 必須聲明同時初始化 由類名打點來訪問,不能被改變 建議:常量所有字母都大寫,多個單詞用_分隔 編譯器在編譯時會將常量直接替換為具體的數,效率高 何時用:數據永遠不變,並且經常使用 抽象方法: 由abstract修飾 只有方法的定義,沒有具體的實現( ...
  • Python有一個for...else語法,它的寫法如下 for i in range(0,100): if i == 3: break else: print("Not found") 該語句表示:若for迴圈遍歷完畢,則執行else部分的語句。也就是說上述代碼不會有任何輸出,而下述代碼會輸出“N ...