返回顶部
首页 > 资讯 > 前端开发 > JavaScript >一文带你理解JavaScript观察者模式
  • 406
分享到

一文带你理解JavaScript观察者模式

JavaScript观察者模式JavaScript观察者 2023-05-19 11:05:16 406人浏览 泡泡鱼
摘要

目录为什么需要观察者模式代码示例应用场景DOM事件监听:数据绑定自定义事件Promise对象Pub/Sub模式观察者模式(Observer Pattern)是一种行为型设计模式,它定

观察者模式(Observer Pattern)是一种行为型设计模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象,当主题对象发生变化时,它的所有观察者都会收到通知并进行相应的处理。

观察者模式包含两个角色:

  • 主题(Subject):被观察的对象,它维护了一个观察者列表,可以添加、删除观察者,以及通知观察者状态的变化。
  • 观察者(Observer):观察主题的对象,当主题状态发生变化时,它会接收到通知并进行相应的处理。

为什么需要观察者模式

观察者模式的价值在于它可以将主题对象和观察者对象解耦,使得它们可以独立地进行扩展和修改,同时也可以降低代码的耦合度,提高代码的可维护性和可扩展性。

具体来说,观察者模式有以下几个价值:

  • 易于扩展

观察者模式可以在不修改主题对象和观察者对象的情况下,增加新的观察者对象或者新的主题对象,从而实现系统的扩展性。

  • 解耦

观察者模式将主题对象和观察者对象解耦,使得它们可以独立地进行扩展和修改,降低了它们之间的依赖关系,提高了系统的灵活性。

  • 通信

观察者模式通过事件通知的方式,实现了主题对象和观察者对象之间的通信,使得它们可以相互交流和协作,从而实现系统的功能。

总之,观察者模式可以帮助我们更好地组织代码,降低代码的耦合度,提高代码的可维护性和可扩展性,应用广泛,是一种非常有价值的设计模式。

代码示例

下面是一个简单的观察者模式的代码示例:

// 主题对象
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);
    }
  }
  
  // 通知所有观察者状态的变化
  notify() {
    for (const observer of this.observers) {
      observer.update(this);
    }
  }
  
  // 更改状态,并通知所有观察者
  setState(state) {
    this.state = state;
    this.notify();
  }
}

// 观察者对象
class Observer {
  // 接收主题对象,并将自己添加到主题的观察者列表中
  constructor(subject) {
    subject.addObserver(this);
  }
  
  // 接收通知并进行相应的处理
  update() {
    console.log('Observer update:', this);
  }
}

// 创建主题和观察者对象
const subject = new Subject();
const observer1 = new Observer(subject);
const observer2 = new Observer(subject);

// 更改主题状态,并通知所有观察者
subject.setState('new state');

这段代码中,我们首先定义了一个主题对象 Subject,它维护了一个观察者列表 observers,并提供了添加、删除观察者的方法,以及通知所有观察者状态变化的方法 notify。在 setState 方法中,我们将状态赋值给 state,并调用 notify 方法通知所有观察者。

然后定义了一个观察者对象 Observer,它在构造函数中接收主题对象 subject,并将自己添加到 subject 的观察者列表中。在 update 方法中,我们打印出观察者自身的信息。

最后创建了一个主题对象 subject,以及两个观察者对象 observer1 和 observer2。调用 setState 方法更改主题状态,并通知所有观察者。

应用场景

观察者模式的应用场景很多,以下是几个常见的场景及对应的代码示例:

DOM事件监听:

常见的如click事件、mouse事件、keyboard事件等,通过addEventListener()方法注册事件,当事件触发时,将自动调用回调函数。

// 注册事件监听
document.addEventListener('click', function() {
  console.log('click事件触发了!');
});

数据绑定

当数据模型发生变化时,观测者模式可通知视图更新,保证数据与视图同步。

// 定义对象属性
let data = { name: '小明', age: 20 };

// 通过Object.defineProperty()方法添加get/set方法
Object.defineProperty(data, 'name', {
  get: function() {
    return this._name;
  },
  set: function(newName) {
    console.log(`修改name属性为:${newName}`);
    this._name = newName;
  }
});

