JavaScript中观察者模式如何实现及其应用案例详解？

本文共计1357个文字，预计阅读时间需要6分钟。

本文实例讲解了JavaScript设计模式——观察者模式原理与用法。分享给广大开发者供参考，具体如下：

介绍：

观察者模式是一种设计模式，允许一个对象（观察者）在另一个对象（被观察者）的状态发生变化时接收通知。这种模式在JavaScript中非常常见，特别是在事件驱动编程中。

原理与用法：

1. 原理： - 观察者模式包含两个角色：观察者和被观察者。 - 被观察者维护一个观察者列表，当状态发生变化时，通知所有观察者。 - 观察者订阅被观察者的状态变化，并在状态变化时执行相应的操作。

2. 用法： - 使用`EventTarget`对象实现观察者模式。 - 创建一个被观察者对象，并使用`addEventListener`方法添加观察者。 - 当被观察者状态发生变化时，使用`dispatchEvent`方法通知观察者。

实例：

以下是一个使用观察者模式的简单示例：

javascript// 被观察者类class Subject { constructor() { this.observers=[]; }

// 添加观察者 addObserver(observer) { this.observers.push(observer); }

// 移除观察者 removeObserver(observer) { const index=this.observers.indexOf(observer); if (index !==-1) { this.observers.splice(index, 1); } }

// 通知观察者 notify() { this.observers.forEach(observer=> observer.update()); }}

// 观察者类class Observer { constructor(name) { this.name=name; }

// 更新方法 update() { console.log(`${this.name} received the notification.`); }}

// 实例化被观察者const subject=new Subject();

// 实例化观察者const observer1=new Observer('Observer 1');const observer2=new Observer('Observer 2');

// 添加观察者subject.addObserver(observer1);subject.addObserver(observer2);

// 修改被观察者状态subject.notify(); // 输出：Observer 1 received the notification., Observer 2 received the notification.

通过以上实例，我们可以看到观察者模式在JavaScript中的实现和应用。

本文实例讲述了javascript设计模式 – 观察者模式原理与用法。分享给大家供大家参考，具体如下：

介绍：前面我们针对系统内一对多，多对多的情况做了解决方案，是使用中介者模式，将所有关联关系交由中介者处理。这一节我们介绍另外一种解决一对多问题的设计模式：观察者模式
观察者模式是使用频率最高的设计模式之一，用于建立一种对象与对象之间的依赖关系。

定义：定义对象之间的之间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。观察者模式的别名包括发布-订阅模式，模型-视图模式，监听模式或从属模式。观察者模式是一种对象行为型模式。

场景：我们使用观察者模式做一个进制转换的小demo

示例：

var Subject = function(){ var obServer = []; var _state; this.getState = function(){ return _state; } this.setState = function(state){ _state = state; this.notifyAllObservers(); } this.attach = function(ob){ obServer.push(ob); } this.notifyAllObservers = function(){ obServer.map(function(item){ item.update(); }); } } var BinaryObserver = function(subject){ var _subject = subject; _subject.attach(this); this.update = function(){ console.log('Binary String:' + _subject.getState().toString(2)); } } var OctalObserver = function(subject){ var _subject = subject; _subject.attach(this); this.update = function(){ console.log('Octal String:' + _subject.getState().toString(8)); } } var HexaObserver = function(subject){ var _subject = subject; _subject.attach(this); this.update = function(){ console.log('Hex String:' + _subject.getState().toString(16)); } } var subject = new Subject(); new HexaObserver(subject); new OctalObserver(subject); new BinaryObserver(subject); subject.setState(15); // Hex String:f // Octal String:17 // Binary String:1111

在这个例子里面Subject称为目标，它是被观察的对象，一个目标允许被多个观察者观察，这些观察者存放于obServer的数组中，当目标发生change时通知所有观察者。
BinaryObserver，OctalObserver，HexaObserver这三个类称为观察者，观察者将对目标的改变作出反应。在观察者中需要维护一个指向目标对象的引用。

观察者模式总结：

优点：
* 观察者模式可以实现表示层和数据逻辑层的分离，定义了稳定的消息更新传递机制。
* 观察者模式在观察目标和观察者者之间建立一个抽象的耦合。观察目标只需要维持一个抽象观察者的集合，无需了解其具体观察者。
* 观察者模式支持广播通信，观察目标会向所有已注册的观察者发送通知，简化了一对多系统的设计难度

缺点：
* 在存在大量观察者时，对所有观察者的通知会花大量时间
* 如果观察者和目标之间存在循环依赖，将会导致系统崩溃

适用场景：
* 系统中存在一个对象的改变将导致一个或多个其他对象也发生改变。
* 系统中存在大量依赖链，A影响B，B影响C，C影响D

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。