设为首页收藏本站
开启辅助访问

观察者模式、中介者模式和发布订阅模式

 您所在的位置：网站首页 › 发布者订阅者模式 › 观察者模式、中介者模式和发布订阅模式

观察者模式、中介者模式和发布订阅模式

2024-07-10 08:24| 来源: 网络整理| 查看: 265

观察者模式 定义

观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新

观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯

例如生活中，我们可以用报纸期刊的订阅来形象的说明，当你订阅了一份报纸，每天都会有一份最新的报纸送到你手上，有多少人订阅报纸，报社就会发多少份报纸

报社和订报纸的客户就形成了一对多的依赖关系 在这里插入图片描述 被观察者知道观察者的存在，同时管理所有的观察者

实现 class Observer { update(params) { console.log(params) } } class Demo { update(params) { console.log(params) } } class ObserverList { constructor() { this.observerList = [] } add(observer) { this.observerList.push(observer); return } delete(observer) { this.observerList = this.observerList.filter(ob => ob !== observer); return this; } get(index) { return this.observerList[index]; } count() { return this.observerList.length; } } class Subject { observers = new ObserverList; add(observer) { this.observers.add(observer) } remove(observer) { this.observers.delete(observer); } notify(...params) { for (let i = 0; i cb(messages[index])); } } class Publisher { constructor(name, context) { this.name = name; this.context = context; } publish(type, content) { this.context.publish(type, content); } } class Subscriber { constructor(name, context) { this.name = name; this.context = context; } subscribe(type, cb) { this.context.subscribe(type, cb); } } const TYPE_A = 'music'; const TYPE_B = 'movie'; const TYPE_C = 'novel'; const pubsub = new PubSub(); const publisherA = new Publisher('publisherA', pubsub); publisherA.publish(TYPE_A, 'we are young'); publisherA.publish(TYPE_B, 'the silicon valley'); const publisherB = new Publisher('publisherB', pubsub); publisherB.publish(TYPE_A, 'stronger'); const publisherC = new Publisher('publisherC', pubsub); publisherC.publish(TYPE_C, 'a brief history of time'); const subscriberA = new Subscriber('subscriberA', pubsub); subscriberA.subscribe(TYPE_A, res => { console.log('subscriberA received', res) }); const subscriberB = new Subscriber('subscriberB', pubsub); subscriberB.subscribe(TYPE_C, res => { console.log('subscriberB received', res) }); const subscriberC = new Subscriber('subscriberC', pubsub); subscriberC.subscribe(TYPE_B, res => { console.log('subscriberC received', res) }); pubsub.notify(TYPE_A); pubsub.notify(TYPE_B); pubsub.notify(TYPE_C);

灵感来源于：addEventListener DOM2事件绑定

给当前元素的某一个事件行为，绑定多个不同的方法「事件池机制」事件行为触发，会依次通知事件池中的方法执行支持内置事件{标准事件，例如：click、dblclick、mouseenter…}

应用场景：凡是某个阶段到达的时候，需要执行很多方法「更多时候，到底执行多少个方法不确定，需要编写业务边处理的」，我们都可以基于发布订阅设计模式来管理代码；创建事件池->发布计划 向事件池中加入方法->向计划表中订阅任务 fire->通知计划表中的任务执行

let sub = (function () { let pond = {}; // 向事件池中追加指定自定义事件类型的方法 const on = function on(type, func) { // 每一次增加的时候，验证当前类型在事件池中是否已经存在 !Array.isArray(pond[type]) ? pond[type] = [] : null; let arr = pond[type]; if (arr.includes(func)) return; arr.push(func); }; // 从事件池中移除指定自定义事件类型的方法 const off = function off(type, func) { let arr = pond[type], i = 0, item = null; if (!Array.isArray(arr)) throw new TypeError(`${type} 自定义事件在事件池中并不存在!`); for (; i console.log(2); const fn3 = () => { console.log(3); sub.off('A', fn1); sub.off('A', fn2); }; const fn4 = () => console.log(4); const fn5 = () => console.log(5); const fn6 = () => console.log(6); sub.on('A', fn1); sub.on('A', fn2); sub.on('A', fn3); sub.on('A', fn4); sub.on('A', fn5); sub.on('A', fn6); setTimeout(() => { sub.emit('A'); }, 1000); setTimeout(() => { sub.emit('A'); }, 2000); 观察者模式和发布订阅模式的区别

观察者模式：某公司给自己员工发月饼发粽子，是由公司的行政部门发送的，这件事不适合交给第三方，原因是“公司”和“员工”是一个整体

发布-订阅模式：某公司要给其他人发各种快递，因为“公司”和“其他人”是独立的，其唯一的桥梁是“快递”，所以这件事适合交给第三方快递公司解决 上述过程中，如果公司自己去管理快递的配送，那公司就会变成一个快递公司，业务繁杂难以管理，影响公司自身的主营业务，因此使用何种模式需要考虑什么情况两者是需要耦合的

在观察者模式中，观察者是知道Subject的，Subject一直保持对观察者进行记录。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。

在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。

观察者模式大多数时候是同步的，比如当事件触发，Subject就会去调用观察者的方法。而发布-订阅模式大多数时候是异步的（使用消息队列）



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3