J*aScript观察者模式_j*ascript事件系统_技术学堂

JaScript观察者模式_jascript事件系统

发布时间：2025-12-03 19:35

发布者：网络

浏览次数：

观察者模式是前端事件驱动编程的核心，它通过被观察者在状态变化时通知观察者实现松耦合通信；J*aScript的DOM事件、自定义事件及事件循环机制均基于此模式实现异步回调与跨组件通信。

javascript观察者模式_javascript事件系统

观察者模式是前端开发中非常核心的设计模式之一，J*aScript 的事件系统正是基于这种模式实现的。它让对象之间可以松耦合地通信：一个对象（被观察者）在状态改变时通知所有依赖它的对象（观察者），而无需知道这些观察者是谁。

观察者模式的基本结构

观察者模式包含两个主要角色：

被观察者（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 元素作为被观察者，事件监听函数就是观察者。

通过 addEventListener 添加监听，相当于注册观察者；事件触发时，浏览器自动调用回调函数，完成通知过程。

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
  console.log('Button was clicked!');
});

// 点击按钮后，回调函数被调用 —— 观察者收到通知

这种设计让 UI 行为与逻辑解耦，开发者无需轮询按钮状态，只需“订阅”感兴趣的事件即可。

自定义事件实现跨组件通信

除了 DOM 事件，J*aScript 还支持创建自定义事件，用于模块或组件间的通信。

Remover

几秒钟去除图中不需要的元素

304 查看详情 Remover

利用 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。

事件循环与异步通知

J*aScript 的事件系统还与事件循环紧密结合。用户交互、定时器、网络请求等都会生成事件，推入任务队列，由事件循环在适当时机执行回调。

例如：

setTimeout(() => {
  console.log('Timeout callback executed');
}, 0);

console.log('Sync code runs first');

尽管延时为 0，回调仍会在当前执行栈清空后才被调用，体现了观察者模式在异步环境下的延迟通知特性。

基本上就这些。理解观察者模式有助于掌握事件驱动编程的本质，无论是处理用户交互、实现状态管理，还是构建响应式系统，都是基础能力。

以上就是J*aScript观察者模式_j*ascript事件系统的详细内容，更多请关注其它相关文章！

# javascript # java # 前端 # 浏览器 # 回调函数 # 前端开发 # 栈 # ai # 回调 # 自定义 # 用户发送 # 都是 # 是一个 # 不需要 # 只需 # 会在 # 感兴趣 # 相关文章 # 登封手机网站建设 # 武汉网站推广竞价方案 # WHAM五号网站建设 # 铝业网站seo优化服务 # 毒物营销推广措施分析 # 济宁网站建设 # 支付系统平台网站建设 # 鹤壁网站建设服务 # 温州专业网站建设 # 河南关键词排名哪家靠谱