发布订阅模式的思想是在观察者模式的基础上演变而来,在观察者模式中客户端监听到对象某个行为就触发对应任务程序。而在发布订阅模式中依然基于这个核心思想,所以有时候也会将两者认为是同一种设计模式。它们的不同之处在于观察者模式中的客户端与服务端是相互耦合的,即服务端对象直接绑定客户端的监听任务,客户端直接绑定监听服务端的行为。而在发布订阅模式中,客户端与服务端是解耦的,它们彼此不相互绑定,两者的联系由中间的通道模块绑定实现连接。发布订阅模式相对于观察者模式实现了解耦,相互之间互不干扰。

 1 //发布者
2 let publisher = {
3 data:0,
4 publishTopic:function(event){
5 let arg = arguments.length > 1 ? Array.prototype.slice.call(arguments,1) : [undefined];
6 channel.pub(event,...arg);
7 }
8 };
9 //通道
10 let channel = {
11 events:{},
12 pub:function(event,arg){
13 //实现发布
14 if(!this.events[event]){
15 return;
16 }
17 this.events[event].forEach(ele => {
18 ele(arg);
19 });
20 },
21 sub:function(event,callback){
22 //实现订阅
23 if(!this.events[event]){
24 this.events[event] = [];
25 }
26 this.events[event].push(callback);
27 }
28 };
29 //订阅者
30 let subscribe = {
31 subscribeTopics:function(event,callback){
32 channel.sub(event,callback);
33 }
34 };
35
36 //订阅
37 subscribe.subscribeTopics("月刊",data =>{
38 console.log(data);
39 });
40 //发布
41 publisher.publishTopic("月刊","aaa");

javaScript设计模式:发布订阅模式的更多相关文章

  1. javascript设计模式——发布订阅模式

    前面的话 发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模 ...

  2. javascript 设计模式 -- 发布/订阅模式

    直接上代码: index.html : <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. 设计模式-发布订阅模式(javaScript)

    1. 前言 2. 什么是发布订阅模式 3. 发布订阅优缺点 4. 举例 4. 总结 1. 前言 发布订阅者模式是为了发布者和订阅者之间避免产生依赖关系,发布订阅者之间的订阅关系由一个中介列表来维护.发 ...

  4. js设计模式--发布订阅模式

    前言 本系列文章主要根据<JavaScript设计模式与开发实践>整理而来,其中会加入了一些自己的思考.希望对大家有所帮助. 概念 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的 ...

  5. [转]js设计模式—发布订阅模式

    发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模式.本文将 ...

  6. [转] 浅析JavaScript设计模式——发布-订阅/观察者模式

    前一段时间一直在写CSS3的文章 一直都没写设计模式 今天来写写大名鼎鼎观察者模式 先画张图 观察者模式的理解 我觉得还是发布-订阅模式的叫法更容易我们理解 (不过也有的书上认为它们是两种模式……)  ...

  7. js设计模式-发布/订阅模式

    一.前言 发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知. 就和用户 ...

  8. Javascript设计模式之发布-订阅模式

    简介 发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖他的对象都会得到通知. 回忆曾经 作为一名前端开发人员,给DOM节点绑定事件可是再频繁不过 ...

  9. 理解JavaScript设计模式与开发应用中发布-订阅模式的最终版代码

    最近拜读了曾探所著的<JavaScript设计模式与开发应用>一书,在读到发布-订阅模式一章时,作者不仅给出了基本模式的通用版本的发布-订阅模式的代码,最后还做出了扩展,给该模式增加了离线 ...

  10. [转] JavaScript设计模式之发布-订阅模式(观察者模式)-Part1

    <JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...

随机推荐

  1. think php 验证码

    1.下载 composer require topthink/think-captcha 1.* // composer 下载 //过程 D:\PHP\phpstudy_pro\WWW\1906A\p ...

  2. Django-模板布局

  3. 4、mysql的存储引擎

    存储引擎 存储引擎是负责对表中的数据进行提取和写入工作的,我们可以为不同的表设置不同的存储引擎,也就是说不同的表可以有不同的物理存储结构,不同的提取和写入方式. 1.1 InnoDB 引擎:具备外键支 ...

  4. 31 面向对象编程 接口 普通类:只有具体实现 声明类的关键字是class,声明接口关键字是interface 接口的作用

    接口 概念 普通类:只有具体实现 抽象类:具体实现和规范(抽象方法)都有! 接口:只有规范!自己无法写方法!专业的约束!约束和实现分离:面向接口编程~ 接口就是规范,定义的是一组规则,体现了现实世界中 ...

  5. python之pyc

    pyc是一种二进制文件,是由py文件经过编译后,生成的文件,是一种byte code,py文件变成pyc文件后, 加载的速度有所提高,而且pyc是一种跨平台的字节码,是由Python的虚拟机来执行的, ...

  6. vant list列表滚动到底部加载更多会滚动到顶部问题

    如果使用异步加载数据并使用了vant中的toast做加载中提示,则有可能会导致列表滚动高度为0,也就是回到了顶部.只要在list加载回调里不使用toast就可以避免这个问题.

  7. 微服务8:通信之RPC实践篇(附源码)

    ★微服务系列 微服务1:微服务及其演进史 微服务2:微服务全景架构 微服务3:微服务拆分策略 微服务4:服务注册与发现 微服务5:服务注册与发现(实践篇) 微服务6:通信之网关 微服务7:通信之RPC ...

  8. CVE-2015-3337(任意文件读取)

    vulhub漏洞环境搭建: https://blog.csdn.net/qq_36374896/article/details/84102101 启动docker环境 cd vulhub-master ...

  9. bzoj4182/luoguP6326 Shopping(点分治,树上背包)

    bzoj4182/luoguP6326 Shopping(点分治,树上背包) bzoj它爆炸了. luogu 题解时间 如果直接暴力背包,转移复杂度是 $ m^{2} $ . 考虑改成点分治. 那么问 ...

  10. a{...}和 .box a{...}的渲染性能高低

    a{...}和 .box a{...}的渲染性能高低 .box a { ... } a{ ... } 因为对于CSS浏览器的渲染机制是选择器从右向左查询 .box a {...} 的渲染逻辑是:先找所 ...