合肥网站运营,房地产市场调查问卷,合肥网站建设网新,科研网站怎么建设观察者模式与发布订阅模式的区别#xff1a; 1、观察者模式中只有观察者和被观察者#xff0c;发布订阅模式中有发布者、订阅者、调度中心 2、观察者模式是被观察者发生变化时自己通知观察者#xff0c;发布订阅模式是通过调度中心来进行分布订阅操作
发布订阅模式
class …观察者模式与发布订阅模式的区别 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)
