观察者模式和发布订阅模式

观察者模式与发布订阅模式的区别：
1、观察者模式中只有观察者和被观察者，发布订阅模式中有发布者、订阅者、调度中心
2、观察者模式是被观察者发生变化时自己通知观察者，发布订阅模式是通过调度中心来进行分布订阅操作

发布订阅模式

class EventBus {constructor() {this.events = {}; // 存储事件及其对应的回调函数列表}// 订阅事件subscribe(eventName, callback) {this.events[eventName] = this.events[eventName] || []; // 如果事件不存在，创建一个空的回调函数列表this.events[eventName].push(callback); // 将回调函数添加到事件的回调函数列表中}// 发布事件publish(eventName, data) {if (this.events[eventName]) {this.events[eventName].forEach(callback => {callback(data); // 执行回调函数，并传递数据作为参数});}}// 取消订阅事件unsubscribe(eventName, callback) {if (this.events[eventName]) {this.events[eventName] = this.events[eventName].filter(cb => cb !== callback); // 过滤掉要取消的回调函数}}
}
const eventBus = new EventBus()
eventBus.subscribe('add', () => {})

观察者模式

 ​​class Dom {​​​​    constructor() {​​
​​        // 订阅事件的观察者​​
​​        this.events = {}​​}​​/**​​​​    * 添加事件的观察者​​
​​     * @param {String} event  订阅的事件​​​​    * @param {Function} callback 回调函数(观察者)​​​​    */​​​​    addEventListener(event, callback) {​​​​        if (!this.events[event]) {​​this.events[event] = []​​
​​        }​​​​        this.events[event].push(callback)​​}​​​​    removeEventListener(event, callback) {​​if (!this.events[event]) {​​return​​
​​        }​​​​       const callbackList = this.events[event]​​const index = callbackList.indexOf(callback)​​​​            if (index > -1) {​​​​            callbackList.splice(index, 1)​​​​        }​​}​​​​    /**​​
​​    	* 触发事件​​​​    	* @param {String} event​​​​    */​​​​    fireEvent(event) {​​​​        if (!this.events[event]) {​​
​​            return​​
​​        }​​​​        this.events[event].forEach(callback => {​​​​            callback()​​})​​
​​    }​​​​}​​​​const handler = () => {​​​​   console.log('fire click')​​​​}​​​const dom = new Dom()​​dom.addEventListener('click', handler)​​
​​dom.addEventListener('move', function() {​​console.log('fire click2')​​​})​​
​​dom.fireEvent('click')​​