资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JavaScript 发布-订阅模式

JavaScript 发布-订阅模式

13651657101 / 3069人阅读

摘要：发布订阅模式订阅者把自己想订阅的事件注册到调度中心，当发布者发布该事件到调度中心，也就是该事件触发时，由调度中心统一调度订阅者注册到调度中心的处理代码。

</>复制代码 
  1. 发布-订阅模式，看似陌生，其实不然。工作中经常会用到，例如 Node.js EventEmitter 中的 on 和 emit 方法；Vue 中的 $on 和 $emit 方法。他们都使用了发布-订阅模式，让开发变得更加高效方便。
一、 什么是发布-订阅模式 1. 定义

发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。

订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Event Channel），当发布者（Publisher）发布该事件（Publish Event）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。

2. 例子

比如我们很喜欢看某个公众号号的文章，但是我们不知道什么时候发布新文章，要不定时的去翻阅；这时候，我们可以关注该公众号，当有文章推送时，会有消息及时通知我们文章更新了。

上面一个看似简单的操作，其实是一个典型的发布订阅模式，公众号属于发布者，用户属于订阅者；用户将订阅公众号的事件注册到调度中心，公众号作为发布者，当有新文章发布时，公众号发布该事件到调度中心，调度中心会及时发消息告知用户。

二、 如何实现发布-订阅模式？ 1. 实现思路

创建一个对象

在该对象上创建一个缓存列表（调度中心）

on 方法用来把函数 fn 都加到缓存列表中（订阅者注册事件到调度中心）

emit 方法取到 arguments 里第一个当做 event，根据 event 值去执行对应缓存列表中的函数（发布者发布事件到调度中心，调度中心处理代码）

off 方法可以根据 event 值取消订阅（取消订阅）

once 方法只监听一次，调用完毕后删除缓存函数（订阅一次）

2. demo1

我们来看个简单的 demo，实现了 on 和 emit 方法，代码中有详细注释。

</>复制代码 
  1. // 公众号对象
  2. let eventEmitter = {};
  3. // 缓存列表，存放 event 及 fn
  4. eventEmitter.list = {};
  5. // 订阅
  6. eventEmitter.on = function (event, fn) {
  7.     let _this = this;
  8.     // 如果对象中没有对应的 event 值，也就是说明没有订阅过，就给 event 创建个缓存列表
  9.     // 如有对象中有相应的 event 值，把 fn 添加到对应 event 的缓存列表里
  10.     (_this.list[event] || (_this.list[event] = [])).push(fn);
  11.     return _this;
  12. };
  13. // 发布
  14. eventEmitter.emit = function () {
  15.     let _this = this;
  16.     // 第一个参数是对应的 event 值，直接用数组的 shift 方法取出
  17.     let event = [].shift.call(arguments),
  18.         fns = _this.list[event];
  19.     // 如果缓存列表里没有 fn 就返回 false
  20.     if (!fns || fns.length === 0) {
  21.         return false;
  22.     }
  23.     // 遍历 event 值对应的缓存列表，依次执行 fn
  24.     fns.forEach(fn => {
  25.         fn.apply(_this, arguments);
  26.     });
  27.     return _this;
  28. };
  29. function user1 (content) {
  30.     console.log("用户1订阅了:", content);
  31. };
  32. function user2 (content) {
  33.     console.log("用户2订阅了:", content);
  34. };
  35. // 订阅
  36. eventEmitter.on("article", user1);
  37. eventEmitter.on("article", user2);
  38. // 发布
  39. eventEmitter.emit("article", "Javascript 发布-订阅模式");
  40. /*
  41.     用户1订阅了: Javascript 发布-订阅模式
  42.     用户2订阅了: Javascript 发布-订阅模式
  43. */
3. demo2

这一版中我们补充了一下 once 和 off 方法。

