JS如何实现观察者模式

class Subject {
    constructor() {
        this.observers = []; // 存储所有观察者
    }

    /**
     * 添加一个观察者
     * @param {Function} observer - 观察者函数或对象，通常是一个回调函数
     */
    addObserver(observer) {
        if (typeof observer === 'function' && !this.observers.includes(observer)) {
            this.observers.push(observer);
        } else {
            // 我个人觉得，这里加个简单的错误提示或者日志会更好，
            // 毕竟有时候传入的可能不是函数，或者重复添加了
            console.warn('Observer must be a unique function.');
        }
    }

    /**
     * 移除一个观察者
     * @param {Function} observer - 要移除的观察者
     */
    removeObserver(observer) {
        this.observers = this.observers.filter(obs => obs !== observer);
    }

    /**
     * 通知所有观察者状态已更新
     * @param {*} data - 传递给观察者的数据
     */
    notify(data) {
        // 有时候我会考虑是否要异步通知，避免一个耗时观察者阻塞其他，
        // 但对于多数前端场景，同步通知也挺常见。
        this.observers.forEach(observer => {
            try {
                observer(data);
            } catch (error) {
                // 这里捕获一下观察者执行时的错误，避免一个观察者出错导致整个通知链中断
                console.error('Error notifying observer:', error);
            }
        });
    }
}

// 示例用法：
const mySubject = new Subject();

// 定义一些观察者
const observerA = (data) => {
    console.log('观察者A收到通知:', data);
};

const observerB = (data) => {
    console.log('观察者B收到通知，数据是:', data);
};

const observerC = (data) => {
    console.log('观察者C处理数据:', JSON.stringify(data));
};

// 注册观察者
mySubject.addObserver(observerA);
mySubject.addObserver(observerB);
mySubject.addObserver(observerC);

console.log('--- 第一次状态变化 ---');
mySubject.notify({ message: 'Hello from Subject!', timestamp: Date.now() });

// 移除一个观察者
mySubject.removeObserver(observerB);

console.log('--- 第二次状态变化（B已移除）---');
mySubject.notify('新的消息');

// 尝试添加一个非函数或重复的
mySubject.addObserver({}); // 会有警告
mySubject.addObserver(observerA); // 不会重复添加

notify

addEventListener

componentWillUnmount

useEffect

removeObserver

setTimeout

requestAnimationFrame

Promise.resolve().then(...)

try-catch

notify