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

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

相关文章
|
1月前
|
设计模式 监控 Java
Kotlin - 改良设计模式 - 观察者模式
Kotlin - 改良设计模式 - 观察者模式
53 3
|
1月前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
|
1月前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
|
1月前
|
设计模式 开发者 Python
Python编程中的设计模式:工厂方法模式###
本文深入浅出地探讨了Python编程中的一种重要设计模式——工厂方法模式。通过具体案例和代码示例,我们将了解工厂方法模式的定义、应用场景、实现步骤以及其优势与潜在缺点。无论你是Python新手还是有经验的开发者,都能从本文中获得关于如何在实际项目中有效应用工厂方法模式的启发。 ###
|
23天前
|
设计模式 消息中间件 搜索推荐
Java 设计模式——观察者模式:从优衣库不使用新疆棉事件看系统的动态响应
【11月更文挑战第17天】观察者模式是一种行为设计模式,定义了一对多的依赖关系,使多个观察者对象能直接监听并响应某一主题对象的状态变化。本文介绍了观察者模式的基本概念、商业系统中的应用实例,如优衣库事件中各相关方的动态响应,以及模式的优势和实际系统设计中的应用建议,包括事件驱动架构和消息队列的使用。
|
25天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
36 1
|
29天前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
29 2
|
1月前
|
设计模式 安全 Java
Kotlin - 改良设计模式 - 构建者模式
Kotlin - 改良设计模式 - 构建者模式
|
1月前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
28 3
|
1月前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
42 1