js 设计模式:观察者和发布订阅模式
程序员文章站
2022-05-07 09:26:52
总是把这两个当作同一个模式,但其实是不太一样的,现在重温一下。 观察者模式 观察者直接订阅目标,当目标触发事件时,通知观察者进行更新 简单实现 js class Observer { constructor(name) { this.name = name; } update() { console ......
总是把这两个当作同一个模式,但其实是不太一样的,现在重温一下。
观察者模式
观察者直接订阅目标,当目标触发事件时,通知观察者进行更新
简单实现
class observer { constructor(name) { this.name = name; } update() { console.log(`${this.name} update`) } } class subject { constructor() { this.subs = []; } add(observer) { this.subs.push(observer); } notify() { this.subs.foreach(item => { item.update(); }); } } const sub = new subject(); const ob1 = new observer('ob1'); const ob2 = new observer('ob2'); // 观察者订阅目标 sub.add(ob1); sub.add(ob2); // 目标触发事件 sub.notify();
发布订阅模式
发布订阅模式通过一个调度中心进行处理,使得订阅者和发布者分离开来,互不干扰。
简单实现
class event { constructor() { this.lists = new map(); } on(type, fn) { if (!this.lists.get(type)) { this.lists.set(type, []); } this.lists.get(type).push(fn); } emit(type, ...args) { const arr = this.lists.get(type); arr && arr.foreach(fn => { fn.apply(null, args); }); } } const ev = new event(); // 订阅 ev.on('msg', (msg) => console.log(msg)); // 发布 ev.emit('msg', '发布');
不同点
其实这两个模式可以说是同一种设计模式的不同实现。
观察者模式是观察者和目标直接进行交互,有耦合性,而发布订阅模式则是通过一个调度中心进行处理,订阅者和发布者互不干扰,进行了解耦。