ts实现js广播（Broadcast）解决单页应用下复杂组件交互的数据通信_js broadcast

不多说，看代码

import {EsPlugin} from "../EsPlugin";
import {isNullOrUndefined} from "util";
import {BroadcastEvent} from "./BroadcastEvent";
import {BroadcastEventData} from "./BroadcastData";
import {BroadcastEventHolder} from "./BroadcastEventHolder";

/**
 * 广播模块插件
 */
export default class BroadcastPlugin implements EsPlugin {

    /**
     * 事件注册保存器
     */
    private eventMap: BroadcastEvent;

    /**
     * 事件注册数据
     */
    private eventData: BroadcastEventData;


    constructor() {
        this.eventMap = {};
        this.eventData = {};
    }


    /**
     * 注册事件
     * @param {string} category   事件分类
     * @param {string} eventName  事件名称
     * @param {() => Function} succFn  接收到成功事件的广播
     * @param {() => Function} errorFn 接收到失败事件的广播
     */
    public register = (category: string,
                       eventName: string,
                       succFn: Function = () => {
                       },
                       errorFn: Function = () => {
                       }): void => {
        const key: string = this.getEventName(category, eventName);

        //TODO 多事件广播待支持
        if (isNullOrUndefined(this.eventMap[key])) {
            this.eventMap[key] = [];
        }
        this.eventMap[key].push({
            success: succFn,
            error: errorFn
        });
        console.log("注册事件成功--> " + category + " : " + eventName);
        // console.log(this.eventMap[key]);

        if (isNullOrUndefined(this.eventData[key])) {
            return
        }
        //当事件数据存储器中有该注册事件的值，进行消息广播
        //进行广播，此次广播是为了接收历史广播的的数据
        this.broadcast(key, false);
    };

    /**
     * 发送广播事件
     * @param category
     * @param eventName
     * @param data       成功数据
     * @param errorData  错误数据
     */
    public send = (category, eventName, data, errorData): void => {

        //保存广播数据
        const key: string = this.getEventName(category, eventName);
        if (isNullOrUndefined(this.eventData[key])) {
            this.eventData[key] = [];
        }
        this.eventData[key][this.eventData[key].length] = {
            success: data,
            errorData
        };
        //进行广播
        this.broadcast(key);
    };


    /**
     * 广播
     * @param {string} key  事件key
     * @param {boolean} isClear 是否清除当前key指向的eventData中的数据
     */
    private broadcast = (key: string, isClear: boolean = true): void => {

        const eventDatum: Array<any> = this.eventData[key];

        if (isNullOrUndefined(eventDatum)) {
            console.warn("key-> " + key + " 对应的数据存在!");
            return;
        }

        const eventHolders: Array<BroadcastEventHolder> = this.eventMap[key];

        console.log(eventHolders);

        if (isNullOrUndefined(eventHolders)) {
            console.warn("key-> " + key + " 对应的处理方式不存在!");
            return;
        }

        /**
         * 遍历数据进行广播
         */
        eventDatum.forEach(({success, error}) => {
            if (!isNullOrUndefined(success)) {
                let data = success;  //TODO 做值copy
                eventHolders.forEach((item: BroadcastEventHolder) => {
                    item.success({data});
                });
            }
            if (!isNullOrUndefined(error)) {

                let data = error;//TODO 做值copy
                eventHolders.forEach((item: BroadcastEventHolder) => {
                    item.error({data});
                });
            }
        });

        //清除广播数据
        if (isClear) {
            this.eventData[key] = [];
        }
    };


    /**
     * 获取一个事件的名称
     * @param {string} category
     * @param {string} eventName
     * @return {string}
     */
    private getEventName = (category: string, eventName: string): string => {
        return category + "_" + eventName;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

/**
 * 广播注册事件对象持有者
 */
export interface BroadcastEventHolder {

    /**
     * 成功广播回调
     */
    success: Function,

    /**
     * 失败广播回调
     */
    error: Function
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/**
 * 广播对象事件
 */
export  interface BroadcastEvent{

    [propName:string]:Array<BroadcastEventHolder>
}
1
2
3
4
5
6
7
8

/**
 * 广播数据对象
 */
export  interface BroadcastEventData{

    [propName:string]: Array<any>
}
1
2
3
4
5
6
7

使用

 const broadcast = new BroadcastPlugin();

        //注册事件
        broadcast.register("update","test",()=>{});

        //发送广播
        broadcast.send("update","test",{});
1
2
3
4
5
6
7