观察者模式与发布订阅模式的区别：
1、观察者模式中只有观察者和被观察者，发布订阅模式中有发布者、订阅者、调度中心
2、观察者模式是被观察者发生变化时自己通知观察者，发布订阅模式是通过调度中心来进行分布订阅操作
vue2中响应式数据就是由Object.defineProperty()和观察者模式结合实现的，进行依赖收集时（会收集当前组件的watcher），属性发生变化就会通知相关依赖进行更新操作。
vue2中父子组件之间通信时使用的vm.$on()和vm.$emit()这就属于发布订阅模式，还有vue2中的事件总线$bus也是。
发布订阅模式
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')
