观察者模式用于处理对象间依赖关系，当被观察者状态变化时，所有观察者自动收到通知并更新；其核心角色包括维护观察者列表的被观察者和实现更新方法的观察者；JavaScript中可通过Subject和Observer构造函数实现添加、删除及通知观察者；典型应用有DOM事件监听、Vue/Redux状态管理及组件通信，是前端开发中实现松耦合与响应式机制的基础。
观察者模式是一种在JavaScript中广泛使用的编程模式，它用来处理对象间的依赖关系。当一个对象（称为“被观察者”或“主题”）的状态发生变化时，所有依赖于它的对象（称为“观察者”）都会自动收到通知并进行更新。
观察者模式的核心概念
这种模式主要包含两个角色：
- 被观察者（Subject）：维护一个观察者列表，提供添加、删除和通知观察者的接口。
- 观察者（Observer）：实现一个更新方法，当被观察者发生变化时，该方法会被调用。
这种方式实现了对象之间松耦合的通信机制——被观察者不需要知道观察者的具体逻辑，只需要在状态变化时通知它们即可。
一个简单的JavaScript实现
下面是一个用原生JavaScript实现观察者模式的例子：
TayCMS免费企业建站系统1.8 for PHP
下载
由于精力有限，程序更新比较慢，请大家谅解，再次感谢支持taycms的朋友们，虽然比较慢，我们还是会一直更新下去的。谢谢您的关注。有什么建议可以到论坛提出，或者直接给我QQ留言。 2.0会有很多新功能，请关注官方论坛TayCMS 1.8 升级日志此版本修复了不少BUG1.更换图片切换JS ， 不会再有错误提示2.增加资料下载模块3.更换默认模版，使程序功能和页面结构更清晰，方便参考制作模版4.修复留
// 被观察者（主题）
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 收到了更新：数据已更新！
观察者模式的应用场景
这个模式在前端开发中非常常见，例如：
- 事件监听：DOM事件系统本质上就是观察者模式。你给按钮绑定click事件，就是在“订阅”这个事件。
- 状态管理：像Vue或Redux这类框架/库内部大量使用观察者模式来响应数据变化。
- 组件通信：在复杂的前端应用中，组件之间通过发布-订阅方式通信，避免层层传递props。
基本上就这些。观察者模式不复杂，但非常实用，是理解现代前端框架工作原理的重要基础。
