广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript设计模式发布订阅模式
  • 559
分享到

JavaScript设计模式发布订阅模式

2024-04-02 19:04:59 559人浏览 独家记忆
摘要

目录前言发布订阅设计模式前言 发布订阅设计模式是和观察者设计模式基本上相同,但是他们两个设计模式不同的是发布订阅者拥有一个事件处理中心而观察者并没有 比如,我们利用订阅者设计模式去监

前言

发布订阅设计模式是和观察者设计模式基本上相同,但是他们两个设计模式不同的是发布订阅者拥有一个事件处理中心而观察者并没有

比如,我们利用订阅者设计模式去监听一个对象的改变,可以给对象改变的方法添加多个行为以及一个行为添加多个方法进行处理

发布订阅设计模式

发布订阅设计模式只需要一个类,类中拥有一个事件中心管理这行为的任务对列,我们利用这个构造函数创建一个实例,在进行模拟一个addEventListener()事件,进行触发事件中心行为上任务对列的方法

我们来举一个订阅者设计模式的例子:

  • 小明去买书

去书店问店员,店员说没有就回家,过一会再去问问,以此往复,直到买到

  • 小红去买书

去书店问店员,店员说没有就会留下一个联系电话给店员,有了书店员就会联系小红,过去买书

小红这种就是发布订阅设计模式的操作,首先给店员留下电话号是往行为的任务队列中添加方法,店员打电话是触发了书到了的行为

订阅者类有个一个属性:

  • 事件中心,用于存放订阅者行为的任务对列

订阅者类中有三个方法,分别为:

  • 往任务队列中添加函数
  • 触发任务队列里的函数
  • 删除任务队列里的函数

创建类,类中有一个对象,该对象就是事件中心,用于存储行为的任务队列

   class Subscribe {
            constructor() {
                // 事件中心
                this.task = {};
            }
      }

添加触发任务队列函数方法:

        // type 行为
            trigger(type) {
                // 判断当前的行为是否真的订阅过
                if (!(type in this.task)) return;
                // 行为订阅过直接进行执行该行为上的方法
                this.task[type].map(callbak => callbak())
            }

添加任务队列中删除函数方法:

            // type 行为
            // callback 函数
            del(type, callback) {
                // 判断当前的行为是否真的订阅过
                if (!(type in this.task)) return;
                // 过滤出当前想要删除的函数
                 this.task[type].filter(val => val != callback);
            }

添加任务队列中添加函数方法:

          // type 是行为
            // callback 是行为发生时候触发的函数
            add(type, callback) {
                // 判断type这个行为是否已经被注册过了,没有则注册
                if (!(type in this.task)) {
                    // 没有注册过给一个空数组
                    this.task[type] = [];
                };
                //往该行为的任务队列添加方法
                this.task[type].push(callback)
            }

创建一个订阅者实例并添加行为和对行为的任务对列增删方法

        // 创建订阅者实例
        const per = new Subscribe();
        // 给订阅者实例添加行为和出现行为时触发的方法
        per.add('click', handA)
        per.add('click', handB)
        per.add('click', handC)
        // 根据行为进行触发方法
        per.trigger('click')
        // 根据行为和方法进行删除
        per.del('click', handC)
        // 方法
        function handA() {
            console.log('clickA');
        }
        // 方法
        function handB() {
            console.log('clickB');
        }
        // 方法
        function handC() {
            console.log('clickC');
        }

订阅者设计模式如果添加了很多事件会增加内存的消耗并且程序难以维护以及难以判断事件来源

到此这篇关于javascript设计模式发布订阅模式的文章就介绍到这了,更多相关JavaScript 发布订阅模式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript设计模式发布订阅模式

