再谈观察者模式的具体应用,如监听一个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 中,这种语法的目的是提供一种简洁的方式来处理事件。

你可能感兴趣的:(javascrip基础知识,观察者模式,websocket,网络协议)