一个简易的SubScribe类

讲东

SubScribe即发布订阅模式，在工作中有着广泛的应用，比如跨组件通信，微前端系统中跨子应用通信等等。
以下是一个简易的实现：

• 订阅
  
• 初始化时可限制类型
  
• 发布
  

限制类型是为了让订阅者和发布者知道预制了哪些类型，避免使用了一些对方不知道的类型。

1. type Subscriber<T> = (param?: T) => void
3. export default class SubScribe<P> {
4.   // 订阅数据仓库
5.   public subscribers: Record<string, Subscriber<P>[]> = {};
6.   // 可允许的事件类型
7.   public types: undefined | string[] = undefined;
9.   constructor (types?: string []) {
10.     this.types = types;
11.   }
13.   // 订阅
14.   subscribe (type: string, subscriber: Subscriber<P>) {
15.     const _types = this.types;
17.     if (_types && !_types.includes(type)) {
18.       console.warn(`创建订阅 ${type} 失败 ，订阅类型只允许 ${_types.join(',')} 这几种...`);
19.       return;
20.     }
22.     if (typeof subscriber !== 'function') {
23.       console.warn('创建订阅失败，第二个参数必须为函数类型');
24.       return;
25.     }
27.     if (!this.subscribers[type]) {
28.       this.subscribers[type] = [];
29.     }
31.     this.subscribers[type].push(subscriber);
32.   }
34.   // 订阅一次,触发后自动取消订阅
35.   subscribeOnce (type: string, subscriber: Subscriber<P>) {
36.     if (typeof subscriber !== 'function') {
37.       console.warn('创建订阅失败，第二个参数必须为函数类型');
38.       return;
39.     }
41.     const wrap = (param?: P) => {
42.       subscriber(param);
43.       this.unSubscribe(type, wrap);
44.     };
46.     this.subscribe(type, wrap);
47.   }
49.   // 取消订阅
50.   unSubscribe (type: string, subscriber: Subscriber<P>) {
51.     if (this.subscribers[type]) {
52.       this.subscribers[type] = this.subscribers[type].filter(f => f !== subscriber);
53.     }
54.   }
56.   // 发布事件,触发订阅函数执行
57.   publish (type: string, param?: P) {
58.     const _types = this.types;
60.     if (_types && !_types.includes(type)) {
61.       console.warn(`发布 ${type} 失败，发布类型只允许 ${_types.join(',')} 这几种...`);
62.       return;
63.     }
65.     if (this.subscribers[type]) {
66.       this.subscribers[type].forEach(f => {
67.         f(param);
68.       });
69.     }
70.   }
71. }

复制代码

以下是一个使用案例
初始化并导出一个发布订阅实例（如果是微前端系统，则将该实例传给各个子应用），然后可以通过该实例进行跨对象的通信。

1. // 初始化
2. export const masterSubscribe = new SubScribe(['MICRO_CHILD_ROUTE_MOUNTED', 'MICRO_ACTION']);
4. // 订阅
5. masterSubscribe &&
6.   masterSubscribe.subscribe('MICRO_ACTION', (params) => {
7.    // 执行一些动作
8.   });
10. // 发布
11. masterSubscribe.publish('MICRO_ACTION', {
12.   //...params
13. });

复制代码

来源:https://www.cnblogs.com/shapeY/p/17843505.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！