</>复制代码 
  1. let eventEmitter = {
  2.     // 缓存列表
  3.     list: {},
  4.     // 订阅
  5.     on (event, fn) {
  6.         let _this = this;
  7.         // 如果对象中没有对应的 event 值，也就是说明没有订阅过，就给 event 创建个缓存列表
  8.         // 如有对象中有相应的 event 值，把 fn 添加到对应 event 的缓存列表里
  9.         (_this.list[event] || (_this.list[event] = [])).push(fn);
  10.         return _this;
  11.     },
  12.     // 监听一次
  13.     once (event, fn) {
  14.         // 先绑定，调用后删除
  15.         let _this = this;
  16.         function on () {
  17.             _this.off(event, on);
  18.             fn.apply(_this, arguments);
  19.         }
  20.         on.fn = fn;
  21.         _this.on(event, on);
  22.         return _this;
  23.     },
  24.     // 取消订阅
  25.     off (event, fn) {
  26.         let _this = this;
  27.         let fns = _this.list[event];
  28.         // 如果缓存列表中没有相应的 fn，返回false
  29.         if (!fns) return false;
  30.         if (!fn) {
  31.             // 如果没有传 fn 的话，就会将 event 值对应缓存列表中的 fn 都清空
  32.             fns && (fns.length = 0);
  33.         } else {
  34.             // 若有 fn，遍历缓存列表，看看传入的 fn 与哪个函数相同，如果相同就直接从缓存列表中删掉即可
  35.             let cb;
  36.             for (let i = 0, cbLen = fns.length; i < cbLen; i++) {
  37.                 cb = fns[i];
  38.                 if (cb === fn || cb.fn === fn) {
  39.                     fns.splice(i, 1);
  40.                     break
  41.                 }
  42.             }
  43.         }
  44.         return _this;
  45.     },
  46.     // 发布
  47.     emit () {
  48.         let _this = this;
  49.         // 第一个参数是对应的 event 值，直接用数组的 shift 方法取出
  50.         let event = [].shift.call(arguments),
  51.             fns = _this.list[event];
  52.         // 如果缓存列表里没有 fn 就返回 false
  53.         if (!fns || fns.length === 0) {
  54.             return false;
  55.         }
  56.         // 遍历 event 值对应的缓存列表，依次执行 fn
  57.         fns.forEach(fn => {
  58.             fn.apply(_this, arguments);
  59.         });
  60.         return _this;
  61.     }
  62. };
  63. function user1 (content) {
  64.     console.log("用户1订阅了:", content);
  65. }
  66. function user2 (content) {
  67.     console.log("用户2订阅了:", content);
  68. }
  69. function user3 (content) {
  70.     console.log("用户3订阅了:", content);
  71. }
  72. function user4 (content) {
  73.     console.log("用户4订阅了:", content);
  74. }
  75. // 订阅
  76. eventEmitter.on("article1", user1);
  77. eventEmitter.on("article1", user2);
  78. eventEmitter.on("article1", user3);
  79. // 取消user2方法的订阅
  80. eventEmitter.off("article1", user2);
  81. eventEmitter.once("article2", user4)
  82. // 发布
  83. eventEmitter.emit("article1", "Javascript 发布-订阅模式");
  84. eventEmitter.emit("article1", "Javascript 发布-订阅模式");
  85. eventEmitter.emit("article2", "Javascript 观察者模式");
  86. eventEmitter.emit("article2", "Javascript 观察者模式");
  87. // eventEmitter.on("article1", user3).emit("article1", "test111");
  88. /*
  89.     用户1订阅了: Javascript 发布-订阅模式
  90.     用户3订阅了: Javascript 发布-订阅模式
  91.     用户1订阅了: Javascript 发布-订阅模式
  92.     用户3订阅了: Javascript 发布-订阅模式
  93.     用户4订阅了: Javascript 观察者模式
  94. */
三、 Vue 中的实现

有了发布-订阅模式的知识后，我们来看下 Vue 中怎么实现 $on 和 $emit 的方法，直接看源码：

</>复制代码 
  1. function eventsMixin (Vue) {
  2.     var hookRE = /^hook:/;
  3.     Vue.prototype.$on = function (event, fn) {
  4.         var this$1 = this;
  5.         var vm = this;
  6.         // event 为数组时，循环执行 $on
  7.         if (Array.isArray(event)) {
  8.             for (var i = 0, l = event.length; i < l; i++) {
  9.                 this$1.$on(event[i], fn);
  10.             }
  11.         } else {
  12.             (vm._events[event] || (vm._events[event] = [])).push(fn);
  13.             // optimize hook:event cost by using a boolean flag marked at registration 
  14.             // instead of a hash lookup
  15.             if (hookRE.test(event)) {
  16.                 vm._hasHookEvent = true;
  17.             }
  18.         }
  19.         return vm
  20.     };
  21.     Vue.prototype.$once = function (event, fn) {
  22.         var vm = this;
  23.         // 先绑定，后删除
  24.         function on () {
  25.             vm.$off(event, on);
  26.             fn.apply(vm, arguments);
  27.         }
  28.         on.fn = fn;
  29.         vm.$on(event, on);
  30.         return vm
  31.     };
  32.     Vue.prototype.$off = function (event, fn) {
  33.         var this$1 = this;
  34.         var vm = this;
  35.         // all，若没有传参数，清空所有订阅
  36.         if (!arguments.length) {
  37.             vm._events = Object.create(null);
  38.             return vm
  39.         }
  40.         // array of events，events 为数组时，循环执行 $off
  41.         if (Array.isArray(event)) {
  42.             for (var i = 0, l = event.length; i < l; i++) {
  43.                 this$1.$off(event[i], fn);
  44.             }
  45.             return vm
  46.         }
  47.         // specific event
  48.         var cbs = vm._events[event];
  49.         if (!cbs) {
  50.             // 没有 cbs 直接 return this
  51.             return vm
  52.         }
  53.         if (!fn) {
  54.             // 若没有 handler，清空 event 对应的缓存列表
  55.             vm._events[event] = null;
  56.             return vm
  57.         }
  58.         if (fn) {
  59.             // specific handler，删除相应的 handler
  60.             var cb;
  61.             var i$1 = cbs.length;
  62.             while (i$1--) {
  63.                 cb = cbs[i$1];
  64.                 if (cb === fn || cb.fn === fn) {
  65.                     cbs.splice(i$1, 1);
  66.                     break
  67.                 }
  68.             }
  69.         }
  70.         return vm
  71.     };
  72.     Vue.prototype.$emit = function (event) {
  73.         var vm = this;
  74.         {
  75.             // 传入的 event 区分大小写，若不一致，有提示
  76.             var lowerCaseEvent = event.toLowerCase();
  77.             if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
  78.                 tip(
  79.                     "Event "" + lowerCaseEvent + "" is emitted in component " +
  80.                     (formatComponentName(vm)) + " but the handler is registered for "" + event + "". " +
  81.                     "Note that HTML attributes are case-insensitive and you cannot use " +
  82.                     "v-on to listen to camelCase events when using in-DOM templates. " +
  83.                     "You should probably use "" + (hyphenate(event)) + "" instead of "" + event + ""."
  84.                 );
  85.             }
  86.         }
  87.         var cbs = vm._events[event];
  88.         if (cbs) {
  89.             cbs = cbs.length > 1 ? toArray(cbs) : cbs;
  90.             // 只取回调函数，不取 event
  91.             var args = toArray(arguments, 1);
  92.             for (var i = 0, l = cbs.length; i < l; i++) {
  93.                 try {
  94.                     cbs[i].apply(vm, args);
  95.                 } catch (e) {
  96.                     handleError(e, vm, ("event handler for "" + event + """));
  97.                 }
  98.             }
  99.         }
  100.         return vm
  101.     };
  102. }
  103. /***
  104.    * Convert an Array-like object to a real Array.
  105.    */
  106. function toArray (list, start) {
  107.     start = start || 0;
  108.     var i = list.length - start;
  109.     var ret = new Array(i);
  110.     while (i--) {
  111.           ret[i] = list[i + start];
  112.     }
  113.     return ret
  114. }

