npm 包 @brycemarshall/event-dispatcher 使用教程

在前端开发中，事件（Event）是常用的一种机制。通过事件，我们可以解耦代码，使得不同部分的代码可以高效协同。@brycemarshall/event-dispatcher 是非常方便的事件处理 npm 包。本文将详细介绍如何使用它。

安装

使用 npm 进行安装：

npm install @brycemarshall/event-dispatcher --save

事件管理器

@brycemarshall/event-dispatcher 提供了事件管理的功能。事件管理器可以被用于两个方面：

• 管理事件监听器
• 发送事件

监听事件

使用 on 方法监听事件。on 方法接受两个参数：事件名称和事件处理函数。

import { EventDispatcher } from '@brycemarshall/event-dispatcher';

let dispatcher = new EventDispatcher();

dispatcher.on('event', function() {
    console.log('事件发生.');
});

你可以多次调用 on 方法来添加多个事件监听器。

分发事件

使用分发器（Dispatch）发送事件。分发器接受一个事件实例对象，并呈现其所有事件侦听器的调用使用 dispatch 方法。

事件实例对象必须是 Event 类的实例。在 Event 类的子类中覆盖名为 type 的必需属性以确定事件的名称。此外，您还可以添加任何您喜欢的额外属性。如下示例：

class MyEvent {
    constructor() {
        this.type = 'event';
        this.value1 = 123;
        this.value2 = 'Hello';
    }
}

使用 dispatch() 方法将事件执行，

let event = new MyEvent();
dispatcher.dispatch(event);

dispatch() 方法将通知所有已注册为 event 事件类型的侦听器。

可选的参数

Dispatch 方法可以具有两个可选参数。

第一个选项是事件目标。目标应为事件类型的字符串。例如，如果您想将事件触发到名称为 'myEvent' 的目标，则可设置：

dispatcher.dispatch(event, 'myEvent');

第二个选项是将事件触发到目标的层数/深度。例如，如果目标层次结构如下所示：

• target
  • child1
    • child2

事件可以或者同时触发 child1 和 child2 目标：

dispatcher.dispatch(event, 'target.child1.child2');
dispatcher.dispatch(event, 'target.child1', 1);

其中目标的层数是从 0 开始计算的，因此将 1 作为最后一个参数等效于将事件触发到 'target.child1'。

移除事件

使用 off 方法从特定事件中取消订阅指定侦听器。

let listenerToRemove = function(event) {
    console.log('事件已经被移除');
};

dispatcher.on('event', listenerToRemove);

dispatcher.off('event', listenerToRemove);

off() 方法可以放置任何 on() 方法的参数。

代码示例

-- -------------------- ---- -------
------ - --------------- - ---- ----------------------------------

----- ------- -
    ------------- -
        --------- - --------
        ----------- - ----
        ----------- - --------
    -
-

--- ---------- - --- ------------------

--- -------- - --------------- -
    ------------------------- --------------
--

---------------------- ----------

--- ----- - --- ----------
---------------------------

----------------------- ----------

本文主要介绍了如何使用 @brycemarshall/event-dispatcher ，该库旨在为您的项目提供方便的事件处理功能。希望这篇文章对事件处理感兴趣的读者有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ee81e8991b448e0a66