什么是發(fā)布/訂閱？
我打個比方，你去某個門店買衣服，你和門店店長相互并不認識，門店店長只管賣他的衣服，并不關心是誰來買，而你也只管買你想要的衣服，并不關心是哪個門店在賣，這時，門店和你就組成了一個發(fā)布/訂閱的關系。
當門店掛出衣服款式，你去找你想要的衣服，如果找到了，那就買下來，如果沒找到，那就離開這家店。整個過程就是這么簡單。
使用場景
異步通信、多頁面間相互通信，pageA 的方法想在 pageB的方法調(diào)用的某個時機觸發(fā)
直接上代碼
|
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; } //訂閱一次觸發(fā)后自動取消訂閱 once(key, fn) { this.on(key, (...rest) => { fn(...rest); this.off(key); }); } // 發(fā)布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簡單粗暴的發(fā)布訂閱的文章就介紹到這了,更多相關js簡單發(fā)布訂閱內(nèi)容請搜索服務器之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_41964594/article/details/112942774
