扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Javascript发布订阅模式介绍
  • 459

0
分享到

Javascript发布订阅模式介绍

2024-04-02 19:04:59 459人浏览 八月长安
摘要

发布订阅模式介绍 发布---订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。

发布订阅模式介绍

发布---订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。

现实生活中的发布-订阅模式；

比如小红最近在淘宝网上看上一双鞋子，但是呢联系到卖家后，才发现这双鞋卖光了，但是小红对这双鞋又非常喜欢，所以呢联系卖家，问卖家什么时候有货，卖家告诉她，要等一个星期后才有货，卖家告诉小红，要是你喜欢的话，你可以收藏我们的店铺，等有货的时候再通知你，所以小红收藏了此店铺，但与此同时，小明，小花等也喜欢这双鞋，也收藏了该店铺；等来货的时候就依次会通知他们；

在上面的故事中，可以看出是一个典型的发布订阅模式，卖家是属于发布者，小红，小明等属于订阅者，订阅该店铺，卖家作为发布者，当鞋子到了的时候，会依次通知小明，小红等，依次使用旺旺等工具给他们发布消息；

发布订阅模式的优点：

1.支持简单的广播通信，当对象状态发生改变时，会自动通知已经订阅过的对象。

比如上面的列子，小明，小红不需要天天逛淘宝网看鞋子到了没有，在合适的时间点，发布者(卖家)来货了的时候，会通知该订阅者(小红，小明等人)。

2.发布者与订阅者耦合性降低，发布者只管发布一条消息出去，它不关心这条消息如何被订阅者使用，同时，订阅者只监听发布者的事件名，只要发布者的事件名不变，它不管发布者如何改变；同理卖家（发布者）它只需要将鞋子来货的这件事告诉订阅者(买家)，他不管买家到底买还是不买，还是买其他卖家的。只要鞋子到货了就通知订阅者即可。

对于第一点，我们日常工作中也经常使用到，比如我们的ajax请求，请求有成功(success)和失败(error)的回调函数，我们可以订阅ajax的success和error事件。我们并不关心对象在异步运行的状态，我们只关心success的时候或者error的时候我们要做点我们自己的事情就可以了~

发布订阅模式的缺点：

  • 创建订阅者需要消耗一定的时间和内存。
  • 虽然可以弱化对象之间的联系，如果过度使用的话，反而使代码不好理解及代码不好维护等等。

如何实现发布--订阅模式？

  • 首先要想好谁是发布者(比如上面的卖家)。
  • 然后给发布者添加一个缓存列表，用于存放回调函数来通知订阅者(比如上面的买家收藏了卖家的店铺，卖家通过收藏了该店铺的一个列表名单)。
  • 最后就是发布消息，发布者遍历这个缓存列表，依次触发里面存放的订阅者回调函数。

我们还可以在回调函数里面添加一点参数，比如鞋子的颜色，鞋子尺码等信息；

我们先来实现下简单的发布-订阅模式；代码如下：

var shoeObj = {}; // 定义发布者
shoeObj.list = []; // 缓存列表 存放订阅者回调函数
         
// 增加订阅者
shoeObj.listen = function(fn) {
    shoeObj.list.push(fn);  // 订阅消息添加到缓存列表
}
 
// 发布消息
shoeObj.trigger = function(){
    for(var i = 0,fn; fn = this.list[i++];) {
        fn.apply(this,arguments);
    }
}
// 小红订阅如下消息
shoeObj.listen(function(color,size){
    console.log("颜色是："+color);
    console.log("尺码是："+size); 
});
 
// 小花订阅如下消息
shoeObj.listen(function(color,size){
    console.log("再次打印颜色是："+color);
    console.log("再次打印尺码是："+size);
});
shoeObj.trigger("红色",40);
shoeObj.trigger("黑色",42);

运行结果如下：

打印如上截图，我们看到订阅者接收到发布者的每个消息，但是呢，对于小红来说，她只想接收颜色为红色的消息，不想接收颜色为黑色的消息，为此我们需要对代码进行如下改造下，我们可以先增加一个key，使订阅者只订阅自己感兴趣的消息。

var shoeObj = {}; // 定义发布者
shoeObj.list = []; // 缓存列表 存放订阅者回调函数
         
