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

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

相关文章
|
20天前
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
|
2月前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
|
1月前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
2月前
|
设计模式 安全 Java
Kotlin - 改良设计模式 - 构建者模式
Kotlin - 改良设计模式 - 构建者模式
|
2月前
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第40天】在JavaScript的世界里,异步编程是一道不可或缺的风景线。它允许我们在等待慢速操作(如网络请求)完成时继续执行其他任务,极大地提高了程序的性能和用户体验。本文将深入浅出地探讨Promise、async/await等异步编程技术,通过生动的比喻和实际代码示例,带你领略JavaScript异步编程的魅力所在。
40 1
|
2月前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
51 1
|
2月前
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第33天】在JavaScript的世界里,异步编程是提升应用性能和用户体验的关键。本文将带你深入理解异步编程的核心概念,并展示如何在实际开发中运用这些知识来构建更流畅、响应更快的Web应用程序。从回调函数到Promises,再到async/await,我们将一步步解锁JavaScript异步编程的秘密,让你轻松应对各种复杂的异步场景。
|
JavaScript 前端开发
JavaScript发布/订阅实例
原文链接: Pub/Sub JavaScript Object原文日期: 2014年6月11日翻译日期: 2014年6月13日翻译人员: 铁锚 高效AJAX网站的三大杀器: 事件代理, 浏览历史管理, 以及高效应用级 发布/订阅通信机制. 本博客的原文站点 同时使用了这三种技术,本文中作者将分享其中最简单的一个: 该网站使用的 一个微型 发布/订阅模块。
724 0
|
2月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
40 1
JavaScript中的原型 保姆级文章一文搞懂
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
127 2