学习JS发布订阅与观察者模式

上两篇文章, 根据这两篇文章学习的这两种模式

重学JS（九）—— 观察者模式和发布/订阅模式真不一样
从一道面试题简单谈谈发布订阅和观察者模式

1. 发布订阅模式:

1. 包含发布者，事件调度中心，订阅者三个角色
2. 发布者和订阅者是松散耦合的，互不关心对方是否存在，他们关注的是事件本身。
3. 发布者借用事件调度中心提供的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.观察者模式

1. 在观察者模式中，只有两个主体，分别是目标对象Subject，观察者Observer
2. 观察者Observer需要实现update方法，供目标对象调用。update方法中可以执行自定义的业务代码。
3. 目标对象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. 在观察者模式中，观察者需要直接订阅目标事件。在目标发出内容改变的事件后，直接接收事件并作出响应。
2. 发布订阅模式相比观察者模式多了个事件通道，订阅者和发布者不是直接关联的。

这里再放一张文章1下面的一个评论 便于理解

image.png