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

前言

目录整理：
设计模式在vue中的应用（一）
设计模式在vue中的应用（二）
设计模式在vue中的应用（三）
设计模式在vue中的应用（四）
设计模式在vue中的应用（五）
设计模式在vue中的应用（六）
设计模式在vue中的应用（七）

为什么要写这些文章呢。正如设计模式（Design Pattern）是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结（来自百度百科）一样，也是想通过分享一些工作中的积累与大家探讨设计模式的魅力所在。
在这个系列文章中为了辅助说明引入的应用场景都是工作中真实的应用场景，当然无法覆盖全面，但以此类推也覆盖到了常见的业务场景

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

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