前言
学习目标
- 创建事件分发器
- 掌握事件分发器的运行原理
知识点
- 监听者模式
前情回顾
之前我们说过图案编辑器的整体架构，接下来我们会从最底层的EventDispatcher 对象开始写起。
EventDispatcher 对象是事件分发器，其设计模式属于观察者模式，因此我们接下来先简单说一下观察者模式。
1-观察者模式
观察者模式包含观察目标和观察者两类对象。
一个目标可以有多个与其相依赖的观察者。
一旦观察目标的某个状态发生改变，那么所有与此状态相关的观察者都会得到通知。
通过上面的描述，我们可以知道观察者模式的优点，那就是降低两个对象的耦合度，当一个对象的状发生改变时，可以直接通知另一个对象。
我们要创建的事件分发器便是让目标对象快速分发事件的工具。
2-代码实现
整体代码如下：
- /src/lmm/core/EventDispatcher.ts
/* 事件对象的类型 */
export type CustomEvent = {
type: string
target?: any
[attachment: string]: any
}
/* 事件监听器的类型 */
export type EventListener = (event: CustomEvent) => void
/* 事件调度器 */
export class EventDispatcher {
// 监听器集合
_listeners = {}
/* 监听事件 */
addEventListener(type: string, listener: EventListener) {
const listeners = this._listeners
if (listeners[type] === undefined) {
listeners[type] = []
}
if (listeners[type].indexOf(listener) === -1) {
listeners[type].push(listener)
}
}
/* 判断目标对象的某个状态是否被某个监听器监听 */
hasEventListener(type: string, listener: EventListener) {
const listeners = this._listeners
return (
listeners[type] !== undefined && listeners[type].indexOf(listener) !== -1
)
}
/* 取消事件监听 */
removeEventListener(type: string, listener: EventListener) {
const listeners = this._listeners
const listenerArray = listeners[type]
if (listenerArray !== undefined) {
const index = listenerArray.indexOf(listener)
if (index !== -1) {
listenerArray.splice(index, 1)
}
}
}
/* 触发事件 */
dispatchEvent(event: CustomEvent) {
const listeners = this._listeners
const listenerArray = listeners[event.type]
if (listenerArray !== undefined) {
event.target = this
// 复制一份侦听器集合，以防在迭代时删除侦听器。
const array = [...listenerArray]
for (let i = 0, l = array.length; i < l; i++) {
array[i].call(this, event)
}
event.target = null
}
}
}
先解释一下上面的两个ts 类型。
-
CustomEvent 自定义事件的类型。
- type 是目标对象的状态，目标对象还在相应状态发生改变的时候通知监听此状态的观察者。
- target 是目标对象，在定义CustomEvent 对象的时候，target不需要写，EventDispatcher对象会在dispatchEvent 方法里自动为此对象赋值。
- [attachment: string] 表示我们可以为CustomEvent 自定义属性。
export type CustomEvent = {
type: string
target?: any
[attachment: string]: any
}
- EventListener 事件监听器的类型，属于函数类型，可以理解为观察者。当此函数所对应的目标状态发生改变时，此函数会被执行。
export type EventListener = (event: CustomEvent) => void
接下来看一下EventDispatcher对象中的属性和方法。
- _listeners：不同状态的监听器的集合。
- addEventListener：向目标对象注册监听事件
_listeners = {}
addEventListener(type: string, listener: EventListener) {
const listeners = this._listeners
if (listeners[type] === undefined) {
listeners[type] = []
}
if (listeners[type].indexOf(listener) === -1) {
listeners[type].push(listener)
}
}
从上面的代码中可以看到，一个目标状态会对应多个监听事件，通过这些监听事件，我们可以让不同的观察者观察目标。
- hasEventListener 判断目标对象的某个状态是否被某个监听器监听
hasEventListener(type: string, listener: EventListener) {
const listeners = this._listeners
return (
listeners[type] !== undefined && listeners[type].indexOf(listener) !== -1
)
}
其逻辑就是查看listeners里有没有相应状态，以及此状态下有没有相应监听器。
- removeEventListener 取消某个状态下的事件监听。
removeEventListener(type: string, listener: EventListener) {
const listeners = this._listeners
const listenerArray = listeners[type]
if (listenerArray !== undefined) {
const index = listenerArray.indexOf(listener)
if (index !== -1) {
listenerArray.splice(index, 1)
}
}
}
其逻辑就是删除listeners中某个状态下的某个监听器。
- dispatchEvent 当目标对象的某个状态发生改变时，触发监听此状态的所有监听器。
dispatchEvent(event: CustomEvent) {
const listeners = this._listeners
const listenerArray = listeners[event.type]
if (listenerArray !== undefined) {
event.target = this
// 复制一份侦听器集合，以防在迭代时删除侦听器。
const array = [...listenerArray]
for (let i = 0, l = array.length; i < l; i++) {
array[i].call(this, event)
}
event.target = null
}
}
接下来我们可以去测试一下其功能。
3-测试
在测试文件EventDispatcher.spec.ts 中做一下基本功能的测试。
import { describe, it } from 'vitest'
import { EventDispatcher, CustomEvent } from '../lmm/core/EventDispatcher'
describe('EventDispatcher', () => {
it('基本功能测试', () => {
const eventDispacher = new EventDispatcher()
const fn1 = function (event: CustomEvent) {
console.log('------------')
console.log(1)
console.log(event)
console.log('------------')
}
const fn2 = function (event: CustomEvent) {
console.log('------------')
console.log(2)
console.log(event)
console.log('------------')
}
eventDispacher.addEventListener('typeA', fn1)
eventDispacher.addEventListener('typeA', fn2)
console.log(eventDispacher.hasEventListener('typeA', fn1))
eventDispacher.dispatchEvent({ type: 'typeA' })
eventDispacher.removeEventListener('typeA', fn1)
console.log(eventDispacher.hasEventListener('typeA', fn1))
})
})
在上面的代码中，我们对EventDispatcher进行了实例化，然后用fn1、fn2 两个监听器监听目标对象的状态typeA。
其打印信息如下：
stdout | _tests_/EventDispatcher.spec.ts > EventDispatcher > 基本功能测试
true
------------
1
{
type: 'typeA',
target: EventDispatcher { _listeners: { typeA: [Array] } }
}
------------
------------
2
{
type: 'typeA',
target: EventDispatcher { _listeners: { typeA: [Array] } }
}
------------
false
这说明没有问题。
通常我们会让一个类继承EventDispatcher，就像下面的Wolf类：
import { describe, it } from 'vitest'
import { EventDispatcher, CustomEvent } from '../lmm/core/EventDispatcher'
describe('EventDispatcher', () => {
it.skip('基本功能测试', () => {
……
})
it('继承测试', () => {
class Wolf extends EventDispatcher {
constructor(public name: string) {
super()
}
}
const wolf = new Wolf('灰太狼')
wolf.addEventListener('coming', (event) => {
console.log(event.target.name + '来啦！')
})
wolf.dispatchEvent({ type: 'coming' })
})
})
打印如下：
stdout | _tests_/EventDispatcher.spec.ts > EventDispatcher > 继承测试
灰太狼来啦！
总结
在我们架构图形项目的时候，需要掌握常见的设计模式，这样可以让我们在架构的过程中有据可循。
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
