《JavaScript设计模式与开发实践》——学习笔记（观察者模式）

定义

观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。——《JavaScript设计模式与开发实践》

适用场景

1、异步编程。

2、mvvm的数据双向绑定。

3、模块间通讯。

实现示例

// 实现一个事件中心
class EventCentre {
    constructor () {
        this._cache = {};
    }
    on(eventName = '', fn = () => {}) {
        const cache = this._cache;
        cache[eventName] ? cache[eventName].push(fn) : (cache[eventName] = [fn]);
    }
    emit(eventName = '') {
        const fnList = this._cache[eventName];
        if (!fnList) {
            return;
        }
        fnList.forEach(fn => { fn(); });
    }
    off(eventName = '', fn) {
        const f = fn ? this._offOne : this._offAll;
        f.call(this, eventName, fn);
    }
    _offAll(eventName = '') {
        this._cache[eventName] = [];
    }
    _offOne(eventName = '', fn) {
        const fnList = this._cache[eventName];
        const index = fnList.findIndex(f => f === fn);
        fnList.splice(index, 1);
    }
    once(eventName = '', fn = () => {}) {
        this.on(eventName, () => {
            fn();
            this.off(eventName, fn);
        });
    }
}

// 测试示例
const TEST_EVENT = 'test';
const eventCentre = new EventCentre();

const func1 = () => {
    console.log('on 1!');
}

eventCentre.on(TEST_EVENT, func1);
eventCentre.on(TEST_EVENT, () => {
    console.log('on 2!');
});
eventCentre.on(TEST_EVENT, () => {
    console.log('on 3!');
});

eventCentre.once(TEST_EVENT, () => {
    console.log('once!');
});

// 测试once
console.log('------- test once -------');
eventCentre.emit(TEST_EVENT); 
eventCentre.emit(TEST_EVENT);

// 测试offOne
console.log('------- test off one -------');
eventCentre.off(TEST_EVENT, func1);
eventCentre.emit(TEST_EVENT);

// 测试offAll
console.log('------- test off all -------');
eventCentre.off(TEST_EVENT);
eventCentre.emit(TEST_EVENT);

运行结果如下