在 js 中应用订阅发布模式（subscrib/public）

什么是发布-订阅者模式

我们在使用发布-订阅者模式之前，先了解什么是发布-订阅者模式。简单来说，发布订阅者模式就是一种一对多的依赖关系。多个订阅者（一般是注册的函数）同时监听同一个数据对象，当这个数据对象发生变化的时候会执行一个发布事件，通过这个发布事件会通知到所有的订阅者，使它们能够自己改变对数据对象依赖的部分状态。
这样看来，一个完整的订阅发布模式，由发布者、订阅者、消息管理器三部分组成。

我们为什么/什么时候要使用这种模式

首先，如果一个数据或者事件的变化会对许多事件产生影响。例如：我们通过websocket从后台实时获取数据，当返回的数据为 @end 时，需要执行关闭数据流，更改数据显示，更新设备状态等等，在不使用订阅开发者模式时，当接收到 @end 后，我们注册一个函数，需要在该函数中写n个函数的执行，但是使用设计者模式，只需要注册一个 @end 的发布函数，其他函数订阅该函数，当发布函数执行后会发布信息，其订阅者会自动更新状态。

耦合性低
便于代码的维护

在js中的实现

所有代码都在项目中亲测有效，且效率较高

1. 定义一个发布者对象，该对象有订阅者列表和发布函数两个属性。

function Deliver() {this.subscribers = [];
}
Deliver.prototype = {constructor: Deliver,deliver: function( message ) {this.subscribers.forEach( function( fun ) {fun( message );} );return this;}
}

2. 为发布者对象添加订阅方法和退订方法

//订阅事件
function subscribe( subscriber, deliver ) {var hasExists = false,isFunction = Object.prototype.toString.call( subscriber ) === '[object Function]';if( isFunction && deliver instanceof Deliver ) {hasExists = deliver.subscribers.some( function( fun ) {return fun === subscriber;} );if( !hasExists ) {deliver.subscribers.push( subscriber );}}
}
//退订subscriber事件
function unSubscribe( subscriber, deliver ) {var isFunction = Object.prototype.toString.call( subscriber ) === '[object Function]';if( isFunction && deliver instanceof Deliver ) {deliver.subscribers = deliver.subscribers.filter( function( fun ) {return fun !== subscriber;} )}}

3. 实例化一个发布者并为其添加订阅者

