观察者模式通过主题与观察者解耦实现状态自动通知，JavaScript中可用于事件处理与数据绑定。
观察者模式是一种设计模式，用于在对象之间定义一对多的依赖关系，当一个对象的状态发生变化时，所有依赖它的对象都会自动收到通知。在JavaScript中，这种模式常用于事件处理、数据绑定等场景。下面是一个简洁而实用的观察者模式实现。
核心概念说明
观察者模式包含两个主要角色：
主题（Subject）：维护一组观察者，提供添加、删除和通知观察者的方法。 观察者（Observer）：订阅主题，一旦主题状态变化，就会收到通知并作出响应。
基本实现代码
以下是一个基于类的JavaScript实现：
class Subject { constructor() { this.observers = []; } // 添加观察者 addObserver(observer) { if (typeof observer.update === 'function') { this.observers.push(observer); } } // 移除观察者 removeObserver(observer) { this.observers = this.observers.filter(obs => obs !== observer); } // 通知所有观察者 notify(data) { this.observers.forEach(observer => observer.update(data)); }}// 观察者类（可选，只是一个有update方法的对象）class Observer { constructor(name) { this.name = name; } update(data) { console.log(`${this.name} received:`, data); }}
使用示例
下面是具体的调用方式：
立即学习“Java免费学习笔记（深入）”；
// 创建主题const subject = new Subject();// 创建观察者const observer1 = new Observer('Observer 1');const observer2 = new Observer('Observer 2');// 注册观察者subject.addObserver(observer1);subject.addObserver(observer2);// 发布通知subject.notify('Hello from the subject!');// 可以动态移除subject.removeObserver(observer1);subject.notify('Second message');
输出结果为：
Observer 1 received: Hello from the subject! Observer 2 received: Hello from the subject! Observer 2 received: Second message
实际应用场景
这个模式非常适合用在以下情况：
组件间通信（如前端组件状态同步） 事件总线或自定义事件系统 数据模型变更通知视图更新（类似MVVM）
你可以将Subject扩展为EventEmitter的基础结构，支持不同事件类型、命名事件、once方法等。
基本上就这些。不复杂但很实用。
以上就是JavaScript观察者模式实现的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531783.html
微信扫一扫 
支付宝扫一扫 
