标签： event

发布于

React 应用间状态通信：利用事件总线（Event Bus）与跨应用 Context 模拟实现 React 应用的解耦

React 应用间状态通信：利用事件总线（Event Bus）与跨应用 Context 模拟实现 React 应用的解耦 开场白：各位，准备好打破 React 的“自闭症”了吗？ 大家好！欢迎来到今天的讲座。我是你们的老朋友，那个总是试图让代码像乐高积木一样松耦合的资深工程师。 今天我们要聊一个非常有意思，甚至有点“变态”的话题：React 应用间状态通信。 我们知道，React 是个很乖的孩子，它有个原则叫“单向数据流”。它喜欢把数据像传接力棒一样，从最上面的 App 传到 Header，再传到 Button，最后传到 Modal。这很完美，这叫“父子通信”。但是，一旦你的应用变得稍微复杂一点，比如你接手了一个微前端项目，或者你不得不把一个巨大的单体应用拆成了两个独立的 React 实例（App A 和 App B），问题就来了。 App A 想告诉 App B：“嘿，我刚买了个薯片！” App B 回答：“我听不见啊！你在跟我说话吗？” 这就是 React 的局限性。React 的 Context API 和 Redux 等状态管理工具，它们通常只在一个 React 根节点下工作。 …

继续阅读“React 应用间状态通信：利用事件总线（Event Bus）与跨应用 Context 模拟实现 React 应用的解耦”

发布于

React 交互响应式设计：利用 Event Bubbling 原理在 React 中实现高性能的全局热键监听

React 交互响应式设计：利用 Event Bubbling 原理在 React 中实现高性能的全局热键监听 嘿，各位前端界的“键盘侠”和“鼠标手”们，大家好！ 我是你们的老朋友，一个在 React 代码堆里摸爬滚打多年，头发日渐稀疏但眼神依然犀利的资深工程师。 今天，我们要聊的话题非常硬核，也非常实用。想象一下，你正在开发一个复杂的单页应用（SPA）。用户在疯狂点击按钮，数据在疯狂加载，界面在疯狂闪烁。这时候，你的产品经理（或者你自己）突然冒出一个天才的想法：“嘿，咱们能不能加个快捷键？比如按一下 Ctrl+K 就能弹出一个搜索框？或者按 Ctrl+S 就能保存当前草稿？” 这时候，如果你是个新手，你可能会想：“好办！给每个按钮都绑个 onKeyDown 事件不就行了？” 兄弟，醒醒！那可是 50 个按钮啊！而且随着页面变大，按钮会越来越多。如果你给每个按钮都绑事件，你的浏览器内存会笑得像个漏气的气球。更糟糕的是，当你删除那个按钮时，你还得记得把事件监听器也干掉，否则内存泄漏就像你那个再也回不去的前女友一样，阴魂不散。 今天，我们就来聊聊如何用事件委托（Event Delegati …

继续阅读“React 交互响应式设计：利用 Event Bubbling 原理在 React 中实现高性能的全局热键监听”

发布于

解析 ‘Event-Driven Architecture (EDA) in Go’：利用 NATS 或 JetStream 构建具备强韧性的分布式异步系统

各位技术同仁，下午好！ 欢迎来到今天的讲座，我们将深入探讨一个在现代分布式系统设计中至关重要的主题：利用 NATS 或 JetStream 在 Go 语言中构建具备强韧性的分布式异步系统，即事件驱动架构（EDA）。在微服务盛行、业务复杂度日益增长的今天，构建能够弹性伸缩、容错性强、响应迅速的系统，已成为我们面临的共同挑战。事件驱动架构正是应对这些挑战的强大范式，而 Go 语言以其卓越的并发能力和性能，与 NATS/JetStream 结合，为我们提供了实现这一目标的最佳实践。 我将带领大家从宏观的架构理念，逐步深入到 Go 语言的具体实现细节，并探讨如何通过 NATS 和 JetStream 的高级特性，确保系统的强韧性与可靠性。 1. 事件驱动架构（EDA）的基石 在深入技术细节之前，我们首先要对事件驱动架构有一个清晰的理解。它不仅仅是一种技术栈的选择，更是一种系统设计的哲学。 1.1 什么是事件驱动架构？ 事件驱动架构是一种软件架构范式，它围绕事件的生成、检测、消费和响应来组织系统。在这种架构中，系统组件通过发布和订阅事件来相互通信，而不是直接调用。 事件 (Event)：表示系统 …

继续阅读“解析 ‘Event-Driven Architecture (EDA) in Go’：利用 NATS 或 JetStream 构建具备强韧性的分布式异步系统”

发布于

深入 ‘Wait-for-Event’ 模式：如何设计一个能在节点中间暂停并等待外部系统信号的异步图？

