1.0.6 • Published 3 years ago

tool-event v1.0.6

Weekly downloads
24
License
ISC
Repository
-
Last release
3 years ago

安装

 npm install tool-event

原理

    ParentToolWindow
    ↑              ↑
    ↓              ↓
Tool1Window    Tool2Window

解释:
0. 定义
    ParentToolWindow:父工具窗口
    Tool1Window:工具1窗口,以iframe方式运行在父窗口里面的工具1的窗口
    Tool2Window:工具2窗口,以iframe方式运行在父窗口里面的工具2的窗口

1. 初始化
    工具1页面在加载时,向父工具中注册本工具窗口的引用
2. 注册监听事件
    工具1向父工具窗口注册监听的工具事件,监听参数由工具2别名(表示监听工具2的事件)、事件名称和回调参数组成。
3. 发出事件
    工具2向父工具窗口发布事件,发布参数由工具1别名(表示接收事件的目标工具)、事件名称和传递的数据
4. 转发事件
    父窗口收到工具2发布的事件后,寻找接收事件的目标工具:
        如果没有找到:
            则忽略;
        找到,如果发布的目标工具为工具1:
            判断工具1在监听事件名 == 发布参数的事件名?
                如果在监听:
                    父窗口找到工具1的窗口引用,然后发布事件;
                如果没有监听:
                    忽略该事件;
5. 接收和处理事件
    工具1收到父窗口发布的事件后,执行回调函数。     
6. 广播与接收广播
    当发布消息时,如果工具别名=*,表示事件发布给所有注册在父窗口的工具。
    当接收消息时,如果工具别名=*,表示接收所有工具发布的某类事件。
7. 约束
    工具别名和事件名称不能为空。 但是工具别名可以指定为所有。                

使用

初始化

//导入tool-event模块
import E from 'tool-event';
 //参数是当前工具的别名
 const ToolEvent = new E("SelectPeopleTool");

发起事件例子(emit)

var data = {
    "name":张三,
    "age":18
}
//第一个参数是工具别名,第二个参数是事件的名称,第三个参数是数据内容
ToolEvent.emit("toolAlias","eventName",data)

添加监听事件例子(on)

//第一个参数是工具别名,表示监听哪个工具的事件,第二个参数是事件的名称,第三个参数是数据回调函数
ToolEvent.on("toolAlias","eventName",(data) =>{
    console.log(data);
}) 

移除监听事件例子(off)

//第一个参数是工具别名,第二个参数是事件的名称
ToolEvent.off("toolAlias","eventName")