// 增加订阅者
shoeObj.listen = function(key,fn) {
    if(!this.list[key]) {
        // 如果还没有订阅过此类消息，给该类消息创建一个缓存列表
        this.list[key] = [];
    }
    this.list[key].push(fn);  // 订阅消息添加到缓存列表
}
 
// 发布消息
shoeObj.trigger = function(){
    var key = Array.prototype.shift.call(arguments); // 取出消息类型名称
    var fns = this.list[key];  // 取出该消息对应的回调函数的集合
 
    // 如果没有订阅过该消息的话，则返回
    if(!fns || fns.length === 0) {
        return;
    }
    for(var i = 0,fn; fn = fns[i++]; ) {
        fn.apply(this,arguments); // arguments 是发布消息时附送的参数
    }
};
 
// 小红订阅如下消息
shoeObj.listen('red',function(size){
    console.log("尺码是："+size); 
});
 
// 小花订阅如下消息
shoeObj.listen('block',function(size){
    console.log("再次打印尺码是："+size);
});
shoeObj.trigger("red",40);
shoeObj.trigger("block",42);

上面的代码，我们再来运行打印下如下：

可以看到，订阅者只订阅自己感兴趣的消息了；

发布---订阅模式的代码封装

我们知道，对于上面的代码，小红去买鞋这么一个对象shoeObj进行订阅，但是如果以后我们需要对买房子或者其他的对象进行订阅呢，我们需要复制上面的代码，再重新改下里面的对象代码；为此我们需要进行代码封装；

如下代码封装：

var event = {
    list: [],
    listen: function(key,fn) {
        if(!this.list[key]) {
            this.list[key] = [];
        }
        // 订阅的消息添加到缓存列表中
        this.list[key].push(fn);
    },
    trigger: function(){
        var key = Array.prototype.shift.call(arguments);
        var fns = this.list[key];
        // 如果没有订阅过该消息的话，则返回
        if(!fns || fns.length === 0) {
            return;
        }
        for(var i = 0,fn; fn = fns[i++];) {
            fn.apply(this,arguments);
        }
    }
};

我们在定义一个initEvent函数，这个函数使所有的普通对象都具有发布订阅功能，如下代码：

var initEvent = function(obj) {
    for(var i in event) {
        obj[i] = event[i];
    }
};
// 我们再来测试下，我们还是给shoeObj这个对象添加发布-订阅功能；
var shoeObj = {};
initEvent(shoeObj);
 
// 小红订阅如下消息
shoeObj.listen('red',function(size){
    console.log("尺码是："+size); 
});
 
// 小花订阅如下消息
shoeObj.listen('block',function(size){
    console.log("再次打印尺码是："+size);
});
shoeObj.trigger("red",40);
shoeObj.trigger("block",42);

如何取消订阅事件？

比如上面的列子，小红她突然不想买鞋子了，那么对于卖家的店铺他不想再接受该店铺的消息，那么小红可以取消该店铺的订阅。

如下代码：

event.remove = function(key,fn){
    var fns = this.list[key];
    // 如果key对应的消息没有订阅过的话，则返回
    if(!fns) {
        return false;
    }
    // 如果没有传入具体的回调函数，表示需要取消key对应消息的所有订阅
    if(!fn) {
        fn && (fns.length = 0);
    }else {
        for(var i = fns.length - 1; i >= 0; i--) {
            var _fn = fns[i];
            if(_fn === fn) {
                fns.splice(i,1); // 删除订阅者的回调函数
            }
        }
    }
};

测试代码如下：

var initEvent = function(obj) {
    for(var i in event) {
        obj[i] = event[i];
    }
};
var shoeObj = {};
initEvent(shoeObj);
 
// 小红订阅如下消息
shoeObj.listen('red',fn1 = function(size){
    console.log("尺码是："+size); 
});
 
// 小花订阅如下消息
shoeObj.listen('red',fn2 = function(size){
    console.log("再次打印尺码是："+size);
});
shoeObj.remove("red",fn1);
shoeObj.trigger("red",42);

运行结果如下：

全局--发布订阅对象代码封装

我们再来看看我们传统的ajax请求吧，比如我们传统的ajax请求，请求成功后需要做如下事情：

  • 渲染数据。
  • 使用数据来做一个动画。

