javascript闭包怎样实现观察者模式

subscribe

unsubscribe

notify

observers

subscribe

unsubscribe

function createEventBus() {
    let _subscribers = []; // 这是一个私有变量，通过闭包保持持久性

    return {
        /**
         * 订阅事件
         * @param {Function} callback - 观察者回调函数
         * @returns {Function} - 返回一个取消订阅的函数，方便链式调用或直接取消
         */
        subscribe: function(callback) {
            if (typeof callback !== 'function') {
                console.warn('订阅者必须是一个函数！');
                return;
            }
            _subscribers.push(callback);
            console.log('有新的订阅者加入！当前订阅数:', _subscribers.length);

            // 返回一个取消订阅的函数，这是个很实用的模式
            // 注意：这里的 `this` 指向返回的对象，确保 unsubscribe 正确调用
            return () => {
                this.unsubscribe(callback);
            };
        },

        /**
         * 取消订阅
         * @param {Function} callback - 要移除的观察者回调函数
         */
        unsubscribe: function(callback) {
            _subscribers = _subscribers.filter(sub => sub !== callback);
            console.log('有订阅者离开了。当前订阅数:', _subscribers.length);
        },

        /**
         * 通知所有订阅者
         * @param {*} data - 要传递给观察者的数据
         */
        notify: function(data) {
            console.log('开始通知所有订阅者...');
            _subscribers.forEach(callback => {
                try {
                    callback(data);
                } catch (error) {
                    // 实际项目中这里可能需要更复杂的错误处理，比如记录日志
                    console.error('通知某个订阅者时出错:', error);
                }
            });
            console.log('通知完成。');
        }
    };
}

// 使用示例：
const myEventBus = createEventBus();

// 观察者1
const observer1 = (message) => {
    console.log('观察者1 收到消息:', message);
};

// 观察者2
const observer2 = (message) => {
    console.log('观察者2 收到消息:', message.toUpperCase());
};

// 订阅
const unsubscribe1 = myEventBus.subscribe(observer1);
myEventBus.subscribe(observer2);
myEventBus.subscribe((data) => { // 匿名函数也可以
    console.log('匿名观察者收到:', data.length, '个字符');
});

console.log('\n--- 第一次通知 ---');
myEventBus.notify('Hello World');

// 取消订阅一个观察者
unsubscribe1(); // 或者 myEventBus.unsubscribe(observer1);

console.log('\n--- 第二次通知 ---');
myEventBus.notify('Goodbye');

// 尝试订阅一个非函数
myEventBus.subscribe('not a function');

_subscribers

createEventBus

createEventBus()

_subscribers

myEventBus

subscribe

unsubscribe

notify

_subscribers

createEventBus