各位同仁、技术爱好者们，晚上好！ 今天，我们将一同深入探讨一个在现代异步系统设计中至关重要的模式——‘Wait-for-Event’。想象一下，我们正在构建一个复杂的业务流程，它可能涉及人工审批、外部系统的数据处理、甚至漫长的数据同步。这些流程并非一蹴而就，它们常常需要在某个节点停下来，等待一个外部的信号，然后才能继续。这就像在一条生产线上，某个工位完成了一部分工作后，必须等待质检部门的反馈，才能继续下一个环节。 在同步编程中，我们可能会简单地使用阻塞调用，但那会迅速扼杀系统的响应性和吞吐量。在异步编程的世界里，我们追求的是非阻塞、高并发。那么，如何在异步图中，实现一个节点优雅地“暂停”，然后等待一个外部信号，最后再“恢复”执行呢？这正是我们今天要解决的核心问题。 深入 ‘Wait-for-Event’ 模式：构建可暂停异步图的艺术与实践 引言：异步图与等待的艺术 在构建现代软件系统时，我们经常会遇到需要协调多个独立任务或服务的情况。传统上，我们可能会使用线性流程或简单的回调链。然而，当这些任务变得复杂、依赖关系增多，并且涉及到不确定何时 …

继续阅读“深入 ‘Wait-for-Event’ 模式：如何设计一个能在节点中间暂停并等待外部系统信号的异步图？”

发布于

深入 ‘Wait-for-External-Event’：设计一个能暂停运行并等待 Webhook 回调的 Agent

尊敬的各位同仁，各位技术爱好者： 大家好！ 今天，我们将深入探讨一个在构建现代分布式系统，尤其是自动化 Agent 和工作流引擎中至关重要的概念——“等待外部事件”（Wait-for-External-Event）。这是一个看似简单，实则蕴含复杂设计哲学和工程实践的议题。我们将聚焦于一个具体场景：如何设计一个能够暂停运行，并优雅地等待 Webhook 回调的 Agent。 设想一下，你的 Agent 启动了一个漫长的第三方服务操作，比如创建了一个云计算资源，或者发起了一笔跨境支付。这些操作通常不会立即完成，而是会在未来的某个时刻通过 Webhook 通知你的系统。在等待期间，Agent 不应该白白占用系统资源，更不应该因为系统重启而丢失它正在等待的上下文。它需要一种机制，能够“冬眠”，并在收到特定的外部信号后“苏醒”，然后精确地从它暂停的地方继续执行。 这正是我们今天演讲的核心——构建一个既能响应业务需求，又能具备韧性和可扩展性的“事件驱动型”Agent。 第一章： Agent 的本质与“等待”的挑战 在开始设计之前，我们首先需要对 Agent 的概念以及“等待”这一行为进行深入理解。 …

继续阅读“深入 ‘Wait-for-External-Event’：设计一个能暂停运行并等待 Webhook 回调的 Agent”

发布于

什么是‘事件驱动型领域模型’（Event-Sourced Domain Model）？在 JS 前端实现‘状态回溯’

技术讲座：事件驱动型领域模型与JS前端状态回溯 引言 在软件工程中，领域模型是描述业务逻辑的核心抽象。传统的领域模型通常以状态为核心，而事件驱动型领域模型（Event-Sourced Domain Model，简称ESDM）则强调事件的重要性。本文将深入探讨ESDM的概念，并探讨如何在JavaScript（JS）前端实现状态回溯。 一、事件驱动型领域模型（ESDM） 1.1 ESDM概述 ESDM是一种设计模式，它将领域模型与事件日志相结合。在ESDM中，领域对象的状态变化由一系列事件触发，每个事件都记录了状态变化的历史。 1.2 ESDM的核心概念 领域对象：表示业务实体的对象，如用户、订单等。 事件：表示领域对象状态变化的记录，如用户登录、订单创建等。 事件日志：存储事件的数据库或文件系统。 事件处理器：负责处理事件的函数或类。 1.3 ESDM的优势 可追溯性：通过事件日志，可以轻松地回溯领域对象的历史状态。 可测试性：事件可以被独立地测试，提高了测试的覆盖率。 可扩展性：通过添加新的事件和事件处理器，可以轻松地扩展领域模型。 二、JS前端状态回溯 2.1 状态回溯概述 状态回溯 …

继续阅读“什么是‘事件驱动型领域模型’（Event-Sourced Domain Model）？在 JS 前端实现‘状态回溯’”

发布于

JavaScript 中的 ‘Event Loop Starvation’：如何防止一个无限循环的微任务彻底挂起整个页面？

