news 2026/3/12 12:16:25

jessibuca入门2:Emitter类

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jessibuca入门2:Emitter类

这是一个自定义的事件发射器(Event Emitter)类,实现了 发布-订阅(Publish-Subscribe)模式 。它的主要作用是解耦各个模块(如播放器核心、UI、解码器),让它们通过事件进行通信,而不需要相互引用。

### 文件功能说明
该文件定义了一个 Emitter 类,包含以下核心方法:

1. constructor (构造函数)

- 初始化 this.events 用于存储事件。
- 使用 Object.create(null) 创建一个 无原型的纯净对象 ,避免了与 Object.prototype 上的属性(如 toString )发生命名冲突,提高了安全性。
2. on(name, fn, ctx) - 订阅事件

- 注册一个事件监听器。
- 参数 : name (事件名), fn (回调函数), ctx (上下文/this指向)。
- 特点 :包含类型检查,确保 fn 是函数;支持链式调用。
3. once(name, fn, ctx) - 订阅一次性事件

- 注册一个只执行一次的监听器。
- 实现 :包装原始回调,在执行前先调用 off 移除自己。
4. emit(name, ...args) - 发布/触发事件

- 触发指定名称的事件,并传递参数给所有订阅者。
- 关键特性(异步) :当前代码中使用了 Promise.resolve().then(...) 。这意味着事件回调是 异步执行 的(微任务)。
- 优点 :防止某个耗时的监听器阻塞当前的主线程执行流,提高页面响应性。
- 注意 : emit 调用后,回调不会立即执行,而是会在当前同步代码执行完毕后才执行。
5. off(name, callback) - 取消订阅

- 移除事件监听器。
- 灵活性 :
- 不传参数:清空所有事件。
- 只传 name :移除该事件名下的所有监听器。
- 传 name 和 callback :移除特定的监听器(支持识别 once 包装过的函数)。
### 代码特点与潜在风险
这个实现相比原始版本做了很多优化(如参数检查、数组浅拷贝防止遍历时修改队列),但有一个显著特点需要注意:

- 异步微任务执行 :
代码中显式使用了 Promise.resolve().then 。这在处理 UI 通知或非关键逻辑时很好,但在某些需要 同步反馈 的场景下可能会导致问题。
- 例如 :如果你在 emit('changeData') 后立即读取数据,可能数据还没被监听器修改。

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

Z-Image-Turbo落地实践:结合CRM系统实现个性化推荐

Z-Image-Turbo落地实践:结合CRM系统实现个性化推荐 1. Z-Image-Turbo_UI界面概述 Z-Image-Turbo 是一款基于深度学习的图像生成模型,具备高效、高质量的图像生成能力。其配套的 Gradio UI 界面为非技术用户和开发人员提供了直观的操作入口,…

作者头像 李华
网站建设 2026/3/10 7:32:29

Wan2.2-I2V-A14B团队协作:云端共享环境,多人协作不冲突

Wan2.2-I2V-A14B团队协作:云端共享环境,多人协作不冲突 你是否遇到过这样的问题:内容创作团队里,有人想用AI生成视频,有人要修图、调参、写提示词,结果本地电脑跑不动模型,文件传来传去版本混乱…

作者头像 李华
网站建设 2026/3/12 6:29:19

没机器学习经验能玩手势识别吗?云端0基础教程

没机器学习经验能玩手势识别吗?云端0基础教程 你是不是也和我当初一样:作为一名交互设计师,总想在作品集中加点“科技感”十足的项目,比如用手势控制界面、做一套无接触交互原型。但一看到“AI”“机器学习”“神经网络”这些词就…

作者头像 李华
网站建设 2026/3/9 8:01:03

ACE-Step应用场景:元宇宙虚拟空间背景音景动态生成

ACE-Step应用场景:元宇宙虚拟空间背景音景动态生成 1. 技术背景与问题提出 随着元宇宙概念的持续演进,虚拟空间的沉浸感构建已成为关键挑战之一。在游戏、社交平台、数字孪生等场景中,静态或预设的背景音乐已难以满足用户对个性化、情境化音…

作者头像 李华
网站建设 2026/3/7 22:54:09

本地部署Qwen-Image-Layered全过程,附依赖安装技巧

本地部署Qwen-Image-Layered全过程,附依赖安装技巧 1. 引言:为何选择 Qwen-Image-Layered? 随着图像编辑自动化需求的不断增长,传统基于图层的手动设计流程已难以满足高效创作的需求。Qwen-Image-Layered 是由通义实验室推出的开…

作者头像 李华
网站建设 2026/3/11 20:43:31

FSMN-VAD使用全记录:从安装到运行少走弯路

FSMN-VAD使用全记录:从安装到运行少走弯路 1. 引言 语音端点检测(Voice Activity Detection, VAD)是语音信号处理中的基础环节,其核心任务是从连续音频流中准确识别出有效语音片段的起止时间,自动剔除静音或噪声段。…

作者头像 李华