再谈观察者模式的具体应用，如监听一个class其中一个属性，如websocket中onmessage的实现

本文主要是介绍再谈观察者模式的具体应用，如监听一个class其中一个属性，如websocket中onmessage的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

再谈观察者模式的具体应用，如监听一个class其中一个属性，如websocket中onmessage的实现

概述

在JavaScript中，观察者模式是一种设计模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象，当主题对象状态发生变化时，所有依赖于它的观察者都会得到通知并被自动更新。

观察者模式通常包含以下几个角色：

1. Subject（主题）：维护一系列的观察者，提供注册和删除观察者的方法，并在状态发生改变时通知所有注册的观察者。

2. Observer（观察者）：定义一个更新接口，使得在接收到主题通知时能够执行相应的操作。

下面是一个简单的JavaScript观察者模式的实现示例：

javascript
Copy code
// 主题对象
class Subject {constructor() {this.observers = []; // 存储观察者}// 注册观察者addObserver(observer) {this.observers.push(observer);}// 移除观察者removeObserver(observer) {this.observers = this.observers.filter(obs => obs !== observer);}// 通知所有观察者notify() {this.observers.forEach(observer => observer.update());}
}// 观察者对象
class Observer {constructor(name) {this.name = name;}// 更新方法update() {console.log(`${this.name} 收到更新通知`);}
}// 使用观察者模式
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 收到更新通知
// Observer 2 收到更新通知

在这个例子中，Subject是主题对象，负责维护观察者列表，并提供注册、移除和通知观察者的方法。Observer是观察者对象，实现了一个更新方法，用于在接收到通知时执行相应的操作。

通过这种模式，你可以轻松地添加或移除观察者，而且主题状态发生改变时，所有观察者都会得到通知。这在实现一些事件驱动的系统或 UI 组件中是非常常见的。

应用1

1. 需求：
   定义一个class，class里面有一个成员state，通过onchange监听到state的变化
2. 实现：
   可以使用 getter 和 setter 方法来实现对 state 成员的监听。通过在 setter 方法中触发一个自定义事件，然后让外部通过 onchange 事件来监听状态的变化。

class StatefulClass {constructor() {this._state = null; // 使用下划线表示这是一个私有属性this._changeListeners = []; // 存储监听器的数组}// 定义 state 的 getter 方法get state() {return this._state;}// 定义 state 的 setter 方法set state(newState) {if (this._state !== newState) {this._state = newState;this.notifyChange(); // 当 state 变化时触发通知}}// 添加监听器onchange(callback) {this._changeListeners.push(callback);}// 通知所有监听器状态变化notifyChange() {this._changeListeners.forEach(callback => {callback(this._state);});}
}// 使用示例
const myInstance = new StatefulClass();// 添加监听器
myInstance.onchange((newState) => {console.log('State changed:', newState);
});// 修改 state，会触发监听器
myInstance.state = 'New State'; // 输出: State changed: New State

在这个示例中，StatefulClass 类有一个私有的 _state 属性和一个存储监听器的数组 _changeListeners。onchange 方法用于添加监听器，notifyChange 方法用于通知所有监听器。当 state 发生变化时，setter 方法会触发 notifyChange 方法，通知所有监听器。

应用2

应用1中的onchange是一个函数，可是我们看到websocket中使用的时候是一个这种形式onmessage = (e) => { }，这种ws.onmessage=(e)=>{}这种赋值语句是怎么实现的监听呢？

在 JavaScript 中，onmessage 和类似的属性赋值语法实际上是使用属性存取器（Property Accessors）来实现的。这种语法允许你为一个对象的属性定义 getter 和 setter 方法。当你访问或设置这个属性时，相应的 getter 或 setter 将被调用。

在 WebSocket 中，onmessage 是一个属性，但它的赋值语法隐藏了底层的 getter 和 setter。这样的属性通常是事件属性，它允许你注册或移除事件处理函数。

以下是一个简化的示例，演示了如何在对象中使用属性存取器：

class Example {constructor() {this._messageHandler = null; // 私有属性}// 定义 onmessage 的 getter 方法get onmessage() {return this._messageHandler;}// 定义 onmessage 的 setter 方法set onmessage(handler) {this._messageHandler = handler;}
}// 使用示例
const myExample = new Example();// 设置 onmessage 处理函数
myExample.onmessage = (e) => {console.log('Message received:', e.data);
};// 获取 onmessage 处理函数
const messageHandler = myExample.onmessage;// 调用处理函数
if (messageHandler) {messageHandler({ data: 'Example message' });
}

在这个示例中，Example 类有一个私有的 _messageHandler 属性，通过定义 onmessage 的 getter 和 setter 方法，你可以像使用普通属性一样使用 onmessage。当你设置 onmessage 时，实际上调用了 setter 方法，当你获取 onmessage 时，实际上调用了 getter 方法。在 WebSocket 中，这种语法的目的是提供一种简洁的方式来处理事件。

这篇关于再谈观察者模式的具体应用，如监听一个class其中一个属性，如websocket中onmessage的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---