今天想要来讲一讲是什么是发布订阅模式

前言

概念
手写实现一个发布订阅模式

1.概念

我是这样理解发布订阅的: 假如小明下个星期要结婚，那么小明就需要准备结婚的时候的事件：

1.请小王当司仪

2.请小美当伴郎

3.请我去送红包

这就形成了一个事件池 这个事件池就需要在下个星期的时候逐一来执行 这个就算一个发布订阅模式

在JavaScript 讲设计模式的书里面通常会看见一句话， 发布订阅模式又叫做观察者模式发布订阅模式是 观察者模式的一种实现（有所变化）

文字描述如下：

发布订阅Publish/Subscriber）模式使用了一个 主题/事件通道对象，管理主题和事件Publish：发布者，发布通知（通知主题/事件通道对象这个主题变化了，执行对应的事件)Subscriber：订阅者，注册主题，和事件（告诉主题/事件通道对象，这个主题变换，对应执行事件)

这样好理解一点：

发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Event Channel），当发布者（Publisher）发布该事件（Publish Event）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。

画图描述如下：

2.手写实现一个发布订阅模式

// 定义一个类
class Event{
  // 定义一个 订阅事件
  // type:是哪一个事件, cb:是一个callback回调函数

  // 新建一个存储订阅事件的对象  他的值是一个数组
  list = {}

  $on = function (type, cb) {
    // 判断当前list里面是否存在当前事件 如果当前事件不存在的话 就等于一个空数组 否则的话就让当事件push到当前事件里
    if (!this.list[type]) {
      this.list[type] = []
    }
    this.list[type].push(cb)
  }

  // 定义一个发布事件
  $emit = function (type, value) {
    if (!this.list[type]) return
    this.list[type].forEach(item => {
      item(value)
    })
  }
}
//  new 一个实例
const events = new PubSub()

// new的这个实例调用 订阅事件
events.$on('get', function (value) {
  console.log('第一个事件', value)
})

events.$on('get', function (value) {
  console.log('第二个事件', value)
})

// new的这个实例调用 发布者
// 第一个参数是调用的订阅事件名 ,第二个要发布的信息
events.$emit('get', 'hello')

发布订阅.gif

写在最后

本篇文章到这还没结束！

持续更新中---------------------

如果这篇文章对你来说有点作用，欢迎点赞、评论、收藏，避免在需要的时候找不到。

如果文中有错误，欢迎指正~

联系方式 🏂 yomi17@163.com

👍【每日一题】发布-订阅模式

今天想要来讲一讲是什么是发布订阅模式

前言

1.概念

2.手写实现一个发布订阅模式

写在最后