再谈观察者模式的具体应用,如监听一个class其中一个属性,如websocket中onmessage的实现

再谈观察者模式的具体应用,如监听一个class其中一个属性,如websocket中onmessage的实现

概述

在JavaScript中,观察者模式是一种设计模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象,当主题对象状态发生变化时,所有依赖于它的观察者都会得到通知并被自动更新。

观察者模式通常包含以下几个角色:

  1. Subject(主题):维护一系列的观察者,提供注册和删除观察者的方法,并在状态发生改变时通知所有注册的观察者。

  2. Observer(观察者):定义一个更新接口,使得在接收到主题通知时能够执行相应的操作。

下面是一个简单的JavaScript观察者模式的实现示例:

javascript
Copy code
// 主题对象
class Subject {constructor() {this.observers = []; // 存储观察者}// 注册观察者addObserver(observer) {this.observers.push(observer);}// 移除观察者removeObserver(observer) {this.observers = this.observers.filter(obs => obs !== observer);}// 通知所有观察者notify() {this.observers.forEach(observer => observer.update());}
}// 观察者对象
class Observer {constructor(name) {this.name = name;}// 更新方法update() {console.log(`${this.name} 收到更新通知`);}
}// 使用观察者模式
const subject = new Subject();const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');subject.addObserver(observer1);
subject.addObserver(observer2);// 主题状态发生改变,通知所有观察者
subject.notify();// 输出:
// Observer 1 收到更新通知
// Observer 2 收到更新通知

在这个例子中,Subject是主题对象,负责维护观察者列表,并提供注册、移除和通知观察者的方法。Observer是观察者对象,实现了一个更新方法,用于在接收到通知时执行相应的操作。

通过这种模式,你可以轻松地添加或移除观察者,而且主题状态发生改变时,所有观察者都会得到通知。这在实现一些事件驱动的系统或 UI 组件中是非常常见的。

应用1

