观察者模式是前端事件驱动编程的核心，它通过被观察者在状态变化时通知观察者实现松耦合通信；JavaScript的DOM事件、自定义事件及事件循环机制均基于此模式实现异步回调与跨组件通信。
观察者模式是前端开发中非常核心的设计模式之一，JavaScript 的事件系统正是基于这种模式实现的。它让对象之间可以松耦合地通信：一个对象（被观察者）在状态改变时通知所有依赖它的对象（观察者），而无需知道这些观察者是谁。
观察者模式的基本结构
观察者模式包含两个主要角色：
被观察者（Subject）：维护一个观察者列表，提供添加、删除和通知观察者的方法。 观察者（Observer）：实现一个更新方法，当被观察者触发通知时被调用。
下面是一个简单的手动实现：
class Subject { constructor() { this.observers = []; } addObserver(observer) { this.observers.push(observer); } removeObserver(observer) { this.observers = this.observers.filter(obs => obs !== observer); } notify(data) { this.observers.forEach(observer => observer.update(data)); }}class Observer { constructor(name) { this.name = name; } update(data) { console.log(`${this.name} received:`, data); }}// 使用示例const subject = new Subject();const obs1 = new Observer('Observer 1');const obs2 = new Observer('Observer 2');subject.addObserver(obs1);subject.addObserver(obs2);subject.notify('Hello from subject!');
DOM 事件系统：浏览器中的观察者模式
浏览器的事件机制是观察者模式的典型应用。DOM 元素作为被观察者，事件监听函数就是观察者。
立即学习“Java免费学习笔记（深入）”；
通过 addEventListener 添加监听，相当于注册观察者；事件触发时，浏览器自动调用回调函数，完成通知过程。
const button = document.getElementById('myButton');button.addEventListener('click', function() { console.log('Button was clicked!');});// 点击按钮后，回调函数被调用 —— 观察者收到通知
这种设计让 UI 行为与逻辑解耦，开发者无需轮询按钮状态，只需“订阅”感兴趣的事件即可。
自定义事件实现跨组件通信
除了 DOM 事件，JavaScript 还支持创建自定义事件，用于模块或组件间的通信。
利用 EventTarget 或 CustomEvent 可以轻松构建发布-订阅系统。
// 创建一个可绑定事件的对象const eventBus = new EventTarget();// 监听自定义事件eventBus.addEventListener('dataReady', (e) => { console.log('Data received:', e.detail);});// 分发事件const event = new CustomEvent('dataReady', { detail: 'Some data' });eventBus.dispatch(event);
这种方式在复杂应用中常用于非父子组件通信，避免层层传递 props。
事件循环与异步通知
JavaScript 的事件系统还与事件循环紧密结合。用户交互、定时器、网络请求等都会生成事件，推入任务队列，由事件循环在适当时机执行回调。
例如：
setTimeout(() => { console.log('Timeout callback executed');}, 0);console.log('Sync code runs first');
尽管延时为 0，回调仍会在当前执行栈清空后才被调用，体现了观察者模式在异步环境下的延迟通知特性。
基本上就这些。理解观察者模式有助于掌握事件驱动编程的本质，无论是处理用户交互、实现状态管理，还是构建响应式系统，都是基础能力。
以上就是JavaScript观察者模式_javascript事件系统的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540469.html
微信扫一扫 
支付宝扫一扫 
