简介
在前端开发中，我们经常需要用到组件化的思想来构建复杂的页面。@egjs/component 是一个能够轻松实现组件化的 npm 包，它仅仅有 3.1KB 的大小，而且是使用 TypeScript 开发的。
本篇文章将介绍如何使用 @egjs/component 完成组件化开发。
安装和引用
安装 @egjs/component 很简单，只需要执行以下命令即可：
npm install --save @egjs/component
引用也很简单，只需要在你的代码中添加以下代码：
import Component from "@egjs/component";
基本使用
使用 @egjs/component 实现组件化非常简单，只需要继承 Component 类，然后通过 on 和 off 方法来监听和取消监听事件即可。下面是一个简单的示例代码：
-- -------------------- ---- -------
------ --------- ---- ------------------
----- ----------- ------- --------- -
------------- -
--------
-
------------- -
-- -----
-- ----
-------------------- --------- ----------
-- ------
------------- -- -
------------------------- --------- ------------
-- ------
-
-
----- --------- - --- --------------
-------------------- --- -- ---------------- -- --------- --------
------------------------- --- -- ---------------- -- --------- ----------
------------------------事件说明
通过 @egjs/component 实现的组件化开发，事件是非常重要的一部分。组件可以触发事件，也可以监听事件。下面介绍一下 @egjs/component 提供的方法：
trigger(eventName: string, args: any[])
触发一个事件，第一个参数是事件名称，第二个参数是事件的参数数组。例如：
this.trigger("update", [10, 5]); // 触发 update 事件，并传递 [10, 5] 作为参数on(eventName: string, handler: Function, context?: object)
监听一个事件，第一个参数是事件名称，第二个参数是事件发生时需要执行的函数，第三个参数是执行函数的上下文，可以不传递。例如：
this.on("update", (a, b) => console.log(`a:${a}, b:${b}`)); // 监听 update 事件，并在事件发生时打印 a:10, b:5off(eventName?: string, handler?: Function)
取消监听一个事件，第一个参数是事件名称，第二个参数是需要取消监听的函数，可以不传递。例如：
this.off("update", null); // 取消监听 update 事件的所有处理函数
this.off(null, handler); // 取消所有事件的 handler 处理函数
this.off(null, null); // 取消所有事件的所有处理函数进阶使用
除了基本的事件监听以外，@egjs/component 还提供了其他一些高级功能，例如：
once(eventName: string, handler: Function, context?: object)
只监听一次事件，事件发生时会自动取消监听。例如：
this.once("update", () => console.log("只监听一次的事件")); // 只监听一次 update 事件hasOn(eventName?: string)
判断是否有一个或多个事件被监听。例如：
console.log(this.hasOn("update")); // 返回是否有 update 事件被监听
console.log(this.hasOn()); // 返回所有事件是否有被监听listenTo(target: Component, eventName: string, handler: Function, context?: object)
监听另一个组件的事件。例如：
const targetComponent = new MyComponent();
targetComponent.on("targetEvent", () => console.log("触发目标事件"));
this.listenTo(targetComponent, "targetEvent", () => console.log("监听目标事件")); // 监听目标事件，并在目标事件触发时发生stopListening(target?: Component, eventName?: string, handler?: Function)
停止监听另一个组件的一个或多个事件。例如：
this.stopListening(targetComponent); // 停止监听 targetComponent 的所有事件
this.stopListening(targetComponent, "targetEvent"); // 停止监听 targetComponent 的 targetEvent 事件
this.stopListening(targetComponent, "targetEvent", () => console.log("监听目标事件")); // 只停止在 targetComponent 上监听 "targetEvent" 事件，并且处理函数是 "() => console.log("监听目标事件")" 的监听总结
本篇文章介绍了如何使用 @egjs/component 实现组件化开发，包括基本的事件监听和触发，以及高级功能。希望对您有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcbb0b5cbfe1ea061265e