什么是發布/訂閱？
我打個比方，你去某個門店買衣服，你和門店店長相互并不認識，門店店長只管賣他的衣服，并不關心是誰來買，而你也只管買你想要的衣服，并不關心是哪個門店在賣，這時，門店和你就組成了一個發布/訂閱的關系。
當門店掛出衣服款式，你去找你想要的衣服，如果找到了，那就買下來，如果沒找到，那就離開這家店。整個過程就是這么簡單。
使用場景
異步通信、多頁面間相互通信，pageA 的方法想在 pageB的方法調用的某個時機觸發
直接上代碼
|
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
|
class Publish { constructor() { this.listMap = {}; } // 訂閱 on(key, fn) { this.listMap[key] ? this.listMap[key].push(fn) : this.listMap[key] = [fn]; // 存儲訂閱fn的下標 const index = this.listMap[key].length - 1; // 返回取消訂閱的function return () => this.clear(key, index); } // 取消所有該key訂閱 off(key) { delete this.listMap[key]; } // 取消key的指定的某個訂閱 clear(key, index) { index === this.listMap[key].length - 1 ? this.listMap[key].pop() : this.listMap[key][index] = null; } //訂閱一次觸發后自動取消訂閱 once(key, fn) { this.on(key, (...rest) => { fn(...rest); this.off(key); }); } // 發布key trigger(key, ...rest) { if(key in this.listMap) { this.listMap[key].forEach(fn => { fn(...rest); }); } }} |
使用方法
|
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
|
const ob = new Publish();// 訂閱 sub1const sub1 = ob.on('sub1', (a, b) => { console.log('sub1', a, b);});// 訂閱 sub1const sub11 = ob.on('sub1', (a, b) => { console.log('sub11', a, b);});ob.trigger('sub1', 2, 3);// 取消訂閱sub1sub1();// 取消訂閱sub11sub11();// 訂閱 sub3ob.on('sub3', (a, b) => { console.log('sub3', a, b);});// 訂閱 sub3ob.on('sub3', (a, b) => { console.log('sub33', a, b);});ob.trigger('sub3', 6, 7);// 取消訂閱所有的sub3ob.off('sub3');// 訂閱一次就自行取消訂閱ob.once('sub4', (a, b) => { console.log('sub4', a, b);});ob.trigger('sub4', 8, 9); |
總結
到此這篇關于js簡單粗暴的發布訂閱的文章就介紹到這了,更多相關js簡單發布訂閱內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_41964594/article/details/112942774
