js设计模式-观察者模式与发布/订阅模式

简介: 观察者模式和发布/订阅模式是JavaScript中的两种设计模式,用于处理对象间的通信和事件处理。观察者模式中,一个主题对象状态改变会通知所有观察者。实现包括定义主题和观察者对象,以及在主题中添加、删除和通知观察者的功能。发布/订阅模式则引入事件管理器,允许发布者发布事件,订阅者通过订阅接收通知。

观察者模式和发布/订阅模式是两种常见的JavaScript设计模式,用于在应用程序中处理对象之间的通信和事件处理。

观察者模式(也称为订阅/发布模式)是一种行为型模式,其中存在一个主题(主体)对象和多个观察者对象。主题对象状态的更改将通知所有观察者对象,使它们能够自动更新。

在JavaScript中实现观察者模式,可以使用以下步骤:

  1. 定义主题对象(也称为发布者或被观察者)。
  2. 定义观察者对象,并为其提供一个用于接收主题对象状态更改通知的方法。
  3. 在主题对象中定义用于添加、删除和通知观察者的方法。
  4. 在主题对象状态更改时,调用通知方法,以通知所有已注册的观察者。

以下是一个简单的示例代码,演示了观察者模式的实现:

// 定义主题对象
function Subject() {
  this.observers = []; // 保存观察者对象的数组
}
Subject.prototype.addObserver = function(observer) {
  this.observers.push(observer);
};
Subject.prototype.removeObserver = function(observer) {
  var index = this.observers.indexOf(observer);
  if (index !== -1) {
    this.observers.splice(index, 1);
  }
};
Subject.prototype.notifyObservers = function() {
  for (var i = 0; i < this.observers.length; i++) {
    this.observers[i].update();
  }
};
// 定义观察者对象
function Observer(name) {
  this.name = name;
}
Observer.prototype.update = function() {
  console.log(this.name + ' received update from subject.');
};
// 创建主题对象和观察者对象
var subject = new Subject();
var observer1 = new Observer('Observer 1');
var observer2 = new Observer('Observer 2');
// 观察者对象注册到主题对象
subject.addObserver(observer1);
subject.addObserver(observer2);
// 主题对象状态更改时,通知观察者对象
subject.notifyObservers();

image.gif

发布/订阅模式是一种扩展了观察者模式的模式。在这种模式中,存在一个发布者和订阅者之间的中间组件(称为“发布/订阅器”或“事件管理器”)。发布者发布事件,订阅者通过订阅事件来接收通知。

相关文章
|
3月前
|
设计模式 缓存 Java
Java设计模式(二):观察者模式与装饰器模式
本文深入讲解观察者模式与装饰器模式的核心概念及实现方式,涵盖从基础理论到实战应用的全面内容。观察者模式实现对象间松耦合通信,适用于事件通知机制;装饰器模式通过组合方式动态扩展对象功能,避免子类爆炸。文章通过Java示例展示两者在GUI、IO流、Web中间件等场景的应用,并提供常见陷阱与面试高频问题解析,助你写出灵活、可维护的代码。
|
1月前
|
设计模式 消息中间件 传感器
Java 设计模式之观察者模式:构建松耦合的事件响应系统
观察者模式是Java中常用的行为型设计模式,用于构建松耦合的事件响应系统。当一个对象状态改变时,所有依赖它的观察者将自动收到通知并更新。该模式通过抽象耦合实现发布-订阅机制,广泛应用于GUI事件处理、消息通知、数据监控等场景,具有良好的可扩展性和维护性。
220 8
|
6月前
|
设计模式 Java 数据库连接
【设计模式】【创建型模式】工厂方法模式(Factory Methods)
一、入门 什么是工厂方法模式? 工厂方法模式(Factory Method Pattern)是一种创建型设计模式,它定义了一个用于创建对象的接口,但由子类决定实例化哪个类。工厂方法模式使类的实例化延迟
197 16
|
6月前
|
设计模式 负载均衡 监控
并发设计模式实战系列(2):领导者/追随者模式
🌟 ​大家好,我是摘星!​ 🌟今天为大家带来的是并发设计模式实战系列,第二章领导者/追随者(Leader/Followers)模式,废话不多说直接开始~
202 0
|
6月前
|
设计模式 监控 Java
并发设计模式实战系列(1):半同步/半异步模式
🌟 ​大家好,我是摘星!​ 🌟今天为大家带来的是并发设计模式实战系列,第一章半同步/半异步(Half-Sync/Half-Async)模式,废话不多说直接开始~
189 0
|
6月前
|
设计模式 安全 Java
并发设计模式实战系列(12):不变模式(Immutable Object)
🌟 大家好,我是摘星!🌟今天为大家带来的是并发设计模式实战系列,第十二章,废话不多说直接开始~
161 0
|
6月前
|
设计模式 算法 Java
设计模式觉醒系列(04)策略模式|简单工厂模式的升级版
本文介绍了简单工厂模式与策略模式的概念及其融合实践。简单工厂模式用于对象创建,通过隐藏实现细节简化代码;策略模式关注行为封装与切换,支持动态替换算法,增强灵活性。两者结合形成“策略工厂”,既简化对象创建又保持低耦合。文章通过支付案例演示了模式的应用,并强调实际开发中应根据需求选择合适的设计模式,避免生搬硬套。最后推荐了JVM调优、并发编程等技术专题,助力开发者提升技能。
|
6月前
|
设计模式 Prometheus 监控
并发设计模式实战系列(20):扇出/扇入模式(Fan-Out/Fan-In)(完结篇)
🌟 大家好,我是摘星!🌟今天为大家带来的是并发设计模式实战系列,第二十章,废话不多说直接开始~
221 0
|
JavaScript 前端开发
以【猫叫、老鼠跑、主人醒】为例子,使用 javascript 来实现 观察者模式 (有在线演示)
  “猫叫、老鼠跑、主人醒”是一个很古老的话题了,大家也都有各自的想法和解决方案。我也是看了很多,一开始的时候是相当的迷糊,这个怎么就是面试题了?考的是啥呀,和编程有关系吗?又是猫又是老鼠的,晕死了。
1603 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
284 2

热门文章

最新文章

下一篇
oss云网关配置