// 修改对象属性
data.name = '小红';

自定义事件

可通过自定义事件的方式实现观察者模式,当自定义事件触发时,所有订阅者都会得到通知并执行其回调函数。

// 创建自定义事件对象
const event = new Event('myCustomEvent');

// 注册事件监听
document.addEventListener('myCustomEvent', function(event) {
  console.log('自定义事件触发了!');
});

// 触发自定义事件
document.dispatchEvent(event);

Promise对象

Promise对象可作为一种观察者模式实现异步编程,当Promise对象状态发生改变时,所有订阅者都会得到通知并执行其回调函数。

// 创建promise对象
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise执行成功!');
  }, 1000);
});

// 注册promise状态变化的回调函数
promise.then(function(data) {
  console.log(data);
});

Pub/Sub模式

Pub/Sub模式是一种松耦合的通信机制,可通过观察者模式实现。当发布者发布消息时,所有订阅者都会得到通知并执行其回调函数。

// 创建Pub/Sub对象
const pubsub = {
  subscribers: {},
  subscribe(eventName, handler) {
    // 添加事件订阅者
    if (!this.subscribers[eventName]) {
      this.subscribers[eventName] = [];
    }
    this.subscribers[eventName].push(handler);
  },
  unsubscribe(eventName, handler) {
    // 取消事件订阅者
    if (!this.subscribers[eventName]) {
      return;
    }
    const index = this.subscribers[eventName].indexOf(handler);
    this.subscribers[eventName].splice(index, 1);
  },
  publish(eventName, data) {
    // 发布事件
    if (!this.subscribers[eventName]) {
      return;
    }
    this.subscribers[eventName].forEach((handler) => {
      handler(data);
    });
  },
};

// 订阅事件
pubsub.subscribe('myEvent', function(data) {
  console.log(`收到myEvent事件,数据为:${data}`);
});

// 发布事件
pubsub.publish('myEvent', 'Hello World!');

以上就是一文带你理解javascript 观察者模式的详细内容,更多关于JavaScript 观察者模式的资料请关注编程网其它相关文章!

--结束END--

本文标题: 一文带你理解JavaScript观察者模式

