正邦做网站吗,wordpress 页面满屏,网友让你建网站做商城,滨州做网站的科技公司再谈观察者模式的具体应用#xff0c;如监听一个class其中一个属性#xff0c;如websocket中onmessage的实现
概述
在JavaScript中#xff0c;观察者模式是一种设计模式#xff0c;它定义了一种一对多的依赖关系#xff0c;让多个观察者对象同时监听某一个主题对象…再谈观察者模式的具体应用如监听一个class其中一个属性如websocket中onmessage的实现
概述
在JavaScript中观察者模式是一种设计模式它定义了一种一对多的依赖关系让多个观察者对象同时监听某一个主题对象当主题对象状态发生变化时所有依赖于它的观察者都会得到通知并被自动更新。
观察者模式通常包含以下几个角色 Subject主题维护一系列的观察者提供注册和删除观察者的方法并在状态发生改变时通知所有注册的观察者。 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
需求 定义一个classclass里面有一个成员state通过onchange监听到state的变化实现 可以使用 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 中这种语法的目的是提供一种简洁的方式来处理事件。
