标签： emit

发布于

手写发布订阅（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` 方法”

发布于

手写一个 EventEmitter（发布订阅模式）：支持 on, off, emit, once

各位开发者，下午好！ 今天，我们将深入探讨一个在现代软件开发中无处不在，却又常常被忽视其内部机制的核心模式——发布-订阅模式（Publish-Subscribe Pattern），并亲手实现一个功能完备的 EventEmitter。作为一名编程专家，理解并能构建这样的基础组件，是衡量我们对系统设计和事件驱动架构掌握程度的重要标志。 第一章：发布-订阅模式的核心理念 1.1 什么是发布-订阅模式？ 发布-订阅模式，通常简称为“Pub/Sub”，是一种消息传递模式，用于在系统组件之间实现松散耦合。它定义了这样一种机制： 发布者 (Publisher)：负责创建并发送事件或消息。发布者不知道哪些订阅者会接收这些消息，也不知道这些订阅者如何处理消息。 订阅者 (Subscriber)：注册对特定事件或消息的兴趣。当事件发生时，订阅者会被通知，并执行相应的处理逻辑。订阅者不知道是哪个发布者发送了消息。 事件通道/代理 (Event Channel/Broker)：这是模式的核心，充当发布者和订阅者之间的中介。发布者将事件发布到通道，订阅者从通道订阅事件。这个通道负责维护事件到订阅者的映射，并在事 …

继续阅读“手写一个 EventEmitter（发布订阅模式）：支持 on, off, emit, once”

发布于

Vue 3的“：如何处理`emit`的参数类型？

Vue 3 <script setup> 中 emit 参数类型处理：一场类型安全的盛宴 各位同学，大家好！今天我们来深入探讨 Vue 3 <script setup> 中 emit 的参数类型处理。这不仅仅是一个技术细节，更关乎我们如何构建类型安全、可维护的 Vue 组件。在座的各位都是未来的编程大师，掌握好这个知识点至关重要。 为什么要关注 emit 的参数类型？ 在 Vue 组件中，emit 用于触发自定义事件，并可以将数据传递给父组件。如果不对 emit 的参数类型进行明确定义，可能会导致以下问题： 类型错误： 父组件接收到的数据类型与预期不符，导致运行时错误。 代码可读性差： 不清楚 emit 传递的具体数据，难以理解组件的行为。 维护困难： 修改组件时，容易破坏父组件的逻辑，造成连锁反应。 类型推断能力下降： TypeScript 无法准确推断父组件接收数据的类型，影响类型检查的准确性。 因此，我们需要采取措施，确保 emit 的参数类型与父组件的事件处理函数相匹配。 defineEmits 的基本用法 在 <script setup> …

继续阅读“Vue 3的“：如何处理`emit`的参数类型？”

发布于

Vue 3的“：如何处理`props`与`emit`？

Vue 3 <script setup> 中 Props 与 Emit 的处理 大家好，今天我们深入探讨 Vue 3 中 <script setup> 语法糖下 props 和 emit 的处理方式。 <script setup> 极大地简化了组件的编写，但同时也引入了一些新的概念和处理方法。我们将详细讲解如何在 <script setup> 中定义和使用 props，以及如何触发自定义事件 (emit)，并探讨一些常见的使用场景和注意事项。 1. props 的定义与使用 在 <script setup> 中，props 的定义主要有两种方式：使用 defineProps 宏和使用 withDefaults 宏。 1.1 defineProps 宏 defineProps 是一个编译器宏，它会自动处理 props 的类型推断和运行时验证。 它只能在 <script setup> 中使用，无需显式导入。 1.1.1 基于类型的声明 这是最简洁的方式，直接使用 TypeScript 的类型注解来定义 props 的类 …

继续阅读“Vue 3的“：如何处理`props`与`emit`？”

发布于

Vue 3源码深度解析之：`emit`函数：它如何向父组件派发事件。

各位靓仔靓女们，晚上好！我是你们的老朋友，今天咱们来聊聊 Vue 3 里面一个相当重要的函数——emit，也就是事件派发。这玩意儿就像咱古代的烽火台，子组件这边有点啥事儿，赶紧点把火，让父组件那边知道。 咱们这次的讲座，目标就是要把 emit 这家伙扒个精光，看看它到底是怎么把事件从儿子辈儿传到老子辈儿的。 一、emit 是个啥？—— 认识事件派发 在 Vue 的世界里，父子组件之间的数据传递，除了 props 这种老老实实的方式之外，还有一种更灵活的，那就是事件。子组件可以通过 emit 来触发一个自定义事件，然后父组件监听这个事件，就可以拿到子组件传递过来的信息。 你可以把 emit 想象成一个邮递员，子组件把信（事件和数据）交给它，它负责把信送到父组件手里。 二、emit 的基本用法 —— 简单上手 先来个最简单的例子，让你对 emit 有个直观的认识。 // ChildComponent.vue <template> <button @click=”handleClick”>点我通知父组件</button> </template> …

继续阅读“Vue 3源码深度解析之：`emit`函数：它如何向父组件派发事件。”