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

摘要： 策略模式應該是我們接觸比較多的幾個設計模式中的一個了，先看一下定義： （來自百度百科） 定義了一組演算法（業務規則）； 封裝了每個演算法； 這族的演算法可互換代替（interchangeable） 一、場景需求 使用者登入系統後有一...

策略模式應該是我們接觸比較多的幾個設計模式中的一個了，先看一下定義：

（來自百度百科）

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

一、場景需求

使用者登入系統後有一個狀態標記status對應上圖4種操作提示。

二、分析

使用者登入進來看status的值：

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

很明顯我們需要根據 status 的值實現不同的渲染和操作

三、設計

// 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
複製程式碼

四、還能做點什麼

策略模式一個很明顯的特點就是我們封裝好了一系列演算法策略，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中的應用應該會寫一個系列，喜歡的同學記得關注下