  1. 需求:
    定义一个class,class里面有一个成员state,通过onchange监听到state的变化
  2. 实现:
    可以使用 getter 和 setter 方法来实现对 state 成员的监听。通过在 setter 方法中触发一个自定义事件,然后让外部通过 onchange 事件来监听状态的变化。
class StatefulClass {constructor() {this._state = null; // 使用下划线表示这是一个私有属性this._changeListeners = []; // 存储监听器的数组}// 定义 state 的 getter 方法get state() {return this._state;}// 定义 state 的 setter 方法set state(newState) {if (this._state !== newState) {this._state = newState;this.notifyChange(); // 当 state 变化时触发通知}}// 添加监听器onchange(callback) {this._changeListeners.push(callback);}// 通知所有监听器状态变化notifyChange() {this._changeListeners.forEach(callback => {callback(this._state);});}
}// 使用示例
const myInstance = new StatefulClass();// 添加监听器
myInstance.onchange((newState) => {console.log('State changed:', newState);
});// 修改 state,会触发监听器
myInstance.state = 'New State'; // 输出: State changed: New State

在这个示例中,StatefulClass 类有一个私有的 _state 属性和一个存储监听器的数组 _changeListeners。onchange 方法用于添加监听器,notifyChange 方法用于通知所有监听器。当 state 发生变化时,setter 方法会触发 notifyChange 方法,通知所有监听器。

应用2

应用1中的onchange是一个函数,可是我们看到websocket中使用的时候是一个这种形式onmessage = (e) => { },这种ws.onmessage=(e)=>{}这种赋值语句是怎么实现的监听呢?

在 JavaScript 中,onmessage 和类似的属性赋值语法实际上是使用属性存取器(Property Accessors)来实现的。这种语法允许你为一个对象的属性定义 getter 和 setter 方法。当你访问或设置这个属性时,相应的 getter 或 setter 将被调用。

在 WebSocket 中,onmessage 是一个属性,但它的赋值语法隐藏了底层的 getter 和 setter。这样的属性通常是事件属性,它允许你注册或移除事件处理函数。

以下是一个简化的示例,演示了如何在对象中使用属性存取器:

class Example {constructor() {this._messageHandler = null; // 私有属性}// 定义 onmessage 的 getter 方法get onmessage() {return this._messageHandler;}// 定义 onmessage 的 setter 方法set onmessage(handler) {this._messageHandler = handler;}
}// 使用示例
const myExample = new Example();// 设置 onmessage 处理函数
myExample.onmessage = (e) => {console.log('Message received:', e.data);
};// 获取 onmessage 处理函数
const messageHandler = myExample.onmessage;// 调用处理函数
if (messageHandler) {messageHandler({ data: 'Example message' });
}

在这个示例中,Example 类有一个私有的 _messageHandler 属性,通过定义 onmessage 的 getter 和 setter 方法,你可以像使用普通属性一样使用 onmessage。当你设置 onmessage 时,实际上调用了 setter 方法,当你获取 onmessage 时,实际上调用了 getter 方法。在 WebSocket 中,这种语法的目的是提供一种简洁的方式来处理事件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/239446.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springMVC-与spring整合

一、基本介绍 在项目开发中,spring管理的 Service和 Respository,SrpingMVC管理 Controller和ControllerAdvice,分工明确 当我们同时配置application.xml, springDispatcherServlet-servlet.xml , 那么注解的对象会被创建两次, 故…

freeswitch on debian docker

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 因为centos系统期限的原因,尝试在debian的docker上使用fs。 环境 docker engine:Version 24.0.6 debian docker:bullseye 11.8 freeswitch:v1.10.7 Debian准备 目前…

Pycharm报的一些Python语法错误

Pycharm报的一些Python语法错误 1、PEP8:Expected 2 blank less:found 1 意思是:类和上面的行要间隔两行,现在只有一行 解决办法: 间隔2行 2、Remove redundant parentheses 意思是:删除多余的括号 解决:删掉外面括…

LSTM和GRU vs 普通的循环神经网络RNN

1、考虑下列三种情况下,对比一下普通RNN的表现和LSTM和GRU表现: (1)早期观测值对预测未来观测者具有非常重要的意义。 考虑一个极端情况,其中第一个观测值包含一个校验和, 目标是在序列的末尾辨别校验和是…

应用案例 | 汽车行业基于3D机器视觉引导机器人上下料解决方案

Part.1 背景 近年来,汽车行业蓬勃发展,一度出现供不应求的现象。在汽车零配件、整车大规模制造的过程中,为了降本增效,提升产品质量,工厂急需完成自动化升级。随着人工智能的发展,越来越多的生产环节引入机…

C++(多态)

目录 前言: 1.多态的概念 2.多态的定义及实现 2.1多态的构成条件 2.2析构函数的重写(基类与派生类析构函数名字不同) 2.3虚函数重写 2.4C override 和final 2.5 重载、覆盖(重写)隐藏(重定义&#…

css 设备背景图片 宽高总是不能平铺

宽高总是宽大了 高就挤出去了;高设置了 宽度就变小了;疯掉的节奏。。。。。。 .center-bottom{background: url(/img/newpic/leftbg.png);background-repeat: no-repeat;width: 98%;height: 60%;background-position: center center;background-size: 1…

各大高校科研工具链培训PPT汇总

各大高校科研工具链培训PPT汇总 RSS 北邮图书馆:通过RSS订阅高效获取信息、追踪研究前沿山东大学图书馆:如何追踪学科研究前沿苏大图书馆:个人知识管理软件的使用中科院图书馆:利用RSS与最新资讯同步 文献管理工具 中南大学图…

JAVA WEB用POI导出EXECL多个Sheet

前端方法:调用exportInfoPid这个方法并传入要查询的id即可,也可以用其他参数看个人需求 function exportInfoPid(id){window.location.href 服务地址"/exportMdsRoutePid/"id; } 后端控制层代码 Controller Scope("prototype") R…

基于YOLOv8深度学习的智能玉米害虫检测识别系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战

《博主简介》 小伙伴们好,我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源,可关注公-仲-hao:【阿旭算法与机器学习】,共同学习交流~ 👍感谢小伙伴们点赞、关注! 《------往期经典推…

自定义Taro上传图片hooks(useUploadImg)

有两个方法需要提前引入 FileUtil(上传文件的方法)、to(对请求接口返回做了二次处理,数据和错误提示等) //FileUtil export namespace FileUtil {const env {timeout: 10000,uploadImageUrl: "阿里云的地址",};const genPolicy …

微软的word文档中内置背景音乐步骤(打开自动播放)

目录 一、前言 二、操作步骤 一、前言 有时候需要在word文档里面打开的时候就自动播放音乐或者音频,那么可以用微软的word来按照操作步骤去这样完成。 如果没有微软office的,可以下载这个是2021专业版的。因为office只能免费使用一段时间&#xff0c…

融资项目——vue之事件监听

vue通过v-on进行事件监听,在标签中使用v-on:xxx(事件名称)进行监听,事件触发的相应方法定义在Vue对象中的methods中。如下图所示: 上述代码对按钮进行监听,点击按钮后就会触发solve函数。

如何将图片(matlab、python)无损放入word论文

许多论文对插图有要求,直接插入png、jpg一般是不行的,这是一篇顶刊文章(pdf)的插图,放大2400%后依旧清晰,搜罗了网上的方法,总结了一下如何将图片无损放入论文中。 这里主要讨论的是数据生成的图…

功能强大的开源数据中台系统 DataCap 1.18.0 发布

推荐一套基于 SpringBoot 开发的简单、易用的开源权限管理平台,建议下载使用: https://github.com/devlive-community/authx 推荐一套为 Java 开发人员提供方便易用的 SDK 来与目前提供服务的的 Open AI 进行交互组件:https://github.com/devlive-commun…

LTO-3 磁带机种草终于是用上了

跑来跑去,买了不少配件,终于是把这磁带机给用上了,已经备份好了300 多 GB 的数据。 我们用了 NAS 的数据压缩功能,把需要备份的文件用 NAS 压缩成一个 Zip 文件,如果你可以 tar 的话也行。 这样传输速度更快&#xf…

Linux系统中的地址映射

一. 简介 在前面的裸机开发实验 LED灯实验中 ,其实就是操作 IMX6ULL芯片的寄存器。 Linux 驱动开发也可以操作寄存器,但是,Linux不能直接对寄存器物理地址进行读写操作,例如,寄存器 A的物理地址为 0X01010101。 裸机…

基于STM32的HC-SR501红外感应模块驱动与应用

一、 简介 HC-SR501红外感应模块是一种常用的人体红外感应模块,常用于安防监控、智能家居等领域。本文将介绍如何在STM32单片机上驱动和应用HC-SR501红外感应模块,实现基本的人体检测功能。 二、 模块原理 HC-SR501红外感应模块基于红外热释电传感器&am…

C++设计模式 #3策略模式(Strategy Method)

动机 在软件构建过程中,某些对象使用的的算法可能多种多样,经常改变。如果将这些算法都写在类中,会使得类变得异常复杂;而且有时候支持不频繁使用的算法也是性能负担。 如何在运行时根据需求透明地更改对象的算法?将…

使用 Qt API 获取串口信息

在 Qt 中&#xff0c;可以使用 QSerialPortInfo 类来获取串口信息。首先&#xff0c;确保你的 Qt 项目中包含了 serialport 模块。 使用 Qt API 获取串口信息 #include <QCoreApplication> #include <QSerialPortInfo> #include <QDebug>int main(int argc…