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

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

相关文章
|
7天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
|
27天前
|
设计模式 传感器
【设计模式】观察者模式(定义 | 特点 | Demo入门讲解)
【设计模式】观察者模式(定义 | 特点 | Demo入门讲解)
33 0
|
2天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
11 3
|
14天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
32 9
|
13天前
|
前端开发 JavaScript UED
探索JavaScript中的异步编程模式
【10月更文挑战第21天】在数字时代的浪潮中,JavaScript作为一门动态的、解释型的编程语言,以其卓越的灵活性和强大的功能在Web开发领域扮演着举足轻重的角色。本篇文章旨在深入探讨JavaScript中的异步编程模式,揭示其背后的原理和实践方法。通过分析回调函数、Promise对象以及async/await语法糖等关键技术点,我们将一同揭开JavaScript异步编程的神秘面纱,领略其带来的非阻塞I/O操作的魅力。让我们跟随代码的步伐,开启一场关于时间、性能与用户体验的奇妙之旅。
|
13天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
25 2
|
22天前
|
设计模式 监控 UED
设计模式之观察者模式
【10月更文挑战第12天】 观察者模式是一种行为型设计模式,定义了一对多的依赖关系,当一个对象状态改变时,所有依赖它的对象都会自动更新。主要由主题(被观察者)和观察者组成,实现对象间的松耦合,广泛应用于用户界面、事件驱动系统和数据监控等领域。
|
1天前
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第33天】在JavaScript的世界里,异步编程是提升应用性能和用户体验的关键。本文将带你深入理解异步编程的核心概念,并展示如何在实际开发中运用这些知识来构建更流畅、响应更快的Web应用程序。从回调函数到Promises,再到async/await,我们将一步步解锁JavaScript异步编程的秘密,让你轻松应对各种复杂的异步场景。
|
23天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
本教程详细讲解Kotlin语法,适合深入学习。对于快速掌握Kotlin,推荐“简洁”系列教程。本文特别介绍了观察者模式,包括使用Java API和Kotlin委托属性(如Delegates.observable)实现的方法,旨在帮助开发者更高效地实现和优化观察者模式的应用。
31 3
|
30天前
|
JavaScript 前端开发 API
探索Node.js中的异步编程模式
【10月更文挑战第4天】在JavaScript的世界中,异步编程是提升应用性能和用户体验的关键。本文将深入探讨Node.js中异步编程的几种模式,包括回调函数、Promises、async/await,并分享如何有效利用这些模式来构建高性能的后端服务。