diff --git a/docs/en-us/hippy-react/native-event.md b/docs/en-us/hippy-react/native-event.md index 3bc21bcc0cd..db7089c078c 100644 --- a/docs/en-us/hippy-react/native-event.md +++ b/docs/en-us/hippy-react/native-event.md @@ -2,6 +2,12 @@ Some events are not sent to a single UI, but to the entire business, such as screen flips, network changes, etc., we call it `native events`. +Hippy provides two methods to manage global events: + ++ `Hippy.on`, `Hippy.off`, `Hippy.emit` is framework-less EventBus, mainly to listen to some special C++ events such as `dealloc`, `destroyInstance`. It can be also used to customize JS global events. + ++ `HippyEventEmitter` and `HippyEvent`(supported after 2.15.0) is HippyReact EventBus, which not only being used to customize JS global events, but also to handle all `NativeEvent` dispatching, such as `rotate` event. + --- # Event Listener @@ -78,20 +84,20 @@ HippyEvent.off('rotate'); ### emit -`(event: string, param?: any) => HippyEvent` used to trigger event, `HippyEvent` object is returned for chaining call. +`(event: string, ...param: any) => HippyEvent` used to trigger event, `HippyEvent` object is returned for chaining call. > + event: string - specify the event name, only single event supported. -> + param?: any - optional parameter,used as the arguments of callback function. +> + ...param: any - optional, support to send multiple parameters, used as the arguments of callback function. ```js import { HippyEvent } from '@hippy/react'; -const rotateCallback = (data) => { - console.log('rotate data', data && data.orientation); +const rotateCallback = (data1, data2) => { + console.log('rotate data', data1, data2); } HippyEvent.on('rotate', rotateCallback); // Trigger rotate event with orientation paramters -HippyEvent.emit('rotate', { orientation: 'vertical' }); +HippyEvent.emit('rotate', { orientation: 'vertical' }, { degree: '90' }); ``` ### sizeOf diff --git a/docs/hippy-react/native-event.md b/docs/hippy-react/native-event.md index e74938cd66e..788bb5b6a4a 100644 --- a/docs/hippy-react/native-event.md +++ b/docs/hippy-react/native-event.md @@ -1,7 +1,13 @@ -# 终端事件 +# 事件 有一些事件不是发给单个 UI,而是发给整个业务的,例如屏幕的翻转、网络的变化等等,我们称之它为 `终端事件`。 +Hippy 提供了两种方式来管理全局事件: + ++ `Hippy.on`、`Hippy.off`、`Hippy.emit` 是框架无关的全局事件 EventBus,主要用来监听如 `dealloc`、`destroyInstance` 等特殊 C++ 底层事件,也可以手动定制 JS 内的全局事件。 + ++ `HippyEventEmitter` 和 `HippyEvent`(2.15.0后支持) 是 HippyReact 定制的 EventBus,除了可以手动定制 JS 内的全局事件外,所有全局 `NativeEvent` 都由其来分发,如 `rotate` 事件等。 + --- # 事件监听器 @@ -78,20 +84,20 @@ HippyEvent.off('rotate'); ### emit -`(event: string, param?: any) => HippyEvent` 用于触发对应事件,返回 `HippyEvent` 对象可用于链式调用。 +`(event: string, ...param: any) => HippyEvent` 用于触发对应事件,返回 `HippyEvent` 对象可用于链式调用。 > + event: string - 指定事件名称,只能传单个事件。 -> + param?: any - 可选参数,用作回调函数的参数。 +> + ...param: any - 可选,支持发送多个参数,用作回调函数的参数。 ```js import { HippyEvent } from '@hippy/react'; -const rotateCallback = (data) => { - console.log('rotate data', data && data.orientation); +const rotateCallback = (data1, data2) => { + console.log('rotate data', data1, data2); } HippyEvent.on('rotate', rotateCallback); // 触发 rotate 事件,并携带参数 -HippyEvent.emit('rotate', { orientation: 'vertical' }); +HippyEvent.emit('rotate', { orientation: 'vertical' }, { degree: '90' }); ``` ### sizeOf diff --git a/docs/hippy-vue/native-event.md b/docs/hippy-vue/native-event.md index a0b5d6068cc..f99b2680c67 100644 --- a/docs/hippy-vue/native-event.md +++ b/docs/hippy-vue/native-event.md @@ -1,8 +1,12 @@ -# 终端事件 +# 事件 有一些事件不是发给单个 UI,而是发给整个业务的,例如屏幕的翻转、网络的变化等等,我们称之它为 `终端事件`。 -在 hippy-vue 中,所有终端事件都是分发到 Vue 的实例上(范例中实例名为 `app`),通过 Vue 的内部事件机制进行分发的。 +Hippy 提供了两种方式来管理全局事件: + ++ `Hippy.on`、`Hippy.off`、`Hippy.emit` 是框架无关的全局事件 EventBus,主要用来监听如 `dealloc`、`destroyInstance` 等特殊 C++ 底层事件,也可以手动定制 JS 内的全局事件。 + ++ `app.$on`、`app.$off`、`app.$emit` 是 Vue 定制的 EventBus,除了可以手动定制 JS 内的全局事件外,所有全局 `NativeEvent` 都由其来分发,如 `rotate` 事件等。 --- diff --git a/packages/hippy-react/src/event/global-listener.ts b/packages/hippy-react/src/event/global-listener.ts index bec5d3438c8..6efb0988e97 100644 --- a/packages/hippy-react/src/event/global-listener.ts +++ b/packages/hippy-react/src/event/global-listener.ts @@ -110,7 +110,7 @@ const HippyEvent = { } return 0; }, - emit(event: string | undefined, param?: any) { + emit(event: string | undefined, ...param: any) { if (typeof event !== 'string') { throw new TypeError('The event argument is not string for HippyEvent.emit()'); } @@ -119,7 +119,7 @@ const HippyEvent = { warn(`Event [${event}] has not been registered yet in HippyEvent`); return HippyEvent; } - eventHub.notifyEvent(param); + eventHub.notifyEvent(...param); return HippyEvent; }, }; diff --git a/packages/hippy-react/src/event/hub.ts b/packages/hippy-react/src/event/hub.ts index 546f8e5e3c3..e57ea275fa1 100644 --- a/packages/hippy-react/src/event/hub.ts +++ b/packages/hippy-react/src/event/hub.ts @@ -63,16 +63,16 @@ class HippyEventHub implements HippyEventHub { return currId; } - public notifyEvent(eventParams: any) { + public notifyEvent(...eventParams: any) { Object.keys(this.handlerContainer).forEach((key) => { const instance = this.handlerContainer[key]; if (!instance || !instance.eventHandler) { return; } if (instance.context) { - instance.eventHandler.call(instance.context, eventParams); + instance.eventHandler.call(instance.context, ...eventParams); } else { - instance.eventHandler(eventParams); + instance.eventHandler(...eventParams); } }); }