个人中心
gpt4 book ai didi

js简单粗暴的发布订阅示例代码

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 39 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章js简单粗暴的发布订阅示例代码由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

什么是发布/订阅?

我打个比方，你去某个门店买衣服，你和门店店长相互并不认识，门店店长只管卖他的衣服，并不关心是谁来买，而你也只管买你想要的衣服，并不关心是哪个门店在卖，这时，门店和你就组成了一个发布/订阅的关系.

当门店挂出衣服款式，你去找你想要的衣服，如果找到了，那就买下来，如果没找到，那就离开这家店。整个过程就是这么简单.

使用场景 。

异步通信、多页面间相互通信，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();
 
// 订阅 sub1
const sub1 = ob.on( 'sub1' , (a, b) => {
  console.log( 'sub1' , a, b);
});
 
// 订阅 sub1
const sub11 = ob.on( 'sub1' , (a, b) => {
  console.log( 'sub11' , a, b);
});
 
ob.trigger( 'sub1' , 2, 3);
 
// 取消订阅sub1
sub1();
 
// 取消订阅sub11
sub11();
 
// 订阅 sub3
ob.on( 'sub3' , (a, b) => {
  console.log( 'sub3' , a, b);
});
 
// 订阅 sub3
ob.on( 'sub3' , (a, b) => {
  console.log( 'sub33' , a, b);
});
 
ob.trigger( 'sub3' , 6, 7);
 
// 取消订阅所有的sub3
ob.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 。

最后此篇关于js简单粗暴的发布订阅示例代码的文章就讲到这里了,如果你想了解更多关于js简单粗暴的发布订阅示例代码的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

39 4 0
文章推荐： JS实现简易日历效果
文章推荐： javascript代码实现简易计算器
文章推荐： JS中循环遍历数组的四种方式总结
文章推荐： vue form表单post请求结合Servlet实现文件上传功能
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com