設計模式在vue中的應用（三）

前言

目錄整理：
設計模式在vue中的應用（一）
設計模式在vue中的應用（二）
設計模式在vue中的應用（三）
設計模式在vue中的應用（四）
設計模式在vue中的應用（五）
設計模式在vue中的應用（六）
設計模式在vue中的應用（七）

爲何要寫這些文章呢。正如設計模式（Design Pattern）是一套被反覆使用、多數人知曉的、通過分類的、代碼設計經驗的總結（來自百度百科）同樣，也是想經過分享一些工做中的積累與你們探討設計模式的魅力所在。
在這個系列文章中爲了輔助說明引入的應用場景都是工做中真實的應用場景，固然沒法覆蓋全面，但以此類推也覆蓋到了常見的業務場景

---

---

策略模式應該是咱們接觸比較多的幾個設計模式中的一個了，先看一下定義：
（來自百度百科）

• 定義了一組算法（業務規則）；
• 封裝了每一個算法；
• 這族的算法可互換代替（interchangeable）

1、場景需求

用戶登陸系統後有一個狀態標記status對應上圖4種操做提示。

2、分析

用戶登陸進來看status的值：

• 0 —— 未認證
• 1 —— 認證中
• 2 —— 認證經過
• 3 —— 認證不經過

很明顯咱們須要根據status的值實現不一樣的渲染和操做

3、設計

// context.vue
<template>
  <!-- 根據策略規則動態渲染組件 -->
  <component :is="authCom" />
</template>
<script>
  import Need from './Need'
  import Pend from './Pend'
  import Pass from './Pass'
  import Refuse from './Refuse'
  
  const AUTH_STATUS_NEED = 0
  const AUTH_STAUTS_PEND = 1
  const AUTH_STATUS_PASS = 2
  const AUTH_STATUS_REFUSE = 3
  
  export default {
    data () {
      status: AUTH_STATUS_NEED // 經過請求api賦值
    },
    computed () {
      authCom () {
        const statusMap = {
          [AUTH_STATUS_NEED]: Need,
          [AUTH_STAUTS_PEND]: Pend,
          [AUTH_STATUS_PASS]: Pass,
          [AUTH_STATUS_REFUSE]: Refuse
        }
        // 應用策略
        return statusMap[this.status]
      }
    },
    components: {
        Need,
        Pend,
        Pass,
        Refuse
    }
  }
</script>
複製代碼

// Need.vue
// Pend.vue
// Pass.vue
// Refuse.vue
... do something
複製代碼

4、還能作點什麼

策略模式一個很明顯的特色就是咱們封裝好了一系列算法策略，context負責組織和按需調用這些算法。

仍是上面的場景，用戶的認證狀態每次只會有一個，咱們上面封裝了4個算法而且所有被import，也就是加載了不少無用的代碼

策略模式配合vue的異步組件按需加載所需的代碼

// context.vue
<template>
  <!-- 根據策略規則動態渲染組件 -->
  <component :is="authCom" />
</template>
<script>
  const AUTH_STATUS_NEED = 0
  const AUTH_STAUTS_PEND = 1
  const AUTH_STATUS_PASS = 2
  const AUTH_STATUS_REFUSE = 3
  
  export default {
    data () {
      status: AUTH_STATUS_NEED // 經過請求api賦值
    },
    computed () {
      authCom () {
        const statusMap = {
          [AUTH_STATUS_NEED]: () => ({
            // copy自vue文檔
            component: import('./Need'),
            loading: LoadingComponent,
            error: ErrorComponent,
            delay: 200,
            timeout: 3000
          }),
          [AUTH_STAUTS_PEND]: '同上',
          [AUTH_STATUS_PASS]: '同上',
          [AUTH_STATUS_REFUSE]: '同上'
        }
        // 應用策略
        return statusMap[this.status]
      }
    },
    components: {
        Need,
        Pend,
        Pass,
        Refuse,
        LoadingComponent,
        ErrorComponent
    }
  }
</script>
複製代碼

固然本文舉例的需求和策略實現比較簡單，最終選擇同步打包

總結

策略模式自己理解起來比較簡單，並且這也是咱們在業務代碼中常見的幾個設計模式之一。再次思考下它的應用場景：

遊戲咱們都玩過，一個角色他的武器裝扮是刀，那麼它的攻擊動做是砍；
武器裝扮是劍，那麼它的攻擊動做是刺；
武器裝扮是槍，那麼攻擊動做是射擊。

一款遊戲一個重要的特性就是玩法的多樣性，隨着遊戲玩法的豐富武器裝扮和攻擊動做也會愈來愈多樣化
最終在咱們的code中不可能經過if、else這樣的邏輯判斷來管理咱們的邏輯
複製代碼

結合一個簡單的場景需求，分享了一點經驗但願對你有幫助

---

本文實現一樣適用於react，爲何文章以vue作題？vue的template讓咱們在理解一些概念的時候可能會有點不適應，而react的jsx能夠看作就是在寫JavaScript對各類概念實現更靈活 友情提示：設計模式在vue中的應用應該會寫一個系列，喜歡的同窗記得關注下