设计模式在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中的应用应该会写一个系列，喜欢的同窗记得关注下