news 2026/6/23 15:37:23

常见的设计模式

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
常见的设计模式

1. 事件发射器

是一种 发布-订阅 (publish,subcription) 模型的实现

事件中心、事件发射器

本质是Map存储 事件名→回调函数集合

这样彼此都不知道对方存在,都是被 事件中心 单向关联,实现解耦

{ "data": [fn1, fn2], "click": [fnA], "error": [fnX, fnY, fnZ] }

on 注册:将函数放入集合

emit 遍历集合,依次执行回调

emit(eventName, payload) { for (const fn of listeners[eventName]) { fn(payload); } }

截图工具多语言中的事件发射器

2. 观察者模式

被观察者状态变化时通知所有观察者,触发update

之间通过 subjects 通信,需要维护观察者列表并实现 广播,即调用观察者的 update 回调,所以解耦合得并不是很彻底

// 被观察者:维护状态 + 维护观察者 class Subject { constructor() { this.observers = []; this.state = null; } setState(value) { this.state = value; this.notify(value); } addObserver(observer) { this.observers.push(observer); } removeObserver(observer) { this.observers = this.observers.filter(o => o !== observer); } notify(value) { this.observers.forEach(observer => observer.update(value)); } } // 观察者:需要有 update 方法 class Observer { update(value) { console.log("收到更新:", value); } } // 使用 const subject = new Subject(); const obs1 = new Observer(); const obs2 = new Observer(); subject.addObserver(obs1); subject.addObserver(obs2); subject.setState(123); // 输出:两次 “收到更新:123”

还有例如 useForm 中对表单状态 _formState 更新后通知相关组件的实现就是内部维护了一个观察者subjects

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/22 17:07:41

如何创建自己的Gitee实现国内镜像

1、Win下访问GitHub地址 1、找到自己想要下载的Github仓库,这里以下面网址为例实现 2、复制下载地址https://github.com/Meituan-AutoML/MobileVLM.git 然后进入自己的Gitee账号,点击加号,选择从Github仓库导入 只需要将后缀为.git的克隆…

作者头像 李华
网站建设 2026/6/20 23:30:33

27、大数据存储 - Azure 数据湖全面解析

大数据存储 - Azure 数据湖全面解析 1. 理解 Azure 数据湖存储 在选择存储解决方案时,需要考虑要存储的数据量。根据数据量的不同,可以从 Azure 提供的多种服务中进行选择,如 Azure 存储、Azure SQL 或 Azure Cosmos DB,还有各种可作为虚拟机镜像的数据库,如 Cassandra …

作者头像 李华
网站建设 2026/6/15 17:54:12

docker部署n8n(AI工作流)

1、n8n简介n8n是一款功能强大的开源工作流自动化工具,它通过可视化的方式,将各种应用、服务和API连接起来,实现复杂业务流程的自动编排。 2、主要用途与场景AI工作流与智能体(Agent)编排:这是n8n近年来的重…

作者头像 李华
网站建设 2026/6/23 15:07:14

Claude Skills 深度解析:从 What、Why、How 构建领域专用 AI 能力

一、What:Claude Skills 是什么?Claude Skills 是 Anthropic 推出的领域专用知识包,本质是包含 SKILL.md 文件的目录结构,用于将程序性知识(如操作流程、行业规范、工具使用方法)打包成 AI 可复用的资源。它…

作者头像 李华
网站建设 2026/6/23 13:03:59

网站被黑后的紧急处理恢复正常步骤是什么?

随着时代的发展网站使用的频率是逐步增加。然而,随着互联网技术的不断进步,网站安全问题也引起了广泛关注。其中,最严重的问题是网站被黑客攻击。那么,何谓网站被黑?它可能会给企业和用户带来哪些风险?一、…

作者头像 李华
网站建设 2026/6/23 8:24:01

30、Linux 打印系统全解析

Linux 打印系统全解析 1. 设备管理基础 在 PC 上可连接的设备数量众多,要全面涵盖所有设备的相关知识几乎是不可能的。不过,掌握 SCSI、USB、PCMCIA 和 IEEE 1394 等设备的相关知识,再加上对打印机、以太网接口等的了解,就足以应对大多数情况。例如,识别 USB 扫描仪后,…

作者头像 李华