【OpenHarmony】基于EventBus库使用的开发示例
本文介绍了鸿蒙系统开发中EventBus库的使用指南,包含下载安装、核心功能示例和接口说明。文章演示了基本事件订阅、保持作用域、传递附加参数等典型应用场景,并详细讲解了addEventListener、removeEventListener、dispatch等关键API的使用方法。该库为鸿蒙应用开发提供了高效的事件管理方案,适合用于多组件间的通信。
·
往期推文全新看点(文中附带全新鸿蒙5.0全栈学习笔录)
✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景?
✏️ 嵌入式开发适不适合做鸿蒙南向开发?看完这篇你就了解了~
✏️ 对于大前端开发来说,转鸿蒙开发究竟是福还是祸?
✏️ 鸿蒙岗位需求突增!移动端、PC端、IoT到底该怎么选?
✏️ 市场巨变,移动开发行业即将迎来“第二春”?
✏️ 记录一场鸿蒙开发岗位面试经历~
✏️ 持续更新中……
简介
本库是OpenHarmony系统下基于EventBus 库使用的开发示例,此处使用的版本是eventbusjs@0.2.0,eventbusjs主要功能是消息订阅发送,用于在JavaScript中管理事件,为多组件之间的通信提供了一个简单而高效的解决方案,受到广大开发者的喜爱。
下载
命令行下载:
ohpm i eventbusjs
ohpm install @types/eventbusjs --save-dev //import eventbusjs 的时候语法报错。其原因是eventbusjs包内不含类型声明,需要 @types/eventbusjs 下载这个包的声明文件,从而解决语法的报错。
使用组件在您的代码中:
import EventBus from "eventbusjs"
function myFunction(event) {
console.log("myFunction type=" + event.type);
}
EventBus.addEventListener("my_function_event", myFunction);
EventBus.dispatch("my_function_event");
保持范围
var TestClass1 = function() {
this.className = "TestClass1";
this.callback = function(event) {
console.log(this.className + " = type:" + event.type + " / dispatcher:" + event.target.className);
}
};
var TestClass2 = function() {
this.className = "TestClass2";
this.dispatchOurEvent = function() {
EventBus.dispatch("callback_event", this);
}
};
var t1 = new TestClass1();
var t2 = new TestClass2();
EventBus.addEventListener("callback_event", t1.callback, t1);
t2.dispatchOurEvent();
传递附加参数
var TestClass1 = function() {
this.className = "TestClass1";
this.doSomething = function(event, param1, param2) {
console.log(this.className + ".doSomething");
console.log("type=" + event.type);
console.log("params=" + param1 + param2);
console.log("coming from=" + event.target.className);
}
};
var TestClass2 = function() {
this.className = "TestClass2";
this.ready = function() {
EventBus.dispatch("custom_event", this, "javascript events", " are really useful");
}
};
var t1 = new TestClass1();
var t2 = new TestClass2();
EventBus.addEventListener("custom_event", t1.doSomething, t1);
t2.ready();
EventBus.removeEventListener用法示例
/* Wrong - callback functions are different instances */
EventBus.addEventListener('EXAMPLE_EVENT', function() {
console.log('example callback');
});
EventBus.removeEventListener('EXAMPLE_EVENT', function() {
console.log('example callback');
});
/* Correct - callback function is the same instance */
var handler = function() {
console.log('example callback');
};
EventBus.addEventListener('EXAMPLE_EVENT', handler);
EventBus.removeEventListener('EXAMPLE_EVENT', handler);
接口说明
addEventListener
用于将一个事件处理函数绑定到特定的事件类型上。当这个特定的事件被触发时,绑定的事件处理函数就会被执行。
// @type - string
// @callback - function
// @scope - the scope where the @callback is defined
EventBus.addEventListener(type, callback, scope)
removeEventListener
用于移除之前通过addEventListener方法添加的事件监听器。
// @type - string
// @callback - function
// @scope - the scope where the @callback is defined
EventBus.removeEventListener(type, callback, scope)
hasEventListener
用来检查是否有事件监听器注册在特定的事件类型上。
// @type - string
// @callback - function
// @scope - the scope where the @callback is defined
EventBus.hasEventListener(type, callback, scope)
dispatch
用于触发一个事件。
// @type - string
// @target - the caller
// @args - pass as many arguments as you want
EventBus.dispatch(type, target, args ...)
getEvents
出于调试目的,会打印出添加的侦听器。
EventBus.getEvents()

更多推荐
所有评论(0)