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