JavaScript响应式编程与观察者模式-js教程-PHP中文网

JavaScript响应式编程与观察者模式

betcha

发布： 2025-10-24 10:18:02

原创

903人浏览过

观察者模式通过一对多依赖实现自动通知，JavaScript中可手动实现或借助RxJS等工具进行响应式编程，广泛应用于Vue、Angular等框架中，适用于表单校验、状态同步、实时数据展示等场景，提升代码可维护性与响应能力。

javascript响应式编程与观察者模式

响应式编程和观察者模式在JavaScript中密切相关，尤其在处理异步数据流和状态变化时非常实用。它们的核心思想是：当某个数据源发生变化时，依赖该数据的其他部分能自动得到通知并作出响应。

观察者模式的基本原理

观察者模式是一种行为设计模式，定义了一种一对多的依赖关系。一个主体（被观察者）维护一系列观察者，当主体状态改变时，会自动通知所有观察者，触发它们的更新方法。

在JavaScript中，可以手动实现一个简单的观察者模式：

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 {
  update(data) {
    console.log('收到更新:', data);
  }
}

// 使用示例
const subject = new Subject();
const observerA = new Observer();
const observerB = new Observer();

subject.addObserver(observerA);
subject.addObserver(observerB);

subject.notify('数据已更新'); // 两个观察者都会收到消息

登录后复制

响应式编程与Observable

响应式编程是一种基于数据流和变化传播的编程范式。JavaScript中的RxJS库是实现响应式编程的典型工具，其核心是Observable（可观察对象）。

立即学习“Java免费学习笔记（深入）”；

Observable可以看作是观察者模式的增强版，支持异步数据流、事件流的组合与转换。

豆包AI编程

豆包推出的AI编程助手

483

查看详情

import { Observable } from 'rxjs';

const dataStream = new Observable(subscriber => {
  subscriber.next('第一条数据');
  setTimeout(() => subscriber.next('延迟数据'), 1000);
  setTimeout(() => subscriber.complete(), 2000);
});

dataStream.subscribe({
  next: value => console.log(value),
  complete: () => console.log('流已完成')
});

登录后复制

上面的例子创建了一个随时间推移发送数据的流，订阅者会依次接收到通知，体现了典型的观察者机制。