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

ops/2024/11/27 19:10:06/

观察者模式(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/ops/137148.html

相关文章

python语言基础

1. 基础语法 Q: Python 中的变量与数据类型有哪些? A: Python 支持多种数据类型,包括数字(整数 int、浮点数 float、复数 complex)、字符串 str、列表 list、元组 tuple、字典 dict 和集合 set。每种数据类型都有其特定的用途和…

【es6】原生js在页面上画矩形及删除的实现方法

画一个矩形,可以选中高亮,删除自己效果的实现,后期会丰富下细节,拖动及拖动调整矩形大小 实现效果 代码实现 class Draw {constructor() {this.x 0this.y 0this.disX 0this.disY 0this.startX 0this.startY 0this.mouseDo…

获 2023 年度浙江省科学技术进步奖一等奖 | 网易数智日报

11 月 22 日,加快建设创新浙江因地制宜发展新质生产力动员部署会暨全省科学技术奖励大会在杭州隆重召开。浙江大学、网易数智等单位联合研发的“大规模结构化数据智能计算平台及产业化”项目获得 2023 年度浙江省科学技术进步奖一等奖。 加快建设创新浙江因地制宜发…

微信万能门店小程序系统存在任意文件读取漏洞

免责声明: 本文旨在提供有关特定漏洞的深入信息,帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步,未经授权访问系统、网络或应用程序,可能会导致法律责任或严重后果。因此,作者不对读者基于本文内容所采取的任何行为承担责任。读者在…

如何开发历史题材游戏。

历史题材的数据整理要领:1. 当时的主流文化和著名作品;2. 后世的一些追记与创作(与相关观点和主张的发端有关);3. 高频词汇和用语(不一定是当时的实际数据、来源可以是后来的一些创作,关键在于体…

调用 AWS Lambda 时如何传送字节数组

本文主要验证用 Python 写的 AWS Lambda 与 Java 客户端之间如何双向传递二进制数据,这里不涉及到 Lambda 流输入输出的问题。比如一个 Python AWS Lambda 的处理方法声明是 def lambda_handler(event, context): pass # or do something 通过我们用 Lambda 调…

使用Hutool读取大Excel

改造后可以在数秒内读取百万级别量的excel数据&#xff0c;注意&#xff1a;csv不行&#xff0c;先转成excel再读取 public class MyBigExcelUtil {/*** 储存表头*/private static List<Object> headLine;/*** 储存返回数据*/private static List<Map<String, Obj…

Jtti:排查和解决服务器死机问题的步骤

服务器死机是一个严重的问题&#xff0c;可能导致业务中断和数据丢失。要排查和解决服务器死机问题&#xff0c;需要系统地检查以下几个方面&#xff1a; 一、硬件问题 电源供应&#xff1a;检查电源是否稳定&#xff0c;是否有电源故障或电源线松动的问题。查看不间断电源(UPS…