那么我们以前肯定是如下写代码：

$.ajax(“Http://127.0.0.1/index.PHP”,function(data){
    rendedData(data);  // 渲染数据
    doAnimate(data);  // 实现动画
});

假如以后还需要做点事情的话，我们还需要在里面写调用的方法；这样代码就耦合性很高，那么我们现在使用发布-订阅模式来看如何重构上面的业务需求代码；

$.ajax(“http://127.0.0.1/index.php”,function(data){
    Obj.trigger(‘success',data);  // 发布请求成功后的消息
});
// 下面我们来订阅此消息，比如我现在订阅渲染数据这个消息；
Obj.listen(“success”,function(data){
   renderData(data);
});
// 订阅动画这个消息
Obj.listen(“success”,function(data){
   doAnimate(data);
});

为此我们可以封装一个全局发布-订阅模式对象；如下代码：

var Event = (function(){
    var list = {},
          listen,
          trigger,
          remove;
          listen = function(key,fn){
            if(!list[key]) {
                list[key] = [];
            }
            list[key].push(fn);
        };
        trigger = function(){
            var key = Array.prototype.shift.call(arguments),
                 fns = list[key];
            if(!fns || fns.length === 0) {
                return false;
            }
            for(var i = 0, fn; fn = fns[i++];) {
                fn.apply(this,arguments);
            }
        };
        remove = function(key,fn){
            var fns = list[key];
            if(!fns) {
                return false;
            }
            if(!fn) {
                fns && (fns.length = 0);
            }else {
                for(var i = fns.length - 1; i >= 0; i--){
                    var _fn = fns[i];
                    if(_fn === fn) {
                        fns.splice(i,1);
                    }
                }
            }
        };
        return {
            listen: listen,
            trigger: trigger,
            remove: remove
        }
})();
// 测试代码如下：
Event.listen("color",function(size) {
    console.log("尺码为:"+size); // 打印出尺码为42
});
Event.trigger("color",42);

理解模块间通信

我们使用上面封装的全局的发布-订阅对象来实现两个模块之间的通信问题；比如现在有一个页面有一个按钮，每次点击此按钮后，div中会显示此按钮被点击的总次数；如下代码：

<button id="count">点将我</button>
<div id="showcount"></div>

我们中的a.js负责处理点击操作及发布消息；如下JS代码：

var a = (function(){
    var count = 0;
    var button = document.getElementById("count");
    button.onclick = function(){
        Event.trigger("add",count++);
    }
})();

b.js负责监听add这个消息，并把点击的总次数显示到页面上来；如下代码：

var b = (function(){
    var div = document.getElementById("showcount");
    Event.listen('add',function(count){
        div.innerhtml = count;
    });
})();

下面是html代码如下，JS应用如下引用即可：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="global.js"></script>
 </head>
 <body>
    <button id="count">点将我</button>
    <div id="showcount"></div>
    <script src = "a.js"></script>
    <script src = "b.js"></script>
 </body>
</html>

如上代码，当点击一次按钮后，showcount的div会自动加1，如上演示的是2个模块之间如何使用发布-订阅模式之间的通信问题；

其中global.js就是我们上面封装的全局-发布订阅模式对象的封装代码；

到此这篇关于javascript发布订阅模式的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: Javascript发布订阅模式介绍

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

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

