【es6进阶】如何使用Proxy实现自己的观察者模式

server/2024/11/27 17:53:52/

观察者模式(Observer mode)指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。这里,我们是使用es6的proxy及reflect来实现这个效果。

实现效果

在这里插入图片描述

业务分析

  • 源数据
const object2 = {name: "张三",age: 20,
};
  • 包装源数据的方法
function observable(object) {return new Proxy(object, {get(object, key) {console.log(`你访问了${key}`);return Reflect.get(object, key);},set(object, key, value) {const result = Reflect.set(object, key, value);// 触发更新for (const observer of queuedObservers) {observer();}return result;},});
}
  • 包装数据
// 数据监听
const person = observable(object2);
  • 收集依赖,哪里在使用这个数据
const queuedObservers = new Set();const observe = (callback) => {queuedObservers.add(callback);
};//这里就是依赖
function print() {console.log(`${person.name}今年${person.age}`);
}
// 收集依赖
observe(print);
  • 改变数据,触发更新即可
person.age= 400

在这里插入图片描述


http://www.ppmy.cn/server/145397.html

相关文章

如何使用OCR技术批量识别图片中的文字并重命名文件,OCR 技术批量识别图片中的文字可能出现的错误

字符识别错误 形近字混淆:例如 “已” 和 “己”、“未” 和 “末” 等,由于外形极为相似,OCR 软件在识别时可能出现误判,将原本正确的字识别成与之形近的另一个字。比如在识别一篇手写的文章中,手写体的 “已” 可能就…

软件测试面试之常规问题

1.描述一下测试过程 类似题目:测试的生命周期 思路:这是一个“范围”很大的题目,而且回答时间一般在3分钟之内,不可能非常详细的描述整个过程,因此答题的思路要从整体结构入手,不要过细。为了保证答案的准确性,可以引…

SpringBoot(三十九)SpringBoot集成RabbitMQ实现流量削峰添谷

前边我们有具体的学习过RabbitMQ的安装和基本使用的情况。 但是呢&#xff0c;没有演示具体应用到项目中的实例。 这里使用RabbitMQ来实现流量的削峰添谷。 一&#xff1a;添加pom依赖 <!--rabbitmq-需要的 AMQP 依赖--> <dependency><groupId>org.springfr…

TCP IP协议和网络安全

传输层的两个协议&#xff1a; 可靠传输 TCP 分段传输 建立对话&#xff08;消耗系统资源&#xff09; 丢失重传netstat -n 不可靠传输 UDP 一个数据包就能表达完整的意思或屏幕广播 应用层协议&#xff08;默认端口&#xff09;&#xff1a; httpTCP80 网页 ftpTCP21验证用户身…

在Ubuntu2004中搭建基于ESP-IDF v5.1的ESP32-S3开发环境

在Ubuntu2004中搭建基于ESP-IDF v5.1的ESP32-S3开发环境 目录 1 基本资料 2 注意事项 2.1 子模块检出失败处理 2.2 选择 Espressif 下载服务器 2.3 自定义工具安装路径 2.4 导出环境变量 2.5 测试基础环境 3 创建自己的工程 3.1 创建基础应用工程 3.2 创建组件(…

Linux 虚拟机下安装RedisJSON

文章目录 一、安装 Redis二、安装RedisJSON 一、安装 Redis 安装地址 二、安装RedisJSON RedisJSON github 地址 选择版本&#xff0c;下载压缩包。 RedisJson 是根据 Rust 开发编译的&#xff0c;所以我们要在系统中安装 Rust。官网地址。 国内下载 Rust 下载较慢&#x…

Http 响应协议

HTTP的响应协议 响应数据格式 响应行 响应数据的第一行&#xff0c;包括协议、状态码、描述 响应头 从响应数据格式的第二行开始&#xff0c;也是以key:value的格式 响应体 和响应头之间有一个空行&#xff0c;是响应数据格式的最后一部分&#xff0c;用于存放响应的数据 常见响…

D2761 适合在个人电脑、便携式音响等系统中作音频限幅用。

概述&#xff1a; D2761是为保护扬声器所设计的音频限幅器&#xff0c;其限幅值可通过外接电阻来调节&#xff0c;适合在个人电脑、便携式音响等系统中作音频限幅用。D2761采用SSOP10、MSOP10、TSSOP14的封装形式封装。 主要特点&#xff1a;  工作电压范围宽&#xff1a;2.7…