设计模式在vue中的应用（三）

策略模式应该是我们接触比较多的几个 设计模式 中的一个了，先看一下定义：

（来自百度百科）

• 定义了一组算法（业务规则）；
• 封装了每个算法；
• 这族的算法可互换代替（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中的应用应该会写一个系列，喜欢的同学记得关注下