前言
在前端开发中，经常需要在不同的组件间进行通信。传统的方法包括使用全局变量或事件总线，但这些方法都会导致代码耦合性较高或代码可维护性较差。这时，我们可以使用 npm 包 event-target-subscriber 来实现组件间的解耦通信。
简介
event-target-subscriber 是一个轻量级的 npm 包，它提供了一种基于事件订阅/发布的组件通信方式。它使用事件目标（EventTarget）来实现订阅和发布。
安装
我们可以使用 npm 来安装 event-target-subscriber:
npm install event-target-subscriber
使用方法
创建事件目标
我们首先需要创建一个事件目标，此目标将被用于订阅和发布事件。
import { EventTarget } from 'event-target-subscriber';
const eventTarget = new EventTarget();订阅事件
我们可以使用 on 方法来订阅事件：
eventTarget.on('eventName', (payload) => {
console.log(payload);
});其中，eventName 为事件名，(payload) => {...} 为事件处理函数，会被传入事件触发时传入的参数 payload。
发布事件
我们可以使用 emit 方法来发布事件：
eventTarget.emit('eventName', payload);其中，eventName 为事件名，payload 为事件参数。
取消订阅
我们可以使用 off 方法来取消订阅事件：
const handler = (payload) => {
console.log(payload);
};
eventTarget.on('eventName', handler);
// 取消订阅
eventTarget.off('eventName', handler);其中，eventName 为事件名，handler 为处理函数。
实战应用
事件代理
在复杂的组件设计中，经常需要将事件代理给其他组件，这时可以通过 event-target-subscriber 来实现。
-- -------------------- ---- -------
-- ---
------ - ----------- - ---- --------------------------
------ ------- -
------ -
------ -
------------ --- --------------
--
--
--------- -
-------------------------------- --------------
--
--------------- -
--------------------------------- --------------
--
-------- -
---------------- -
---------------------
--
--
--
-- ---
------ ------- -
--------- -
---------------------------------------- --------------
--
--------------- -
----------------------------------------- --------------
--
-------- -
---------------- -
---------------------
--
--
--在父组件中创建事件目标，并在子组件中订阅此事件。
组件间通信
我们可以通过事件目标来实现组件间的消息通信。
-- -------------------- ---- -------
-- -- -
------ - ----------- - ---- --------------------------
------ ------- -
------ -
------ -
------------ --- --------------
--
--
-------- -
--------- -
---------------------------------- ---------
--
--
--
-- -- -
------ - ----------- - ---- --------------------------
------ ------- -
--------- -
---------------------------------------- --------------
--
--------------- -
----------------------------------------- --------------
--
-------- -
---------------- -
---------------------
--
--
--在组件 A 中发布事件，并在组件 B 中订阅此事件。
总结
event-target-subscriber 提供了一种基于事件订阅/发布的组件通信方式，它可以帮助我们实现组件间的解耦通信。在开发中，我们应该尽量使用 event-target-subscriber 来实现组件间通信，以提高代码的可维护性和复用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005518181e8991b448ced39