var endDeliver = new endDeliver();
(function(window){subscriber(endHandle , endDeliver);subscriber(endHandle2 , endDeliver);if(webSocket.data == "@end"){endDeliver.deliver();//当返回数据为end时，end发布者发布消息}
})(window)
function endHandle(){console.log("已执行结束")}function endHandle2(){console.log("重新开始执行函数");
}

4. 运行结果

四、应用心得

可以注册一个空的发布者，即在满足某些条件时发布一些空消息，而订阅者的执行也不需要传递任何的参数。主要适用于状态的改变引起的函数执行。
注册带有参数的发布者，当数据改变时，将数据作为参数传递给各个订阅者，订阅者根据返回的数据进行状态的更新。主要适用于对数据的渲染及判断。

//实例化一个数据发布者
var messagePost = new Deliver();
//该发布者有两个订阅者
subscriber(handle1 , messagePost);
subscriber(handle2 , messagePost);
//两个订阅者分别执行的函数为
function handle1(data){console.log(data);
}
function handle2(data){$(".dome").html(data.ip);
}
//在数据发生改变的时候发布者发布消息
websocket.onmessage = function(evet){messagePost.deliver(event.data)
}
//执行结果
当通过websocket返回的数据时，messagePost会发布消息，handle1 handle2会相继执行更新自己的数据。

第一次大规模的在项目中使用设计模式，所以把思路整理分享一下，有不对的地方还望大家能够指出。

在 js 中应用订阅发布模式（subscrib/public）相关推荐

理解并实现你自己的订阅-发布模式
订阅发布模式: 这是一种广泛应用于异步编程的模式,是回调函数的事件化,常常用来解耦业务逻辑.事件的发布者无需关注订阅的侦听器如何实现业务逻辑,甚至不用关注有多少个侦听器存在.数据通过消息的方式可以灵活 ...
RabbitMQ下的生产消费者模式与订阅发布模式
所谓模式,就是在某种场景下,一类问题及其解决方案的总结归纳.生产消费者模式与订阅发布模式是使用消息中间件时常用的两种模式,用于功能解耦和分布式系统间的消息通信,以下面两种场景为例: 数据接入假 ...
4 交换机-fanout（订阅发布模式）
目录订阅发布模式 1.交换器(Exchange) 1.1.创建交换器 1.2 .推送消息到交换器 2.临时队列 3.绑定(bingdings) 5.代码例子 5.1.生产者代码示例 5.2.消费者代 ...
Publisher/Subscriber 订阅-发布模式原理解析
Publisher/Subscriber 订阅-发布模式原理解析参考资料 What Is Pub/Sub? Publish/Subscribe Messaging Explained 什么是serv ...
Java设计模式-观察者模式(订阅发布模式)
Java设计模式-观察者模式(订阅发布模式) 一起来看会了就当复习丫,不会来一起来看看吧. 很喜欢一句话:"八小时内谋生活,八小时外谋发展". 如果你也喜欢,让我们一起坚持吧!! ...
Redis实现消息队列和订阅发布模式
转载:https://www.cnblogs.com/qlqwjy/p/9763754.html 在项目中用到了redis作为缓存,再学习了ActiveMq之后想着用redis实现简单的消息队列,下面 ...
嵌入式消息订阅发布模式软件框架
文章目录一.总体框架二.基于RT-Thread的SoftBus 2.1 SoftBus的由来 2.2 消息订阅者模式 2.3 静态订阅关系与动态订阅关系 2.4 C/S模式 2.5 消息订阅者模式 ...
java订阅发布模式_Spring Boot ActiveMQ发布/订阅消息模式原理解析
本文在<Spring Boot基于Active MQ实现整合JMS>的基础上,介绍如何使用ActiveMQ的发布/订阅消息模式.发布/订阅消息模式是消息发送者发送消息到主题(topic), ...
js设计模式之观察者模式和订阅发布模式
观察者模式这个模式在我看来原理就是发布者身上放着一个电话本(list)存着订阅者的l联系方式(回调函数),在触发条件(发布)后就会依次联系(遍历调用list中的回调函数)订阅者上代码: funct ...
报纸的配送方式：订阅发布模式
这种设计模式比较简单,属于一对多.类似顾客与报社的关系,顾客订阅报纸,每当有新闻发布时快递员一一给订阅报纸的顾客配送下面是代码实现两个接口 /*** 被观察者** Created by Vola ...

在 js 中应用订阅发布模式（subscrib/public）

什么是发布-订阅者模式

我们为什么/什么时候要使用这种模式

在js中的实现

1. 定义一个发布者对象，该对象有订阅者列表和发布函数两个属性。

2. 为发布者对象添加订阅方法和退订方法

3. 实例化一个发布者并为其添加订阅者

4. 运行结果

四、应用心得

第一次大规模的在项目中使用设计模式，所以把思路整理分享一下，有不对的地方还望大家能够指出。

在 js 中应用订阅发布模式（subscrib/public）相关推荐

最新文章

热门文章

在 js 中应用 订阅发布模式（subscrib/public）

什么是发布-订阅者模式

我们 为什么/什么时候 要使用这种模式

在js中的实现

1. 定义一个发布者对象，该对象有订阅者列表和发布函数两个属性。

2. 为发布者对象添加订阅方法和退订方法

3. 实例化一个发布者并为其添加订阅者

4. 运行结果

四、应用心得

第一次大规模的在项目中使用设计模式，所以把思路整理分享一下，有不对的地方还望大家能够指出。

在 js 中应用 订阅发布模式（subscrib/public）相关推荐

最新文章

热门文章

在 js 中应用订阅发布模式（subscrib/public）

我们为什么/什么时候要使用这种模式

在 js 中应用订阅发布模式（subscrib/public）相关推荐