本文链接: https://www.lsjlt.com/news/213105.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 一文带你理解JavaScript观察者模式
    目录为什么需要观察者模式代码示例应用场景DOM事件监听:数据绑定自定义事件Promise对象Pub/Sub模式观察者模式(Observer Pattern)是一种行为型设计模式,它定...
    99+
    2023-05-19
    JavaScript 观察者模式 JavaScript 观察者
  • JavaScript设计模式中的观察者模式
    目录观察者设计模式初始数据被观察者观察者观察者设计模式 观察者设计模式中分为被观察者和观察者,当被观察者触发了某个边界条件,观察者就会触发事件,这里需要俩个构造函数进行观察者设计模式...
    99+
    2024-04-02
  • 手把手教你用Javascript实现观察者模式
    目录什么是观察者模式?场景模拟代码实现重构代码总结 什么是观察者模式? 观察者模式一种设计模式。 观察者模式定义了对象间的一种 一对多 的依赖关系,当一个对象的状态...
    99+
    2024-04-02
  • 解析PHP观察者模式Observer
    目录观察者模式结构图概念代码示例观察者模式结构图 概念 一个"演员"(被观察者),一群"观众"(观察者),一台"摄影机"(记录容器) 【观察者模式中主要角色】 1.抽象主题(Sub...
    99+
    2024-04-02
  • 怎样用JavaScript实现观察者模式
    目录概述观察者模式的应用场景观察者模式的实现总结概述 观察者模式又被称为发布-订阅模式,是设计模式中的一种行为型模式; 定义: 观察者模式定义了一种一对多的对象依赖关系,当被依赖的对...
    99+
    2024-04-02
  • Javascript中如何实现观察者模式
    本篇文章为大家展示了Javascript中如何实现观察者模式,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。基础知识观察者模式定义了对象间的一种一对多依赖关系,每当一...
    99+
    2024-04-02
  • 怎么用Javascript实现观察者模式
    本篇内容主要讲解“怎么用Javascript实现观察者模式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用Javascript实现观察者模式”吧!什么是观察者模式?观察者模式一种设计模式。观...
    99+
    2023-06-21
  • 怎么理解Java设计模式的观察者模式
    本篇内容介绍了“怎么理解Java设计模式的观察者模式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、什么是观察者模式在许多设计中,经常涉及...
    99+
    2023-06-25
  • 深入理解Java设计模式之观察者模式
    目录一、什么是观察者模式二、观察者模式的结构三、观察者模式的使用场景使用观察者模式也有两个重点问题要解决:广播链的问题。异步处理问题。四、观察者模式的优缺点五、观察者模式的实现六、观...
    99+
    2024-04-02
  • 详解Java中的观察者模式
    详解Java中的观察者模式?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。定义:定义对象间一种一对多的依赖关系,使得当每一个对象改变状态,则所有依赖于它的对象都会得到通知并自动更...
    99+
    2023-05-31
    java 观察 观察者模式
  • Javascript中观察者模式的示例分析
    这篇文章主要为大家展示了“Javascript中观察者模式的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Javascript中观察者模式的示例分析”这...
    99+
    2024-04-02
  • JavaScript观察者模式:揭秘设计模式的奥妙
    观察者模式是一种软件设计模式,它允许一个对象(发布者)的状态或者行为的变化通知依赖于它的其他对象(观察者)。当发布者状态发生改变时,所有注册的观察者都会收到通知,并做出相应的反应。 观察者模式在JavaScript中实现起来非常简单,它...
    99+
    2024-02-03
    JavaScript 观察者模式 设计模式 事件 监听器 发布/订阅
  • PHP设计模式中观察者模式详解
    目录简介适用场景缺点补充代码(自定义实现)简介 观察者模式是行为型模式的一种,定义了对象间一对多的关系。当对象的状态发生变化时候,依赖于它的对象会得到通知。 适用场景 类似触发钩子事...
    99+
    2022-12-20
    PHP观察者模式 PHP设计模式
  • PHP设计模式中观察者模式讲解
    目录简介适用场景优点缺点补充代码(自定义实现)代码(基于SPL实现)简介 观察者模式是行为型模式的一种,定义了对象间一对多的关系。当对象的状态发生变化时候,依赖于它的对象会得到通知。...
    99+
    2022-11-13
    PHP观察者模式 PHP设计模式
  • 一起来学习C#的观察者模式
    using System; using System.Collections.Generic; public class Example { public static vo...
    99+
    2024-04-02
  • C#中的EventHandler观察者模式详解
    目录一、解释二、事件具有以下特点:C# 和 java 比较:java 中使用的是接口。C# 使用委托机制,可以用时 + 运算符进行注册,直接多播。而 java 中是一般是使用一个集合...
    99+
    2024-04-02
  • Java观察者模式的深入了解
    目录一、观察者模式的定义和特点二、观察者模式的结构三、代码实例代码示例总结一、观察者模式的定义和特点 观察者模式的定义: 指多个对象间存在一对多的依赖关系,当一个对象的状态发生改变时...
    99+
    2024-04-02
  • JavaScript设计模式中的观察者模式怎么实现
    本文小编为大家详细介绍“JavaScript设计模式中的观察者模式怎么实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript设计模式中的观察者模式怎么实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知...
    99+
    2023-07-02
  • 浅析JavaScript观察者模式:理解事件处理机制的精髓
    JavaScript观察者模式是一种设计模式,它允许对象订阅和发布事件。这种模式非常适合用于构建事件驱动的应用程序,例如GUI或游戏。 在观察者模式中,发布者对象负责将事件发送给订阅者对象。订阅者对象负责处理这些事件。发布者对象和订阅者...
    99+
    2024-02-03
    JavaScript 观察者模式 事件处理 订阅 发布
  • Java设计模式之java观察者模式详解
    目录引言介绍角色原理类图微信订阅号的案例总结优点缺点适用场景观察者模式的典型应用JDK 提供的观察者接口Guava EventBus 中的观察者模式Spring Applicatio...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作