策略模式应该是我们接触比较多的几个设计模式中的一个了,先看一下定义:
(来自百度百科)
- 定义了一组算法(业务规则);
- 封装了每个算法;
- 这族的算法可互换代替(interchangeable)
一、场景需求
二、分析
用户登录进来看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中的应用应该会写一个系列,喜欢的同学记得关注下