EventDispatch实现

1. EventDispatch

EventDispatch即事件调度，实际上应用了订阅发布模式，有四个功能：

1. 添加订阅者：addEventListener(event, listener)
2. 删除订阅者：removeEventListener(event, listener)
3. 调用事件：dispatchEvent(event)
4. 查询对象是否订阅了事件：hasEventListener(event, listener)

2. 实现代码

talk is cheap, show me the code

class EventDispatcher {
	constructor() {
		this.listeners = {} // 事件订阅控制器
	}
	addEventListener(event, listener) {
		let listeners = this.listeners
		if (!listeners[event]) listeners[event] = [] // 建立事件订阅队列

		if (!listeners[event].includes(listener)) listeners[event].push(listener) // 向队列添加事件订阅者
	}
	removeEventListener(event, listener) {
		if (!this.listeners[event]) return
		let listenerQueue = this.listeners[event]

		let idx = listenerQueue.indexOf(listener)
		idx > -1 && listenerQueue.splice(idx, 1) // 移除事件订阅者
	}
	dispatchEvent(event) {
		if (!this.listeners[event]) return
		let listenerQueue = this.listeners[event]

		for (let listener of listenerQueue) listener() // 通知事件的每一个订阅者
	}
	hasEventListener(event, listener) {
		let listeners = this.listeners

		return listeners[event] && listeners[event].includes(listener)
	}
}

// test
let eventDispatcher = new EventDispatcher()
let cb1 = () => console.log(1)
let cb2 = () => console.log(2)
eventDispatcher.addEventListener('event1', cb1)
eventDispatcher.addEventListener('event1', cb2)

eventDispatcher.events // { event1: [ cb1, cb2 ] }
eventDispatcher.dispatchEvent('event1') // 1 2
eventDispatcher.removeEventListener('event1', cb1)
eventDispatcher.hasEventListener('event1', cb1) // false
eventDispatcher.dispatchEvent('event1') // 2

参考

three/core/EventDispatcher.js (opens new window)