【設計模式】觀察者模式

觀察者模式

實現原理

至關於報紙訂閱者向報社訂閱報紙，報社要知足訂閱者的不一樣需求，不一樣訂閱者訂閱相同的報紙，報社須要將該報紙賣多份。

class FEEvents {
    eventsMap = {}

    on(eventName, eventfn) {
        var _ref;
        let stack = (_ref = this.eventsMap[eventName]) != null ? _ref : this.eventsMap[eventName] = [];
        stack.push(eventfn);
        return this.eventsMap[eventName] = stack;
    }

    emit(eventName, data) {
        var _ref;
        var stack = (_ref = this.eventsMap[eventName]) != null ? _ref : this.eventsMap[eventName] = [];
        for (var _i = 0, _len = stack.length; _i < _len; _i++) {
            var fn = stack[_i];
            if (!fn) return false
            fn(data)
        }
    }

    off(eventName) {
        return (this.eventsMap[eventName]) != null ? this.eventsMap[eventName].length = 0 : void 0;
    }

    one(eventName, eventfn) {

        this.off(eventName)
        this.on(eventName, eventfn)
    }
}

let eventObj = new FEEvents()
eventObj.on('call', function (data) {
    console.log('my name is:', data)
})

eventObj.on('call', function (data) {
    console.log('my age is:', data)
})

eventObj.emit('call', 'no data')

eventObj.one('oneEvent', function () {
    console.log('one event 1....')
})

eventObj.one('oneEvent', function () {
    console.log('one event 2....')
})

eventObj.emit('oneEvent')

應用場景

Vue 中的 emit/on bus 模式, 跨組件通訊。

Websocket 消息事件的訂閱與發佈。

參考資料：

觀察者模式