Javascript设计模式之发布-订阅模式

亦凉 2021-09-30 03:02 328阅读 0赞

### 简介 ###

发布-订阅模式又叫做观察者模式，他定义了一种一对多的依赖关系，即当一个对象的状态发生改变的时候，所有依赖他的对象都会得到通知。

### 回忆曾经 ###

作为一名前端开发人员，给DOM节点绑定事件可是再频繁不过的事情。比如如下代码

document.body.addEventListener('click',function () {
            alert(2333);
        },false);
        document.body.click();//模拟点击事件
    复制代码

这里我们订阅了document.body的click事件，当body被点击的时候，他就向订阅者发布这个消息，弹出2333.我们也可以随意的增加和删除订阅者，当消息一发布，所有的订阅者都会收到消息。

值得注意的是，手动触发事件这里我们直接用了document.body.click()；但是更好的做法是IE下用fireEvent，标准浏览器下用dispatchEvent，如下：

### 畅谈现在 ###

人的日常生活离不开各种人际交涉，比如你的朋友有很多，这时候你要结婚了，要以你为发布者，打开你的通讯录，挨个打电话通知各个订阅者你要结婚的消息。抽象一下，实现发布-订阅模式需要：

1.  发布者（你）
2.  缓存列表（通讯录，你的朋友们相当于订阅了你的所有消息）
3.  发布消息的时候遍历缓存列表，依次触发里面存放的订阅者的回调函数（挨个打电话）
4.  另外，回调函数中还可以添加很多参数，，订阅者可以接收这些参数，比如你会告诉他们婚礼时间，地点等，订阅者收到消息后可以进行各自的处理。

![aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8yLzI0LzE2MWM2YzJhZWQ0NDZlZWM_aW1hZ2VWaWV3Mi8wL3cvMTI4MC9oLzk2MC9mb3JtYXQvd2VicC9pZ25vcmUtZXJyb3IvMQ][]

*  以上就是一个简单的发布-订阅的实现，但是我们会发现订阅者会收到发布者发布的每一条信息，如果李四比较阴暗，不想听到你结婚的消息，只想听到你的坏消息，比如你被开除了，他就心里高兴。这时候我们就需要加一个key，让订阅者只订阅自己感兴趣的消息。

![aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8yLzI0LzE2MWM2Y2U5OGYxY2VkZTk_aW1hZ2VWaWV3Mi8wL3cvMTI4MC9oLzk2MC9mb3JtYXQvd2VicC9pZ25vcmUtZXJyb3IvMQ][]

*  你需要发布消息，同样的所有的人都有朋友圈，也都需要发布消息，因此我们有必要把发布-订阅的功能提取出来，放在一个单独的对象内，谁需要谁去动态安装发布-订阅功能(installEvent函数实现了动态安装发布-订阅功能)。

*  有时间我们需要取消订阅的事件，比如李四是你的好朋友，但是因为一件事情，你俩闹掰了，你把他从你的通讯录中给删除掉了，这里我们给event增加一个remove方法；

remove:function (key,fn) {
          var fns = this.clientList[key];
          if(!fns){
              return false;
          }  
          if(!fn){
              fns && (fns.length=0)
          }else{
              for (let index = 0; index < fns.length; index++) {
                  const _fn = fns[index];
                  if(_fn === fn){
                      fns.splice(index,1);
                  }
              }
          }
        }
    复制代码

### 发布-订阅的顺序探讨 ###

我们通常所看到的都是先订阅再发布，但是必须要遵守这种顺序吗？答案是不一定的。如果发布者先发布一条消息，但是此时还没有订阅者订阅此消息，我们可以不让此消息消失于宇宙之中。就如同QQ离线消息一样，离线的消息被保存在服务器中，接收人下次登录之后，才会收到此消息。同样的，我们可以建立一个存放离线事件的堆栈，当事件发布的时候，如果此时还没有订阅者订阅这个事件，我们暂时把发布事件的动作包裹在一个函数里，这些包装函数会被存入堆栈中，等到有对象来订阅事件的时候，我们将遍历堆栈并依次执行这些包装函数，即重发里面的事件，不过离线事件的生命周期只有一次，就像qq未读消息只会提示你一次一样。

### JavaScript实现发布-订阅模式的便利性 ###

因为JavaScript有回调函数这个优势存在，我们写开发-订阅显得更简单一点。传统的发布-订阅比如Java通常会把订阅者自身当成引用传入发布者对象中，同时订阅者对象还需提供一个名为诸如update的方法，供发布者对象在合适的时候调用。下面代码用js模拟下传统的实现。

### 小结 ###

*  发布-订阅的优势很明显，做到了时间上的解耦和对象之间的解耦，从架构上看，MVC，MVVM都少不了发布-订阅的参与，我们常用的Vue也是基于发布-订阅的，最近会抽时间写下vue的源码实现，同样的node中的EventEmitter也是发布订阅的，之前也手写过它的实现。
 *  发布-订阅同时也是有缺点存在的，创建订阅者本身要消耗一定的时间和内存，而且当你订阅一个消息以后，可能此消息最后都未发生，但是这个订阅者会始终存在于内存中。如果程序中大量使用发布-订阅的话，也会使得程序跟踪bug变得困难

[aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8yLzI0LzE2MWM2YzJhZWQ0NDZlZWM_aW1hZ2VWaWV3Mi8wL3cvMTI4MC9oLzk2MC9mb3JtYXQvd2VicC9pZ25vcmUtZXJyb3IvMQ]: /images/20210812/678b905545c04a3081160bd7260830e0.png
[aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8yLzI0LzE2MWM2Y2U5OGYxY2VkZTk_aW1hZ2VWaWV3Mi8wL3cvMTI4MC9oLzk2MC9mb3JtYXQvd2VicC9pZ25vcmUtZXJyb3IvMQ]: /images/20210812/1be94cc15d6a4c478adeed61a5c0dc44.png