详情我的博客:https://shengchangwei.github.io/js-shejimoshi-fabudingyue/javascript
发布-订阅模式:发布—订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状
态发生改变时,全部依赖于它的对象都将获得通知。java
发布—订阅模式能够普遍应用于异步编程中, 这是一种替代传递回调函数的方案。无需过多关注对象在异步运行期间的内部状态,而只须要订阅感兴趣的事件发生点。git
发布—订阅模式能够取代对象之间硬编码的通知机制,一个对象不用再显式地调用另一个对象的某个接口。发布—订阅模式让两个对象松耦合地联系在一块儿,虽然不太清楚彼此的细节,但这不影响它们之间相互通讯。github
只要咱们曾经在 DOM 节点上面绑定过事件函数,那咱们就曾经使用过发布—订阅模式,来看看下面这两句简单的代码发生了什么事情:ajax
// 监听全局点击事件,(订阅全局点击事件) document.body.addEventListener('click', function() { console.log('触发点击事件') }, false) document.body.click(); // 模拟用户点击 (发布点击事件)
需求介绍:
小明最近看上了一套房子,到了售楼处以后才被告知,该楼盘的房子早已售罄。好在售楼MM 告诉小明,不久后还有一些尾盘推出,开发商正在办理相关手续,手续办好后即可以购买。但究竟是何时,目前尚未人可以知道。编程
因而小明记下了售楼处的电话,之后天天都会打电话过去询问是否是已经到了购买时间。除了小明,还有小红、小强、小龙也会天天向售楼处咨询这个问题。一个星期事后,售楼 MM 决定辞职,由于厌倦了天天回答 1000 个相同内容的电话。设计模式
固然现实中没有这么笨的销售公司,实际上故事是这样的:小明离开以前,把电话号码留在了售楼处。售楼 MM 答应他,新楼盘一推出就立刻发信息通知小明。小红、小强和小龙也是同样,他们的电话号码都被记在售楼处的花名册上,新楼盘推出的时候,售楼 MM 会翻开花名册,遍历上面的电话号码,依次发送一条短信来通知他们。缓存
实现发布—订阅模式思路:服务器
代码以下:架构
// 定义售楼处 let event = { clientList: [], // 缓存列表,存放订阅者的回调函数 subscribe: function(fn) { //订阅事件 this.clientList.push(fn); }, publish: function() { for(var i = 0,fn; fn = this.clientList[i++];) { fn.apply(this, arguments); // arguments 是发布消息时带上的参数 } } } // 下面简单测试 event.subscribe(function(price, squareMeter) { console.log('价格=' + price); console.log('平方米=' + squareMeter); }) event.publish(200000, 88); // 输出: 200万,88平方米 event.trigger(3000000, 110); // 输出:300 万,110 平方米
至此,咱们已经实现了一个最简单的发布—订阅模式,但这里还存在一些问题。咱们看到订阅者接收到了发布者发布的每一个消息,虽然小明只想买 88 平方米的房子,可是发布者把 110 平
方米的信息也推送给了小明,这对小明来讲是没必要要的困扰。因此咱们有必要增长一个标示 key,让订阅者只订阅本身感兴趣的消息。改写后的代码以下:
let event = { clientList: [], // 缓存列表,存放订阅者的回调函数 subscribe: function(key, fn) { //订阅事件 if ( !this.clientList[ key ] ){ // 若是尚未订阅过此类消息,给该类消息建立一个缓存列表 this.clientList[ key ] = []; } this.clientList[ key ].push( fn ); // 订阅的消息添加进消息缓存列表 }, publish: function() { var key = Array.prototype.shift.call( arguments ), // 取出消息类型 fns = this.clientList[ key ]; // 取出该消息对应的回调函数集合 if ( !fns || fns.length === 0 ){ // 若是没有订阅该消息,则返回 return false; } for( var i = 0, fn; fn = fns[ i++ ]; ){ fn.apply( this, arguments ); // (2) // arguments 是发布消息时附送的参数 } } } // 测试 // 订阅事件 event.subscribe('test0', function(data) { console.log('数据0:' + data); }); event.subscribe('test0', function(data) { console.log('数据1:' + data); }); event.subscribe('test1', function(data) { console.log(data); }); setTimeout(function() { count++ // 发布事件 event.publish('test0', count) event.publish('test1', count) }, 1000)
有时候,咱们也许须要取消订阅事件的功能。好比小明忽然不想买房子了,为了不继续接收到售楼处推送过来的短信,小明须要取消以前订阅的事件。如今咱们给 event 对象增长unsubscribe方法:
event.unsubscribe = function(key, fn) { const t = this.clientList[key]; if (!t) { // 若是 key 对应的消息没有被人订阅,则直接返回 return false; } if (!fn) { // 若是不指定处理方法,则取消该事件下全部的处理方法 delete this.clientList[key]; return true; } // 找到指定取消的处理方法的位置 const i = t.indexOf(fn); if (i < 0) { return false; } t.splice(i, 1); // 若是事件下的处理方法为空则删除该事件 if (!t.length) { delete this.clientList[key]; } return true; }
在程序中,发布—订阅模式能够用一个全局的 Event 对象来实现,订阅者不须要了解消息来自哪一个发布者,发布者也不知道消息会推送给哪些订阅者,Event 做为一个相似“中介者”的角色,把订阅者和发布者联系起来。见以下代码:
var Event = (function(){ var clientList = [], subscribe, publish, unsubscribe; subscribe = function() { //订阅事件 if ( !this.clientList[ key ] ){ // 若是尚未订阅过此类消息,给该类消息建立一个缓存列表 this.clientList[ key ] = []; } this.clientList[ key ].push( fn ); // 订阅的消息添加进消息缓存列表 }; publish = function() { var key = Array.prototype.shift.call( arguments ), // 取出消息类型 fns = this.clientList[ key ]; // 取出该消息对应的回调函数集合 if ( !fns || fns.length === 0 ){ // 若是没有订阅该消息,则返回 return false; } for( var i = 0, fn; fn = fns[ i++ ]; ){ fn.apply( this, arguments ); // (2) // arguments 是发布消息时附送的参数 } }; unsubscribe = function(key, fn) { const t = this.clientList[key]; if (!t) { // 若是 key 对应的消息没有被人订阅,则直接返回 return false; } if (!fn) { // 若是不指定处理方法,则取消该事件下全部的处理方法 delete this.clientList[key]; return true; } // 找到指定取消的处理方法的位置 const i = t.indexOf(fn); if (i < 0) { return false; } t.splice(i, 1); // 若是事件下的处理方法为空则删除该事件 if (!t.length) { delete this.clientList[key]; } return true; }; return { subscribe: listen, publish: trigger, unsubscribe: remove } })()
第一次接触发布-订阅模式是前组长自定义全局Angular事件服务,用来在全应用中经过发布/订阅事件来进行通讯,也曾阅读学习,受益良多,特此致谢!
代码以下:
源码连接
import { Injectable } from '@angular/core'; /** * @name EventsService * @description 自定义全局事件服务,用来在全应用中经过发布/订阅事件来进行通讯 * @usage * ```ts * import { EventsService } from '../services/events.service'; * * constructor(public events: EventsService) {} * * // 订阅事件并打印信息 * this.events.subscribe('test', (data: any) => { * console.log(data); // '我是test事件发送来的信息!' * }); * * // 发布事件 * this.events.publish('test', '我是test事件发送来的信息!'); * * // 取消订阅 * this.events.unsubscribe('test'); * ``` */ @Injectable() export class EventsService { private channels: any = []; /** * 经过事件主题订阅相应事件 * @param {string} topic 订阅事件的主题 * @param {function[]} handlers 事件处理方法 */ subscribe(topic: string, ...handlers: Function[]): void { if (!this.channels[topic]) { this.channels[topic] = []; } handlers.forEach((handler) => { this.channels[topic].push(handler); }); } /** * 经过事件主题取消订阅相应事件 * @param {string} topic 取消订阅事件的主题 * @param {function} handler 指定取消该事件主下的处理方法 * @returns {boolean} 取消成功返回true */ unsubscribe(topic: string, handler: Function = null): boolean { const t = this.channels[topic]; if (!t) { return false; } if (!handler) { // 若是不指定处理方法,则取消该事件下全部的处理方法 delete this.channels[topic]; return true; } // 找到指定取消的处理方法的位置 const i = t.indexOf(handler); if (i < 0) { return false; } t.splice(i, 1); // 若是事件下的处理方法为空则删除该事件 if (!t.length) { delete this.channels[topic]; } return true; } /** * 经过事件主题发布相应事件 * @param {string} topic 发布事件的主题 * @param {any[]} args 经过事件发送的数据 * @returns {any[]} */ publish(topic: string, ...args: any[]): any[] { const t = this.channels[topic]; if (!t) { return null; } const responses: any[] = []; t.forEach((handler: any) => { responses.push(handler(...args)); }); return responses; } }
咱们所了解到的发布—订阅模式,都是订阅者必须先订阅一个消息,随后才能接收到发布者发布的消息。若是把顺序反过来,发布者先发布一条消息,而在此以前并无对象来订阅它,这条消息无疑将消失在宇宙中。
在某些状况下,咱们须要先将这条消息保存下来,等到有对象来订阅它的时候,再从新把消息发布给订阅者。就如同 QQ 中的离线消息同样,离线消息被保存在服务器中,接收人下次登陆上线以后,能够从新收到这条消息。
这种需求在实际项目中是存在的,好比在以前的商城网站中,获取到用户信息以后才能渲染用户导航模块,而获取用户信息的操做是一个 ajax 异步请求。当 ajax 请求成功返回以后会发布一个事件,在此以前订阅了此事件的用户导航模块能够接收到这些用户信息。
可是这只是理想的情况,由于异步的缘由,咱们不能保证 ajax 请求返回的时间,有时候它返回得比较快,而此时用户导航模块的代码尚未加载好(尚未订阅相应事件),特别是在用了一些模块化惰性加载的技术后,这是极可能发生的事情。也许咱们还须要一个方案,使得咱们的发布—订阅对象拥有先发布后订阅的能力。
为了知足这个需求,咱们要创建一个存放离线事件的堆栈,当事件发布的时候,若是此时尚未订阅者来订阅这个事件,咱们暂时把发布事件的动做包裹在一个函数里,这些包装函数将被存入堆栈中,等到终于有对象来订阅此事件的时候,咱们将遍历堆栈而且依次执行这些包装函数,也就是从新发布里面的事件。固然离线事件的生命周期只有一次,就像 QQ 的未读消息只会被从新阅读一次,因此刚才的操做咱们只能进行一次。
发布—订阅模式的优势很是明显,一为时间上的解耦,二为对象之间的解耦。它的应用很是普遍,既能够用在异步编程中,也能够帮助咱们完成更松耦合的代码编写。发布—订阅模式还能够用来帮助实现一些别的设计模式,好比中介者模式。从架构上来看,不管是 MVC 仍是 MVVM,都少不了发布—订阅模式的参与,并且 JavaScript 自己也是一门基于事件驱动的语言。
固然,发布—订阅模式也不是彻底没有缺点。建立订阅者自己要消耗必定的时间和内存,并且当你订阅一个消息后,也许此消息最后都未发生,但这个订阅者会始终存在于内存中。另外,发布—订阅模式虽然能够弱化对象之间的联系,但若是度使用的话,对象和对象之间的必要联系也将被深埋在背后,会致使程序难以跟踪维护和理解。特别是有多个发布者和订阅者嵌套到一块儿的时候,要跟踪一个 bug 不是件轻松的事情。