当前位置: 首页 > news >正文

JavaScript 浅谈观察者模式 前端设计模式

2、观察者模式

2.1、观察者模式

2.1.1、前言

定义一种一对多的依赖关系,当一个对象发生变化时,所有依赖于它的对象都会自动收到通知并更新。

两个角色:

  1. Subject(主题/被观察者)
  1. Observer(观察者)

观察者模式一般至少有一个 Subject(主题) ,可以有多个Observer(观察者)。

二者关系: Subject(主题)主动建立与观察者的关系。

Subject(主题/被观察者):至少要有三个方法——添加观察者、移除观察者、通知观察者。

2.1.2、代码
		<input type="text" id="app" oninput="handleInput(event)">
<script>// 主题,接收状态变化,并通知每个观察者class Subject {constructor() {this.observers = []}// 新增观察者addObserver(observer) {this.observers.push(observer)}// 通知每个观察者notify(state) {this.observers.forEach(observer => {observer.update(state)})}removeObserver(observer) {const index = this.observers.indexOf(observer);if (index !== -1) {this.observers.splice(index, 1);}}}// 观察者,等待被通知class Observe {constructor(name) {this.name = name}update(state) {console.log(`${this.name} 获取到最新值:${state}`);}}const handleInput = (e) => {const event = e || eventconst value = event.target.value// 实例化一个主题const sub = new Subject()// 实例化两个观察者 一个沐歌,一个沐夏const muge = new Observe('沐歌')const muxi = new Observe('沐夏')// 添加观察者实例sub.addObserver(muge)sub.addObserver(muxia)// 状态改变,通知所有观察者sub.notify(value)}</script>

2.2、发布订阅模式

2.2.1、前言

发布订阅模式在观察者模式的基础上加入了 事件调度中心 ,提供更灵活的控制,适用于复杂的消息交互场景。

观察者模式是经典的设计模式,观察者和目标之间直接交互,适合简单的一对多通知。

2.2.1、代码
/** @Author: muge* @Date: 2021-05-21 18:46:09* @LastEditors: Please set LastEditors* @LastEditTime: 2023-03-09 16:37:47*/
//仿vue-$on $emit
class Event {// 首先定义一个事件对象,用来装事件数组(多个订阅者)handlers = {};// 订阅(事件添加方法) type=事件名 callback=回调函数$on(type, callback) {if (!this.handlers[type]) {// 没有则初始化this.handlers[type] = [];}// 存入该事件this.handlers[type].push(callback);}// 触发事件 type=事件名 params=参数$emit(type, params) {// 若没有注册该事件则抛出错误if (!this.handlers[type]) return new Error("未注册该事件");// 事件触发this.handlers[type].forEach((callback) => callback(params));}// 取消订阅 type=事件名 callback=回调函数$unsubscribe(type, callback) {// 无效事件抛出异常if (!this.handlers[type]) return new Error("未注册该事件");// 执行回调callback&&callback()// 删除事件delete this.handlers[type];}
}
// 创建一个event实例
const sub = new Event();
// 订阅事件changeInputValue onLaod
sub.$on("changeInputValue", (params) => {console.log("params", params);
});
sub.$on("onLaod", (params) => {console.log("params", params);});
console.log('当前的事件列表',sub.handlers);
// 事件触发
sub.$emit("changeInputValue", "最新的值是:1");
sub.$unsubscribe('changeInputValue',()=>{console.log('取消订阅,执行的回调');
})
console.log('changeInputValue-事件取消',sub.handlers);

DOM事件也是发布订阅模式。订阅window的onload事件,当window加载完毕时会向订阅者发布消息,执行相应的回调函数。

window.addEventListener('onload', function () {console.log('loaded!')
})

相关文章:

JavaScript 浅谈观察者模式 前端设计模式

