关于前端:设计模式观察者模式发布订阅模式

设计模式

wiki 中将设计模式分为四类，别离是：

• 创立模式（creational patterns）
• 构造模式（structural patterns）
• 行为模式（behavioral patterns）
• 并发模式（concurrency patterns）

观察者 / 公布订阅模式属于其中的行为模式。

理论情境

公众号订阅

说到公布订阅，拿微信公众号举例，就很好了解，有 n 集体订阅了某公众号，在该公众号公布了推文后，这 n 集体就会收到推文公布的音讯。

状态更新

在理论编程过程中，有一种状况很多人应该碰到过，就是在页面上实现一些与接口的交互操作后，要更新页面的某些状态，但这个状态因为某些起因无奈立刻取得，如果要失去状态的更新后果，能够有两种抉择，一种是反复申请接口以获取，能够是用户手动刷新页面或申请接口、或者交互完结后主动开启接口轮询；第二种是建设长连贯，期待服务端推送后果。第二种形式，就能够算作是一种公布 - 订阅，订阅者是客户端，订阅内容是页面状态，发布者就是服务端。

为什么说观察者 / 公布订阅属于行为模式从上述例子就能够了解，本来的行为是客户端被动去获取内容，利用了此模式后，行为变成了客户端订阅（发动长连贯申请）、由服务端来推送音讯，行为形式产生了变动；并且咱们也能够看出，这样做进步了利用的性能，客户端不必要再屡次地去发动申请，缩小了建设网络申请的耗费。

定义

在 wiki 中对这两个模式的作用有着雷同的形容：

Define a one-to-many dependency between objects where a state change in one object results in all its dependents being notified and updated automatically.

翻译一下：

定义了对象之间一对多的依赖关系，其中一个对象的状态变更，会使其所有依赖对象收到告诉并自动更新。

能够看出，这两个模式解决的是存在一对多依赖关系的单方之间的交互行为。

尽管形容雷同，但两者的理论实现还是存在区别，咱们能够再进一步理解。

观察者模式

在这种模式下，一个名为主体的对象会保护其依赖对象（即观察者）的列表，并主动告诉它们任何状态变动，通常是通过调用它们的办法。

该模式通常用于在事件驱动软件中实现分布式事件处理零碎。在这类零碎中，主体通常被称为“事件流”或“事件流源”，而观察者则被称为“事件汇”。

大多数古代编程语言都蕴含实现观察者模式组件的内置事件构造。尽管不是强制性的，大多数观察者实现都应用后盾线程监听主体事件和内核提供的其余反对机制。

公布 - 订阅模式

在软件架构中，“公布 - 订阅”是一种消息传递模式，在这种模式下，发布者将音讯分类，再由订阅者接管。这与典型的由发布者间接将消息传递给订阅者的消息传递模式造成鲜明对比。

同样，订阅者对一个或多个类别示意感兴趣，只是接管感兴趣的信息，但并不知道有哪些发布者（如果有的话）。

公布 - 订阅是音讯队列模式的同类，通常是更大的面向音讯的中间件零碎的一部分。大多数消息传递零碎的 API 中同时反对公布 / 订阅和音讯队列模型；比方 Java 音讯服务（JMS）。

该模式提供了更高的网络可扩展性和更动静的网络拓扑构造，但也因而升高了批改发布者和公布数据结构的灵活性。

由上述两个定义可知，在公布 - 订阅模式中，发布者和订阅者的耦合度更低，订阅者并不知道音讯的发布者，在这种模式下，通常会存在一个第三方的订阅核心，订阅核心接管到发布者的音讯，而后再将音讯分发给订阅者；而在观察者模式中，观察者是通过在主体身上搁置监听器从而间接察看主体，相当于是发布者（主体）间接将消息传递给订阅者（观察者），此时两者的耦合性更高，这种模式下，观察者须要实现对立的接口以供主体调用，而主体则须要保护一个观察者的汇合。

解决的问题

观察者模式能够解决以下问题：

• 应在对象之间定义一对多的依赖关系时，不使对象严密耦合
• 当一个对象更改状态时，应自动更新不限数量的依赖对象
• 一个对象能够告诉多个其余对象

通过定义一个间接更新依赖对象状态的对象（主体）来定义对象间的一对多依赖关系是不灵便的，因为它将主体与特定的依赖对象分割在一起。然而，从性能角度，或者对象的实现是严密耦合的（比方每秒执行数千次的低级内核构造），这可能是实用的。在某些状况下，紧耦合对象可能难以实现，而且不容易复用，因为它们会援用并感知许多具备不同接口的对象。

做法形容

那么软件设计中的观察者模式具体是怎么做的呢？以下是 wiki 给出的形容：

• Define Subject and Observer objects.
• When a subject changes state, all registered observers are notified and updated automatically (and probably asynchronously).