技术讲座：JavaScript 中的 ‘Event Loop Starvation’ 防范与解决 引言 在现代的Web开发中，JavaScript作为前端编程的主要语言，已经变得无处不在。随着异步编程和事件循环的广泛应用，开发者们开始更多地使用微任务（microtask）和宏任务（macrotask）。然而，一个无限循环的微任务可能会引起所谓的 ‘Event Loop Starvation’，导致整个页面的响应能力完全丧失。本文将深入探讨这一现象，并提供解决方案。 目录 事件循环与任务队列 微任务与宏任务 事件循环星乏（Event Loop Starvation） 如何检测事件循环星乏 防范事件循环星乏的策略 实战案例：使用Node.js处理大量微任务 总结 1. 事件循环与任务队列 JavaScript运行时环境通常采用事件循环（Event Loop）机制来处理异步事件。事件循环主要由以下三个部分组成： 调用栈（Call Stack）：用于存储所有正在执行的函数调用。 任务队列（Task Queue）：存储所有等待执行的异步任务，如定时 …

继续阅读“JavaScript 中的 ‘Event Loop Starvation’：如何防止一个无限循环的微任务彻底挂起整个页面？”

发布于

Type-Safe Event Emitter：利用映射类型（Mapped Types）构建强类型事件总线

技术讲座：利用映射类型构建强类型事件总线 引言 在软件开发中，事件驱动编程模型（Event-Driven Programming）是一种常见的设计模式，它允许程序通过事件来响应外部或内部的变化。事件总线（Event Bus）作为一种实现事件驱动编程的工具，能够简化事件监听和触发的过程。然而，传统的实现方式往往在类型安全方面存在不足。本文将探讨如何利用映射类型（Mapped Types）构建一个强类型的事件总线。 1. 事件总线简介 事件总线是一种用于管理事件订阅和发布的数据结构。它可以注册事件监听器，当事件发生时，通知所有注册的监听器。以下是事件总线的基本操作： 订阅事件：为特定事件添加监听器。 取消订阅事件：移除特定事件的监听器。 触发事件：发布一个事件，通知所有订阅了该事件的监听器。 2. 传统事件总线的局限性 传统的实现方式通常使用对象或字典来存储事件监听器，如下所示： class EventBus { private listeners: { [event: string]: Function[] } = {}; subscribe(event: string, listene …

继续阅读“Type-Safe Event Emitter：利用映射类型（Mapped Types）构建强类型事件总线”

发布于

事件委托（Event Delegation）的原理：为什么能减少内存占用？`target` 和 `currentTarget` 的区别

事件委托（Event Delegation）原理详解：为什么能减少内存占用？target 和 currentTarget 的区别 大家好，欢迎来到今天的讲座！我是你们的技术讲师。今天我们要深入探讨一个在前端开发中非常关键但又常常被误解的概念——事件委托（Event Delegation）。 无论你是刚入门的初级开发者，还是有一定经验的中级工程师，理解事件委托不仅能让你写出更高效的代码，还能帮你解决很多性能问题和逻辑混乱的问题。我们将从它的基本原理讲起，逐步深入到它如何减少内存占用，并重点解释两个常被混淆的核心属性：target 和 currentTarget。 一、什么是事件委托？ 定义 事件委托是一种利用事件冒泡机制来处理多个子元素事件的方法。它的核心思想是：不直接为每个子元素绑定事件监听器，而是将事件监听器绑定到父元素上，通过判断事件源（即触发事件的那个元素）来执行相应的逻辑。 举个简单的例子： <ul id=”list”> <li>Item 1</li> <li>Item 2</li> <li>Item 3& …

继续阅读“事件委托（Event Delegation）的原理：为什么能减少内存占用？`target` 和 `currentTarget` 的区别”

发布于

手写发布订阅（Event Emitter）：实现 `on`、`emit`、`off` 和 `once` 方法

手写发布订阅模式：从零实现 Event Emitter 的完整指南 大家好，欢迎来到今天的讲座。今天我们不聊框架、不谈算法，而是深入到 JavaScript 底层机制中，一起手写一个经典的 Event Emitter（事件发射器） 实现。它虽然看似简单，但却是 Node.js 核心模块、前端状态管理库（如 Redux、Vuex）、以及各类异步通信系统的基础。 你可能在项目中用过 eventEmitter.on(‘click’, handler) 这样的代码，但你知道它是怎么工作的吗？我们今天的目标就是——亲手实现一套完整的 on、emit、off 和 once 方法，让你真正理解“发布-订阅”模式的本质。 一、什么是发布订阅模式？ 发布订阅是一种行为设计模式，允许对象之间解耦地通信。它有两个角色： 角色 职责 发布者（Publisher） 发送事件（emit），通知所有监听者 订阅者（Subscriber） 监听特定事件（on），执行回调函数 这种模式的好处是： 解耦：发布者不需要知道谁在监听 灵活扩展：可以动态添加或移除监听器 支持多对多通信：一个事件可被多个监听者处理 Node.j …

继续阅读“手写发布订阅（Event Emitter）：实现 `on`、`emit`、`off` 和 `once` 方法”