实现JavaScript观察者模式Event模块

214 阅读1分钟
  1. 事件模式作为行为模式中观察者模式中具体实现。
  2. 定义了一对多的依赖关系,当事件触发后,执行监听函数。
  3. 简单实现如下
const event = {
    events: Object.create(null),
    on: function(name, callback) {
        if (name in this.events) {
            this.events[name].push(callback)
        } else {
            this.events[name] = [callback]
        }
    },
    emit: function(name, ...rest) {
        if (name in this.events) {
            this.events[name].forEach(item => item(...rest))
        }
    },
    off: function(name, fnId) {
        if (name in this.events) {
            this.events[name] = this.events[name].filter(item => item !== fnId)
        }
    },
    once: function(name, fn) {
        const that = this
        const newFn = function(...rest) {
            fn(...rest)
            that.off(name, newFn)
        }
        this.on(name, newFn)
    }
}
  1. 代码封装成类的实现
class Event {
    constructor() {
        this.events = Object.create(null)
    }
    on(name, callback) {
        if (name in this.events) {
            this.events[name].push(callback)
        } else {
            this.events[name] = [callback]
        }
    }
    emit(name, ...rest) {
        if (name in this.events) {
            this.events[name].forEach(item => item(...rest))
        }
    }
    off(name, fnId) {
        if (name in this.events) {
            this.events[name] = this.events[name].filter(item => item !== fnId)
        }
    }
    once(name, fn) {
        const newFn = (...rest) => {
            fn(...rest)
            this.off(name, newFn)
        }
        this.on(name, newFn)
    }
}