如何实现观察者模式和发布-订阅模式?

要实现观察者模式和发布-订阅模式,你需要遵循一些基本的步骤和原则。下面分别介绍这两种模式的实现方法。

如何实现观察者模式:

观察者模式(Observer Pattern)是一种行为设计模式,用于维护观察者(Observer)对象与被观察者(Subject)对象之间的关系。这种关系是一对多的关系,即一个被观察者可以有多个观察者,当被观察者发生变化时,所有注册的观察者都会收到通知并进行相应的更新。

  1. 定义一个Subject(被观察者)类,包含以下内容:
  • 一个保存Observer(观察者)对象的列表。
  • 注册Observer的方法(addObserver)。
  • 移除Observer的方法(removeObserver)。
  • 通知所有Observer的方法(notifyObservers)。
  1. 定义一个Observer接口,包含以下内容:
  • 更新的方法(update)。
  1. 实现Observer接口的ConcreteObserver类(具体的观察者)。
  2. 使用Subject类和Observer接口来建立系统中的观察者和被观察者之间的关系。

如何实现发布-订阅模式:

发布-订阅模式(Publish-Subscribe Pattern)也是一种消息传递模式,与观察者模式类似,但它通常涉及一个称为Broker的中间实体,以维持发布者(Publisher)和订阅者(Subscriber)之间的解耦状态。

  1. 定义一个Publisher(发布者)类,包含以下内容:
  • 发布消息的方法(publish)。
  1. 定义一个Subscriber(订阅者)类,包含以下内容:
  • 订阅消息的方法(subscribe)。
  • 取消订阅的方法(unsubscribe)。
  1. 定义一个Broker(经纪人)类,包含以下内容:
  • 保存Publisher和Subscriber对象的列表。
  • 注册Publisher和Subscriber的方法。
  • 当Publisher发布消息时,通过Broker将消息分发给感兴趣的Subscriber。
  1. 使用Publisher类、Subscriber类和Broker类来建立系统中的发布者、订阅者和经纪人之间的关系。

代码示例:

以下是两种模式的一个简化版的JavaScript实现:

观察者模式

js 复制代码
class Observer {
  update() {
    console.log('Observer has been updated.');
  }
}
 
class Subject {
  constructor() {
    this.observers = [];
  }
 
  addObserver(observer) {
    this.observers.push(observer);
  }
 
  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }
 
  notifyObservers() {
    this.observers.forEach(observer => observer.update());
  }
}
 
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
 
subject.addObserver(observer1);
subject.addObserver(observer2);
 
subject.notifyObservers(); // Observer has been updated.

发布-订阅模式

js 复制代码
class Publisher {
  publish(message) {
    console.log(`Publisher: ${message}`);
  }
}
 
class Subscriber {
  subscribe(message) {
    console.log(`Subscriber: ${message}`);
  }
}
 
class Broker {
  constructor() {
    this.publishers = [];
    this.subscribers = [];
  }
 
  register(publisher) {
    this.publishers.push(publisher);
  }
 
  register(subscriber) {
    this.subscribers.push(subscriber);
  }
 
  distribute(message) {
    this.subscribers.forEach(subscriber => subscriber.subscribe(message));
  }
}
 
const broker = new Broker();
const publisher = new Publisher();
const subscriber1 = new Subscriber();
const subscriber2 = new Subscriber();
 
broker.register(publisher);
broker.register(subscriber1);
broker.register(subscriber2);
 
publisher.publish('Hello'); // Subscriber: Hello

请注意,实际应用中可能需要更复杂的逻辑和错误处理,但这些示例足以展示两种模式的基本概念。

相关推荐
程序员黑豆2 分钟前
鸿蒙开发:RelativeContainer相对布局组件实战——实现5个文本组件对齐
前端·华为·harmonyos
环境栈笔记9 分钟前
高性价比指纹浏览器推荐与选型:如何对照价格和实际可用功能筛选候选
前端·人工智能·后端·自动化
hyf32663324 分钟前
泛程序哪有想象中难!小白跟着走一遍就全懂
前端·爬虫·搜索引擎·seo·蜘蛛池
码农学院35 分钟前
React公众号开发:母婴用品会员积分体系技术方案
前端·react.js·前端框架
路光.1 小时前
Vue2升级Vue3处理原 UMD/CommonJS 打包文件,不是标准 ESM
前端·javascript·vue.js·vue3
黄华SJ520it1 小时前
门店预约系统开发:提升服务行业数字化转型
前端·数据库·系统开发
一只月月鸟呀2 小时前
移动端tap与click的区别 && 点透事件
开发语言·前端·javascript
雪隐2 小时前
AI股票小助手10-我用代码管住自己的手:一个普通人的市场观察笔记
前端·人工智能·后端
KaMeidebaby3 小时前
卡梅德生物技术快报|抗体筛选:抗体筛选中的噬菌体展示四参数调优——从流程设计到数据验证
开发语言·前端·javascript
甲维斯3 小时前
Opus5.0首测,瘫坐沙发!效果,时间,token皆无敌!
前端·人工智能