js观察者模式是什么_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

js观察者模式是什么

2025-11-15

浏览次数：次

返回列表

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

js观察者模式是什么

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

观察者模式的核心概念

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

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

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

一个简单的J*aScript实现

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

TayCMS免费企业建站系统1.8 for PHP

由于精力有限，程序更新比较慢，请大家谅解，再次感谢支持taycms的朋友们，虽然比较慢，我们还是会一直更新下去的。谢谢您的关注。有什么建议可以到论坛提出，或者直接给我QQ留言。 2.0会有很多新功能，请关注官方论坛TayCMS 1.8 升级日志此版本修复了不少BUG1.更换图片切换JS ，不会再有错误提示2.增加资料下载模块3.更换默认模版，使程序功能和页面结构更清晰，方便参考制作模版4.修复留

0 查看详情 TayCMS免费企业建站系统1.8 for PHP

// 被观察者（主题）
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 收到了更新：数据已更新！