猜你喜欢
  • Javascript发布订阅模式介绍
    发布订阅模式介绍 发布---订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。 ...
    99+
    2024-04-02
  • JavaScript设计模式发布订阅模式
    目录前言发布订阅设计模式前言 发布订阅设计模式是和观察者设计模式基本上相同，但是他们两个设计模式不同的是发布订阅者拥有一个事件处理中心而观察者并没有 比如，我们利用订阅者设计模式去监...
    99+
    2024-04-02
  • Javascript设计模式之发布订阅模式
    目录简介回忆曾经畅谈现在发布-订阅的顺序探讨JavaScript实现发布-订阅模式的便利性小结简介 发布-订阅模式又叫做观察者模式，他定义了一种一对多的依赖关系，即当一个对象的状态发...
    99+
    2022-12-19
    JS发布订阅模式 JS设计模式订阅模式
  • 深入了解JavaScript发布订阅模式
    目录发布订阅模式的基本原理发布订阅模式和观察者模式的区别对象关系解耦发布订阅模式的应用场景生产者 & 消费者关系消息队列自定义事件系统结语JavaScript 发布订阅模式（...
    99+
    2023-05-19
    JavaScript 发布订阅模式 JavaScript 订阅模式
  • 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
  • Redis 发布订阅模型
    RedisServer包含两个重要的结构： 1. channels：实际上就是一个key-value的Map结构,key为订阅地频道，value为Client的List 2. patte...
    99+
    2024-04-02
  • Redis发布/订阅模式实例分析
    这篇文章主要讲解了“Redis发布/订阅模式实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Redis发布/订阅模式实例分析”吧！Redis发布/订阅应用发布订阅(pub/sub)是一...
    99+
    2023-06-27
  • 用JS写一个发布订阅模式
    目录1 场景引入2 代码优化2.1 解决增加粉丝问题2.2 解决添加作品问题3 观察者模式4 经纪人登场5 发布订阅模式6 观察者模式和发布订阅模式的对比 什么是发布订阅模式？能手写...
    99+
    2024-04-02
  • spring发布订阅模式怎么实现
    在Spring中，可以使用Spring的事件机制来实现发布订阅模式。 创建事件对象：首先，需要创建一个事件对象，该对象包含了需要发...
    99+
    2024-02-29
    spring
  • 每天一个设计模式之订阅-发布模式
    博主按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript（_靠这吃饭_）和python（_纯粹喜欢_）两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式 :) 0. 项目地址 ...
    99+
    2023-01-31
    模式
  • node.js中怎么实现发布订阅模式
    node.js中怎么实现发布订阅模式，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。实例如下：//导入内置模块 let Event...
    99+
    2024-04-02
  • vue3如何使用eventBus订阅发布模式
    目录Ⅰ. 什么是eventBus？Ⅱ. vue3 如何使用步骤一 （eventBus 容器）步骤二 （ 订阅者 ）步骤三 （ 发布者 ）总结Ⅰ. 什么是eventBus？ 通俗的讲，...
    99+
    2024-04-02
  • JavaScript利用发布订阅模式编写事件监听函数
    目录背景示例基于Vue的eventHub背景 大家有没有遇到过这种情况，想要写一个事件监听函数，当某个事件被触发的时候，会自动执行这个监听函数，类似： on('changeText'...
    99+
    2023-05-15
    JavaScript实现事件监听函数 JavaScript事件监听函数 JavaScript事件监听
  • javascript设计模式之订阅者模式
    目录一. 初识代理模式二. 代理模式的实现思想三. 代理模式分类四. 虚拟代理模式的实际运用五. 代理的使用意义及要求六. 总结一. 初识代理模式 代理模式是为一个对象提供一个代用品...
    99+
    2024-04-02
  • JS前端设计模式之发布订阅模式详解
    目录引言例子1：version1：version2:总结引言 昨天我发布了一篇关于策略模式和代理模式的文章，收到的反响还不错，于是今天我们继续来学习前端中常用的设计模式之一：发布-订...
    99+
    2022-11-13
    JS发布订阅模式 JS前端设计模式
  • js中发布订阅模式的示例分析
    这篇文章主要介绍js中发布订阅模式的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！代码//发布订阅模式 class EventEmiter{   ...
    99+
    2024-04-02
  • 如何用JS写一个发布订阅模式
    这篇文章给大家介绍如何用JS写一个发布订阅模式，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。什么是发布订阅模式？能手写实现一下吗？它和观察者模式有区别吗？...1 场景引入我们先来看这么一个场景：假设现在有一个社交平台...
    99+
    2023-06-25
  • Redis发布/订阅模式是怎么工作的
    Redis发布/订阅模式是一种消息传递模式，其中发布者向频道发布消息，而订阅者则订阅感兴趣的频道以接收消息。以下是Redis发布/订...
    99+
    2024-05-07
    Redis
  • Springboot整合redis实现发布订阅功能介绍步骤
    目录一、redis发布订阅简介二、几个核心概念解释三、适用场景四、与springboot的整合1、导入基础依赖2、配置文件3、自定义RedisSubConfig4、自定义消息监听器5...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作