本文链接: https://www.lsjlt.com/news/152409.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript设计模式发布订阅模式
    目录前言发布订阅设计模式前言 发布订阅设计模式是和观察者设计模式基本上相同,但是他们两个设计模式不同的是发布订阅者拥有一个事件处理中心而观察者并没有 比如,我们利用订阅者设计模式去监...
    99+
    2022-11-13
  • Javascript设计模式之发布订阅模式
    目录简介回忆曾经畅谈现在发布-订阅的顺序探讨JavaScript实现发布-订阅模式的便利性小结简介 发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发...
    99+
    2022-12-19
    JS发布订阅模式 JS设计模式订阅模式
  • javascript设计模式之订阅者模式
    目录一. 初识代理模式二. 代理模式的实现思想三. 代理模式分类四. 虚拟代理模式的实际运用五. 代理的使用意义及要求六. 总结一. 初识代理模式 代理模式是为一个对象提供一个代用品...
    99+
    2022-11-12
  • 每天一个设计模式之订阅-发布模式
    博主按:《每天一个设计模式》旨在初步领会设计模式的精髓,目前采用javascript(_靠这吃饭_)和python(_纯粹喜欢_)两种语言实现。诚然,每种设计模式都有多种实现方式,但此小册只记录最直截了当的实现方式 :) 0. 项目地址 ...
    99+
    2023-01-31
    模式
  • Javascript发布订阅模式介绍
    发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知。 ...
    99+
    2022-11-13
  • JS前端设计模式之发布订阅模式详解
    目录引言例子1:version1:version2:总结引言 昨天我发布了一篇关于策略模式和代理模式的文章,收到的反响还不错,于是今天我们继续来学习前端中常用的设计模式之一:发布-订...
    99+
    2022-11-13
    JS发布订阅模式 JS前端设计模式
  • 深入了解JavaScript发布订阅模式
    目录发布订阅模式的基本原理发布订阅模式和观察者模式的区别对象关系解耦发布订阅模式的应用场景生产者 & 消费者关系消息队列自定义事件系统结语JavaScript 发布订阅模式(...
    99+
    2023-05-19
    JavaScript 发布订阅模式 JavaScript 订阅模式
  • js设计模式之代理模式及订阅发布模式的示例分析
    这篇文章将为大家详细讲解有关js设计模式之代理模式及订阅发布模式的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1,代理模式,只是学习了虚拟代理以及缓存代理,具体...
    99+
    2022-10-19
  • javascript设计模式中的订阅者模式怎么实现
    本篇内容介绍了“javascript设计模式中的订阅者模式怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一. 初识代理模式代理模式是...
    99+
    2023-06-26
  • JavaScript 简单实现观察者模式和发布-订阅模式
    JavaScript 简单实现观察者模式和发布-订阅模式 1. 观察者模式1.1 什么是观察者模式1.2 代码实现 2. 发布-订阅模式2.1 什么是发布-订阅模式2.2 代码实现2.2.1 基础版2.2.2 取消订阅2.2.3...
    99+
    2023-08-21
    javascript 设计模式
  • node.js 发布订阅模式的实例
    实例如下: //导入内置模块 let EventEmitter = require('events'); let util=require('util'); //Man继承EventEmitter ut...
    99+
    2022-06-04
    实例 模式 node
  • 用JS写一个发布订阅模式
    目录1 场景引入2 代码优化2.1 解决增加粉丝问题2.2 解决添加作品问题3 观察者模式4 经纪人登场5 发布订阅模式6 观察者模式和发布订阅模式的对比 什么是发布订阅模式?能手写...
    99+
    2022-11-12
  • Redis发布/订阅模式实例分析
    这篇文章主要讲解了“Redis发布/订阅模式实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Redis发布/订阅模式实例分析”吧!Redis发布/订阅应用发布订阅(pub/sub)是一...
    99+
    2023-06-27
  • node.js中怎么实现发布订阅模式
    node.js中怎么实现发布订阅模式,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。实例如下://导入内置模块 let Event...
    99+
    2022-10-19
  • vue3如何使用eventBus订阅发布模式
    目录Ⅰ. 什么是eventBus?Ⅱ. vue3 如何使用步骤一 (eventBus 容器)步骤二 ( 订阅者 )步骤三 ( 发布者 )总结Ⅰ. 什么是eventBus? 通俗的讲,...
    99+
    2022-11-13
  • Redis 发布订阅模型
    RedisServer包含两个重要的结构: 1. channels:实际上就是一个key-value的Map结构,key为订阅地频道,value为Client的List 2. patte...
    99+
    2022-10-18
  • js中发布订阅模式的示例分析
    这篇文章主要介绍js中发布订阅模式的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!代码//发布订阅模式 class EventEmiter{   ...
    99+
    2022-10-19
  • 如何用JS写一个发布订阅模式
    这篇文章给大家介绍如何用JS写一个发布订阅模式,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。什么是发布订阅模式?能手写实现一下吗?它和观察者模式有区别吗?...1 场景引入我们先来看这么一个场景:假设现在有一个社交平台...
    99+
    2023-06-25
  • Redis系列(五)发布订阅模式、主从复制和哨兵模式
    NoSQL 开发中或多或少都会用到,也是面试必问知识点。最近这几天的面试每一场都问到了。但是感觉回答的并不好,还有很多需要梳理的知识点。这里通过几篇 Redis 笔记整个梳理一遍,后面再加上面试题。 Redis 系列: ...
    99+
    2015-03-21
    Redis系列(五)发布订阅模式 主从复制和哨兵模式
  • JavaScript利用发布订阅模式编写事件监听函数
    目录背景示例基于Vue的eventHub背景 大家有没有遇到过这种情况,想要写一个事件监听函数,当某个事件被触发的时候,会自动执行这个监听函数,类似: on('changeText'...
    99+
    2023-05-15
    JavaScript实现事件监听函数 JavaScript事件监听函数 JavaScript事件监听
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作