实现思路大体相同，如上第二点中的第一条：实现思路。Vue 中实现的方法支持订阅数组事件。

四、 总结 1. 优点

对象之间解耦

异步编程中，可以更松耦合的代码编写

2. 缺点

创建订阅者本身要消耗一定的时间和内存

虽然可以弱化对象之间的联系，多个发布者和订阅者嵌套一起的时候，程序难以跟踪维护

五、 扩展（发布-订阅模式与观察者模式的区别）

很多地方都说发布-订阅模式是观察者模式的别名，但是他们真的一样吗？是不一样的。

直接上图：

观察者模式：观察者（Observer）直接订阅（Subscribe）主题（Subject），而当主题被激活的时候，会触发（Fire Event）观察者里的事件。

发布订阅模式：订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Event Channel），当发布者（Publisher）发布该事件（Publish Event）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。

差异：

在观察者模式中，观察者是知道 Subject 的，Subject 一直保持对观察者进行记录。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。

在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。

观察者模式大多数时候是同步的，比如当事件触发，Subject 就会去调用观察者的方法。而发布-订阅模式大多数时候是异步的（使用消息队列）。

观察者模式需要在单个应用程序地址空间中实现，而发布-订阅更像交叉应用模式。

GPU云服务器 云服务器 发布订阅模式 订阅发布模式 DTS 订阅发布模式 订阅模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109747.html

相关文章

  • JavaScript设计模式之发布-订阅模式（观察者模式）-Part1

    摘要：设计模式与开发实践读书笔记。发布订阅模式又叫观察者模式，它定义了对象之间的一种一对多的依赖关系。附设计模式之发布订阅模式观察者模式数据结构和算法系列栈队列优先队列循环队列设计模式系列设计模式之策略模式 《JavaScript设计模式与开发实践》读书笔记。 发布-订阅模式又叫观察者模式，它定义了对象之间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。 例...

    muzhuyu 评论0 收藏0

  • JavaScript设计模式之发布-订阅模式（观察者模式）-Part2

    摘要：设计模式与开发实践读书笔记。看此文章前，建议先看设计模式之发布订阅模式观察者模式在中，已经介绍了什么是发布订阅模式，同时，也实现了发布订阅模式。 《JavaScript设计模式与开发实践》读书笔记。 看此文章前，建议先看JavaScript设计模式之发布-订阅模式（观察者模式）-Part1 在Part1中，已经介绍了什么是发布-订阅模式，同时，也实现了发布-订阅模式。但是，就Part1...

    Charlie_Jade 评论0 收藏0

  • JavaScript设计模式之发布-订阅模式（观察者模式）-Part2

    摘要：设计模式与开发实践读书笔记。看此文章前，建议先看设计模式之发布订阅模式观察者模式在中，已经介绍了什么是发布订阅模式，同时，也实现了发布订阅模式。 《JavaScript设计模式与开发实践》读书笔记。 看此文章前，建议先看JavaScript设计模式之发布-订阅模式（观察者模式）-Part1 在Part1中，已经介绍了什么是发布-订阅模式，同时，也实现了发布-订阅模式。但是，就Part1...

    chemzqm 评论0 收藏0

发表评论

登陆后可评论

0条评论

13651657101

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<