The sole responsibility of a subject is to maintain a list of observers and to notify them of state changes by calling their update() operation. The responsibility of observers is to register and unregister themselves with a subject (in order to be notified of state changes) and to update their state (to synchronize their state with the subject’s state) when they are notified. This makes subject and observers loosely coupled. Subject and observers have no explicit knowledge of each other. Observers can be added and removed independently at run time. This notification-registration interaction is also known as publish-subscribe.

翻译一下：

• 定义 主体 和观察者 对象
• 当主体扭转状态，所有注册的观察者都会收到告诉并自动更新（可能是异步的）。

主体的惟一职责是保护一个观察者列表，并通过调用观察者的 update() 操作来告诉它们状态的变更。观察者的职责是向主体注册或勾销注册（以便收到状态变更的告诉），并在收到告诉时更新本人的状态（使本人的状态与主体的状态同步）。这使得主体和观察者涣散耦合。主体和观察者彼此互不理解。观察者能够在运行时被独自增加和移除。这种‘告诉 - 注册’交互也被称为‘公布 - 订阅’。

两者比照

依据 wiki 给出的观察者模式对应的做法形容，能够看到观察者模式中的 ’ 告诉 - 注册 ’ 也被称为‘公布 - 订阅’，但开发者须要明确，消息传递模式中的‘公布 - 订阅’，发布者和订阅者没有间接接触，而是减少了一个音讯散发核心，这个音讯散发核心能够类比为代理模式中的代理，通常须要保护音讯队列。

这种‘公布 - 订阅’模式的实现相比于一般的观察者模式具备以下两个劣势：

1. 松耦合

   发布者和订阅者不须要晓得对方的相干信息

2. 可扩展性

   如果有须要，能够随时减少新的订阅者来订阅发布者的音讯，而发布者不须要做批改，甚至不须要晓得

利用场景

公布 - 订阅模式从字面上可知，次要的利用场景就在于音讯（如状态）的传递。

事件监听

根据上述定义局部的内容，能够看出事件处理就是利用了观察者模式，比如说给按钮增加事件处理程序：

<button id="addButton">
  新增待办事项
</button>

let button = document.querySeletor('#addButton');
button.addEventListener('click', () => {console.log('待办事项 +1');
});

对于上述代码咱们能够这么了解，id 为 addButton 的按钮，通过 addEventListener 在本人身上按了一个观察者，这个观察者有一个函数可用处事件处理，在按钮的交互状态产生扭转时（从一般状态变为活动状态），就告诉这个观察者更新状态（即调用这个事件处理程序）。

另外，用过 vue 源码的小伙伴应该都晓得，vue 中的响应式就利用了观察者模式，每个组件 data 中的数据能够看作是主体，而后这些数据的观察者能够是 vue 实例对象、computed 属性、watcher 等等，这些观察者会被保护在 data 中每个数据对应的 deps 数组中。

事件总线

事件总线能够看作是一个订阅核心。比方在 Vue 中咱们能够应用 EventBus（实质上也是 Vue 实例）来作为事件核心，以实现事件的调度散发。应用办法如下：

// 创立一个事件总线并导出
const EventBus = new Vue();
export default EventBus;

// 在主文件中引入 EventBus，并挂载到全局
import bus from 'EventBus 文件门路';
Vue.prototype.bus = bus;

// 订阅事件“someEvent”// 这里 func 指 someEvent 这个事件的监听函数，也即在收到音讯后告诉订阅者的办法
this.bus.$on('someEvent', func);

// 公布（触发）事件“someEvent”// 这里 params 指 someEvent 这个事件被触发时回调函数接管的入参，也就是传递给订阅者的状态
this.bus.$emit('someEvent', params);

实现

在 JavaScript 咱们能够通过以下代码来实现一个观察者模式：

let Subject = {
    _state: 0,
    _observers: [],
    add: function(observer) {this._observers.push(observer);
    },
    getState: function() {return this._state;},
    setState: function(value) {
        this._state = value;
        for (let i = 0; i < this._observers.length; i++)
        {this._observers[i].signal(this);
        }
    }
};

let Observer = {signal: function(subject) {let currentValue = subject.getState();
        console.log(currentValue);
    }
}

Subject.add(Observer); // 主体治理本人的依赖对象
Subject.setState(10);
//Output in console.log - 10

公布 - 订阅模式也能够通过一个简略的 EventEmitter 来实现：

class EventEmitter {constructor() {this.events = {};
  }
  on(type, listern) {if (this.events[type]) {this.events[type].push(listener);
    } else {this.events[type] = [listener];
    }
  }
  emit(type, ...args) {if (this.events[type]) {this.events[type].forEach(fn => fn.call(this, ...args));
    }
  }
  once(type, listener) {
    const _ = this;
    function oneTime(...args) {listener.call(this, ...args);
      _.off(type, oneTime);
    }
    _.on(type, oneTime);
  }
  off(type, listener) {if (this.events[type]) {const index = this.events[type].indexOf(listener);
      this.events[type].splice(index, 1);
    }
  }
}

此处 EventEmitter 就是一个订阅核心。