上两篇文章, 根据这两篇文章学习的这两种模式
重学JS（九）—— 观察者模式和发布/订阅模式真不一样
从一道面试题简单谈谈发布订阅和观察者模式
1. 发布订阅模式:
- 包含发布者，事件调度中心，订阅者三个角色
- 发布者和订阅者是松散耦合的，互不关心对方是否存在，他们关注的是事件本身。
- 发布者借用事件调度中心提供的publish方法发布事件，而订阅者则通过subscribe进行订阅
我们来实现一下
class PubSub
{
constructor() {
// 维护所有时间以及订阅行为
this.events = {};
}
/**
* 订阅事件
* @param {string} event 订阅的事件名称
* @param {function} fn 回调函数
*/
subscribe( event, fn ) {
if ( !this.events[event] ) {
this.events[event] = [];
}
// 将回调放入该事件下等待被触发
this.events[event].push(fn);
}
/**
* 发布事件
* @param {string} event 事件名称
* @param {...any} ...args 传递给事件的参数列表
*/
publish( event, ...args ) {
if (this.events[event] ) { // 如果事件已经注册
// 调用事件的所有订阅行为并传入相应参数
this.events[event].forEach( fn => fn(...args) )
}
}
/**
* 移除某个事件的一个订阅行为
* @param {string} event 事件名称
* @param {funtion} fn 订阅回调函数
*/
unsubscribe( event, fn ) {
if (this.events[event]) {
// 找到该事件订阅函数的下标位置
const targetIndex = this.events[event].findIndex(item => item === fn)
// findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
// 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
// 如果没有符合条件的元素返回 -1
// 删除该事件下指定的订阅行为
if (targetIndex !== -1) {
this.events[event].splice(targetIndex, 1)
}
// 该事件下无订阅行为时直接删除该订阅事件
if (this.events[event].length === 0) {
delete this.events[event]
}
}
}
/**
* 移除某个事件的所有订阅行为
* @param {string} event 事件名称
*/
unsubscribeAll(event) {
if (this.events[event]) {
delete this.events[event]
}
}
}
执行一下:
image.png
删除指定事件的某个订阅行为
image.png
删除指定事件的全部订阅行为以及事件本身
image.png
2.观察者模式
- 在观察者模式中，只有两个主体，分别是目标对象Subject，观察者Observer
- 观察者Observer需要实现update方法，供目标对象调用。update方法中可以执行自定义的业务代码。
- 目标对象Subject也通常被叫做被观察者或主题，它的职能很单一，可以理解为，它只管理一种事件。Subject需要维护自身的观察者数组observerList，当自身发生变化时，通过调用自身的notify方法，依次通知每一个观察者执行update方法。
// 观察者
class Observer {
/**
* 构造器
* @param {function} fn 回调函数，收到目标对象通知时执行
*/
constructor(fn) {
if (typeof fn === 'function') {
this.fn = fn
} else {
throw new Error('Observer构造器必须传入函数类型！')
}
}
/**
* 被目标对象通知时执行
*/
update() {
this.fn()
}
}
// 目标对象
class Subject {
constructor() {
// 维护观察者列表
this.observerList = []
}
/**
* 添加一个观察者
* @param {Observer} observer Observer实例
*/
addObserver(observer) {
this.observerList.push(observer)
}
/**
* 通知所有的观察者
*/
notify() {
this.observerList.forEach(observer => observer.update() )
}
}
image.png
差异
- 在观察者模式中，观察者需要直接订阅目标事件。在目标发出内容改变的事件后，直接接收事件并作出响应。
- 发布订阅模式相比观察者模式多了个事件通道，订阅者和发布者不是直接关联的。
这里再放一张文章1下面的一个评论 便于理解
image.png
