- 事件模式作为行为模式中观察者模式中具体实现。
- 定义了一对多的依赖关系,当事件触发后,执行监听函数。
- 简单实现如下
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)
}
}
- 代码封装成类的实现
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)
}
}