2、观察者模式 2.1、观察者模式 2.1.1、前言 定义一种一对多的依赖关系&#xff0c;当一个对象发生变化时&#xff0c;所有依赖于它的对象都会自动收到通知并更新。 两个角色&#xff1a; Subject&#xff08;主题/被观察者&#xff09; Observer&#xff08;观察者&…...

【自动驾驶】自定义消息格式的话题通信(C++版本)

目录 新建消息文件更改包xml文件中的依赖关系更改cmakelist文件中的配置执行时依赖改变cmakelist编译顺序发布者程序调用者程序新建launch文件程序测试 新建消息文件 在功能包目录下&#xff0c;新建msg文件夹&#xff0c;下面新建mymsg.msg文件&#xff0c;其内容为 string …...

提升前端性能的JavaScript技巧

1. 前端JavaScript性能问题 前端JavaScript的性能问题可以显著影响Web应用的用户体验和整体性能。以下是一些常见的前端JavaScript性能问题: 1.1. 频繁的DOM操作 问题描述:JavaScript经常需要与DOM(文档对象模型)交互来更新页面内容。然而,每次DOM操作都可能触发浏览器的…...

“服务之巅:Spring Cloud中SLA监控与管理的艺术“

标题&#xff1a;“服务之巅&#xff1a;Spring Cloud中SLA监控与管理的艺术” 在微服务架构中&#xff0c;服务调用的可靠性和性能是至关重要的。服务级别协议&#xff08;Service Level Agreement&#xff0c;简称SLA&#xff09;是衡量服务性能的关键指标&#xff0c;它定义…...

ChatGPT角色定位提问提示词和指令完整版

角色定位提问 在与ChatGPT的对话中&#xff0c;角色定位提问是一种有效的策略&#xff0c;通过为ChatGPT和自己设定特定的角色或身份&#xff0c;可以引导对话朝着更加具体、有针对性的方向发展。这种提问方式不仅有助于ChatGPT更好地理解问题的背景和需求&#xff0c;还能使回…...

docker之我不会的命令

docker命令之我不会的 保存镜像&#xff08;打包&#xff09; docker save 镜像名或镜像id -o 保存路径和镜像名字例子&#xff1a; docker save tomcat -o /home/my_tomcat.tar加载保存的镜像 docker load -i 镜像保存的位置例子 在/home/路径下 docker load -i my_tomca…...

Together规则引擎 金融解决方案

目录 1.金融法规和期望正在发生变化,快速跟踪您的金融数字化变革&#xff01;2.抵押贷款功能集&#xff08;MFS&#xff09;3.MFS 示例模型4.MFS 知识特点5.MFS特定功能 1.金融法规和期望正在发生变化,快速跟踪您的金融数字化变革&#xff01; ogether规则引擎使金融机构能够简…...

【PyQt5】PyQt5 主要类

1.经常使用的模块 Sr.No.模块描述1QtCore其他模块使用的核心非GUI类2QtGui图形用户界面组件3QtMultimedia低级多媒体编程的类4QtNetwork网络编程的类5QtOpenGLOpenGL支持类6QtScript用于评估Qt脚本的类7QtSql使用SQL进行数据库集成的类8QtSvg用于显示SVG文件内容的类9QtWebKit…...

渗透测试实战-HFS远程RCE漏洞利用

免责声明&#xff1a;文章来源于真实渗透测试&#xff0c;已获得授权&#xff0c;且关键信息已经打码处理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本…...

企业级管理系统模板 -- 若依

文章目录 前言一、若依模板运行效果二、若依模板下载地址 1、版本说明2、前端下载地址3、后端下载地址三、修改模板代码名称四、修改前端标题及logo总结 前言 在我们学习别人的项目时&#xff0c;总会遇到许多不同的管理系统&#xff0c;例如&#xff1a;学生管理系统&#xf…...

无人车搭载无人机技术详解

