• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
话筒他常te 显示全部楼层 发表于 2021-10-25 19:31:19 |阅读模式 打印 上一主题 下一主题
什么是发布/订阅?
我打个比方,你去某个门店买衣服,你和门店店长相互并不认识,门店店长只管卖他的衣服,并不关心是谁来买,而你也只管买你想要的衣服,并不关心是哪个门店在卖,这时,门店和你就组成了一个发布/订阅的关系。
当门店挂出衣服格局,你去找你想要的衣服,如果找到了,那就买下来,如果没找到,那就离开这家店。整个过程就是这么简朴。
使用场景
异步通信、多页面间相互通信,pageA 的方法想在 pageB的方法调用的某个机遇触发
直接上代码
  1. class Publish {
  2. constructor() {
  3.   this.listMap = {};
  4. }
  5.         // 订阅
  6. on(key, fn) {
  7.   this.listMap[key]
  8.    ? this.listMap[key].push(fn)
  9.    : this.listMap[key] = [fn];
  10.    
  11.                 // 存储订阅fn的下标
  12.   const index = this.listMap[key].length - 1;
  13.   
  14.                 // 返回取消订阅的function
  15.   return () => this.clear(key, index);
  16. }
  17.         // 取消所有该key订阅
  18. off(key) {
  19.   delete this.listMap[key];
  20. }
  21.         // 取消key的指定的某个订阅
  22. clear(key, index) {
  23.   index === this.listMap[key].length - 1
  24.    ? this.listMap[key].pop()
  25.    : this.listMap[key][index] = null;
  26. }
  27.         //订阅一次触发后自动取消订阅
  28. once(key, fn) {
  29.   this.on(key, (...rest) => {
  30.    fn(...rest);
  31.    this.off(key);
  32.   });
  33. }
  34.         // 发布key
  35. trigger(key, ...rest) {
  36.         if(key in this.listMap) {
  37.                  this.listMap[key].forEach(fn => {
  38.            fn(...rest);
  39.           });
  40.         }
  41. }
  42. }
复制代码
使用方法
  1. const ob = new Publish();
  2. // 订阅 sub1
  3. const sub1 = ob.on('sub1', (a, b) => {
  4. console.log('sub1', a, b);
  5. });
  6. // 订阅 sub1
  7. const sub11 = ob.on('sub1', (a, b) => {
  8. console.log('sub11', a, b);
  9. });
  10. ob.trigger('sub1', 2, 3);
  11. // 取消订阅sub1
  12. sub1();
  13. // 取消订阅sub11
  14. sub11();
  15. // 订阅 sub3
  16. ob.on('sub3', (a, b) => {
  17. console.log('sub3', a, b);
  18. });
  19. // 订阅 sub3
  20. ob.on('sub3', (a, b) => {
  21. console.log('sub33', a, b);
  22. });
  23. ob.trigger('sub3', 6, 7);
  24. // 取消订阅所有的sub3
  25. ob.off('sub3');
  26. // 订阅一次就自行取消订阅
  27. ob.once('sub4', (a, b) => {
  28. console.log('sub4', a, b);
  29. });
  30. ob.trigger('sub4', 8, 9);
复制代码
总结
到此这篇关于js简朴粗暴的发布订阅的文章就先容到这了,更多相关js简朴发布订阅内容请搜刮脚本之家从前的文章或继承欣赏下面的相关文章渴望各人以后多多支持脚本之家!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作