一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第28天，点击查看活动详情。

学习Vue响应式原理-设计模式-2

引言

为了学习发布订阅模式，这里顺便学习一下四种常见的设计模式，

• 单例模式

• 观察者模式

• 发布订阅模式

• 策略模式

今天学习一下最后两个设计模式。

设计模式

发布订阅模式

都说 发布订阅模式 与 观察者模式 类似一样，其实还是有点区别的。

发布订阅模式 相当于 js 中的 addEventListener()，是只需要一个构造函数即可。而 观察者模式 是需要两个构造函数的。

汇结

发布订阅模式 相当于是一个 第三方 观察者，来维护 发布者 和 订阅者 关系。

可以理解如下，但是不一定正确。

• 发布者 --> 观察者
• 订阅者 --> 被观察者

在 vue 中，我们所熟悉的 EventBus 就是 发布订阅者。

代码

首先我们创建 Observer 类

class Observer {
  constructor() {
    this.event = {}
  }
}

有3个常用的方法，就是

• 订阅事件-->订阅者

    $on(key, fn) {
      if (!this.event[key]) this.event[key] = []
      this.event[key].push(fn)
    }
  

• 发布事件-->发布者

    $emit(key) {
      // 1.消息队列中 是否存在 key
      if (!this.event[key]) return
  
      // 2.存在key，触发
      this.event[key].forEach((item) => item())
    }
  

• 关闭事件

    $off(key, fn) {
      // 1.消息队列中 是否存在 key
      if (!this.event[key]) return
  
      // 2.是否传递fn参数
      if (!fn) {
        // this.event[key] = []
        delete this.event[key]
        return
      }
  
      // 3.fn存在
      this.event[key] = this.event[key].filter((item) => item !== fn)
    }
  

进行使用

策略模式

策略模式，就是在我们有很多 if - else 来处理事情的时候，可以来使用。

但是我这里会有一个疑问，如果 if - else 太多，是不是可以用 switch - case 来处理呢。

既然出现这个模式，自然不是这么简单。

我们可以这样想，既然 if - else 太多，那么能不能先将其转成 switch 的形式呢

function selectName(name) {
  switch (name) {
    case 'aaa':
      return 'aaa'
    case 'bbb':
      return 'bbb'
    case 'ccc':
      return 'ccc'
    default:
      return 'aaa'
  }
}

如果 switch 不满足，非要策略模式上场，那就通过函数的形式来进行映射

const selectName = {
  aaa: function () {
    return 'aaa'
  },
  bbb: function () {
    return 'bbb'
  },
  ccc: function () {
    return 'ccc'
  }
}

const useSelectName = (name) => {
  return selectName[name]
}

总结

学习了 设计模式 中两大经典的模式，发布订阅模式 和 策略模式