无人车搭载无人机技术&#xff0c;是近年来智能交通与无人机技术深度融合的产物&#xff0c;旨在通过集成两者的优势&#xff0c;实现更加灵活、高效的作业能力。该技术将无人机作为无人车的一个可移动、多功能的传感器平台或执行器&#xff0c;通过协同工作&#xff0c;扩展无…...

从“抠图”到“抠视频”,Meta上新AI工具SAM 2。

继2023年4月首次推出SAM&#xff0c;实现对图像的精准分割后&#xff0c;Meta于北京时间2024年7月30日推出了能够分割视频的新模型SAM 2&#xff08;Segment Anything Model 2&#xff09;。SAM 2将图像分割和视频分割功能整合到一个模型中。所谓“分割”&#xff0c;是指区别视…...

一篇讲清楚什么是密码加密和加盐算法 | 附Java代码实现

目录 前言&#xff1a; 一、密码加密 1. MD5介绍 2.彩虹表攻击 3.测试复杂密码是否能被攻破 二、加盐算法 1.对密码123456演示加盐算法 2.盐值的储存 3.密码加盐思想总结 三、Java代码实现 前言&#xff1a; 早些年&#xff0c;数据泄露屡见不鲜&#xff0c;每个班上总…...

C++入门2

函数重载 函数重载&#xff1a;是函数的一种特殊情况&#xff0c;C允许在同一作用域中声明几个功能类似的同名函数&#xff0c;这 些同名函数的形参列表(参数个数 或 类型 或 类型顺序)不同&#xff0c;常用来处理实现功能类似数据类型 不同的问题 比如下面的 int add(int x…...

在Nestjs使用mysql和typeorm

1. 创建项目 nest new nest-mysql-test 2. 添加config 安装 nestjs/config 包 pnpm i --save nestjs/config 添加 .env 文件 DATABASE_HOSTlocalhost DATABASE_PORT3306 DATABASE_USERNAMEroot DATABASE_PASSWORD123456 DATABASE_DBdbtest 创建 config/database.config.…...

【数据库】MySql深度分页SQL查询优化

问题描述 mysql中&#xff0c;使用limitoffset实现分页难免会遇到深度分页问题&#xff0c;即页码数越大&#xff0c;性能越差。 select * from student order by id limit 200000,10;如上语句&#xff0c;其实我们希望查询第20000页的10条数据&#xff0c;实际执行会发现耗时…...

黑马Java零基础视频教程精华部分_14_正则表达式

系列文章目录 文章目录 系列文章目录一、先爽一下正则表达式不使用正则的情况下使用正则的情况下 二、正则表达式的作用三、正则表达式具体表达1、规则2、字符类示例3、预定义字符示例首先学习转义字符 示例练习 四、基本练习1、快捷方法&#xff1a;2、验证手机号3、验证座机电…...

20240812 每日AI必读资讯

黑匣子被打开了&#xff01;能玩的Transformer可视化解释工具&#xff1a;Transformer Explainer - 佐治亚理工学院和 IBM 研究院开发一款基于 web 的开源交互式可视化工具「Transformer Explainer」&#xff0c;帮助非专业人士了解 Transformer 的高级模型结构和低级数学运算…...

C++ 项目中的类框架

/* * 类调用框架 */ /* CameraApp.h */ class CameraApp { public: CameraApp(); ~CameraApp(); int Init(void); int UnInit(void); public: XnetNode m_xnode_thd; XcamServer m_xcam_thd; }; /* CameraApp.cpp */ CameraApp::CameraApp(): m_…...

【Python随笔】比PyQt5更先进的pyside6安装和使用方法

最近因为自研日常开发工具的需求&#xff0c;决定重新拾起PyQt5之类的桌面工具开发技术栈&#xff0c;为啥选用PyQt&#xff0c;一是因为笔者比较精通python&#xff0c;二是因为不需要在外观上做什么特别的东西。经过一番调研&#xff0c;发现当前的PyQt5版本已经过时&#xf…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

数据结构第5章:树和二叉树完全指南(自整理详细图文笔记)

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...