js观察者模式是什么-js教程-PHP中文网

js观察者模式是什么

尊渡假赌尊渡假赌尊渡假赌

发布： 2025-11-15 18:17:02

原创

931人浏览过

观察者模式用于处理对象间依赖关系，当被观察者状态变化时，所有观察者自动收到通知并更新；其核心角色包括维护观察者列表的被观察者和实现更新方法的观察者；JavaScript中可通过Subject和Observer构造函数实现添加、删除及通知观察者；典型应用有DOM事件监听、Vue/Redux状态管理及组件通信，是前端开发中实现松耦合与响应式机制的基础。

js观察者模式是什么

观察者模式是一种在JavaScript中广泛使用的编程模式，它用来处理对象间的依赖关系。当一个对象（称为“被观察者”或“主题”）的状态发生变化时，所有依赖于它的对象（称为“观察者”）都会自动收到通知并进行更新。

观察者模式的核心概念

这种模式主要包含两个角色：

被观察者（Subject）：维护一个观察者列表，提供添加、删除和通知观察者的接口。
观察者（Observer）：实现一个更新方法，当被观察者发生变化时，该方法会被调用。

这种方式实现了对象之间松耦合的通信机制——被观察者不需要知道观察者的具体逻辑，只需要在状态变化时通知它们即可。

一个简单的JavaScript实现

下面是一个用原生JavaScript实现观察者模式的例子：

千帆大模型平台

面向企业开发者的一站式大模型开发及服务运行平台

查看详情

// 被观察者（主题）
function Subject() {
  this.observers = []; // 存储观察者
}

Subject.prototype.addObserver = function(observer) {
  this.observers.push(observer);
};

Subject.prototype.removeObserver = function(observer) {
  this.observers = this.observers.filter(obs => obs !== observer);
};

Subject.prototype.notify = function(data) {
  this.observers.forEach(observer => observer.update(data));
};

// 观察者
function Observer(name) {
  this.name = name;
}

Observer.prototype.update = function(data) {
  console.log(`${this.name} 收到了更新：`, data);
};

// 使用示例
const subject = new Subject();
const observer1 = new Observer("观察者A");
const observer2 = new Observer("观察者B");

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notify("数据已更新！"); 
// 输出：
// 观察者A 收到了更新：数据已更新！
// 观察者B 收到了更新：数据已更新！

登录后复制