JS 发布订阅模式

AlienZHOU 发布于2019-08-23 12:32 / 2724人阅读

摘要：发布订阅模式事件发布订阅模式在异步编程中帮助我们完成更松的解耦，甚至在的架构中以及设计模式中也少不了发布订阅模式的参与。

首先声明，本文并非原创。原文请点击这里，本文是在原文的基础上加入一些自己的一些东西，方便以后自己理解与查看。

发布订阅模式

事件发布/订阅模式 (PubSub) 在异步编程中帮助我们完成更松的解耦，甚至在 MVC、MVVC 的架构中以及设计模式中也少不了发布-订阅模式的参与。

优点：在异步编程中实现更深的解耦

缺点：如果过多的使用发布订阅模式，会增加维护的难度

实现发布订阅模式

var Event = function() {
    this.obj = {}
}

Event.prototype.on = function(eventType,fn) {
    if(!this.obj[eventType]) {
        this.obj[eventType] = []
    }
    this.obj[eventType].push(fn)
}

Event.prototype.emit = function() {
    // 取第一个参数，作为eventType
    var eventType = Array.prototype.shift.call(arguments);
    //  获取事件数组
    var arr = this.obj[eventType];
    var len = arr.length;
    // 循环数组，一次执行其中的函数
    for(var i=0;i
以上代码只能实现先订阅，再发布。直接发布就会报错。如何实现可以先发布，然后订阅？
var Event = function() {
    this.obj = {}；
    this.cacheList = [];
}

Event.prototype.emit = function() {
    const args = arguments;  //函数参数
    const that = this;  //this指向,保持cache函数的this指向
    function cache() {
        var eventType = Array.prototype.shift.call(arg)
        var arr = that.obj[eventType]
        for (let i = 0; i < arr.length; i++) {
          arr[i].apply(arr[i], arg)
        }
    }
    this.cacheList.push(cache)  // 采用闭包，保持对emit函数中参数和that的引用
}

Event.prototype.on = function(eventType,fn) {
    if(!this.obj[eventType]) {
        this.obj[eventType] = []
    }
    this.obj[eventType].push(fn)
    // 在订阅函数中执行emit函数中缓存的函数
    for (let i = 0; i < this.cacheList.length; i++) {
        this.cacheList[i]()
    }
}

改成这样后就实现了先发布函数，再订阅的过程。但是也只能先发布，然后再订阅，反过来就行不通。

GPU云服务器云服务器发布订阅模式订阅发布模式 DTS 订阅发布模式订阅模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98695.html

10分钟弄懂一种简单的js设计模式（观察者/发布订阅）

摘要：发布者注册发布订阅者自动打印消息消息观察者模式与发布订阅模式类似。在此种模式中，一个目标物件在它本身的状态改变时主动发出通知，观察者收到通知从而使他们的状态自动发生变化。做为非科班出身的前端er，每次听到设计模式都感觉很高大上，总感觉这些东西是造火箭原子弹用的，距离我们这些造螺丝钉很遥远。但是最近在做一个聊天消息的业务时，发现貌似用上发布订阅模式业务就很清晰了。创建一个消息类当作发布...

xiguadada 2019-08-26 10:13 评论0 收藏0
JS每日一题:设计模式-如何理解观察者(发布订阅)模式?

摘要：期设计模式如何理解观察者发布订阅模式定义观察者模式又叫发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己生活实例理解你今天去看一个 20190411期设计模式-如何理解观察者(发布订阅)模式? 定义: 观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一...

baishancloud 2019-08-23 16:53 评论0 收藏0
观察者模式和发布订阅模式（JS）

摘要：最近被人问到设计模式，观察者模式和发布订阅模式二者有什么区别。观察者模式观察者模式，目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。最近被人问到设计模式，观察者（Observer）模式和发布（Publish）/订阅（Subscribe）模式二者有什么区别。其实这两种模式还是有些许差异的，本质上的区别是调度的方式不同。观察者模式观察者模式，目标和观察者是基类...

Sanchi 2019-08-23 12:59 评论0 收藏0
js中的一对多 - 订阅发布模式

摘要：解决命名空间问题暂不管，删除订阅问题这个用处不大目前我们先着手解决这个问题对应的消息么有被人订阅没有传入具体的回调函数表示取消对应的所有订阅反向遍历删除订阅回调函数这个对象，能够解决大部分事件模拟的问题。订阅发布模式如果按数学翻译其实就是.一对多的映射关系.怎么解释呢？就是一个开关，同时并联几个灯泡(在不同房间),触发的时候，几个灯泡都会得到指令，然后执行发光的行为。订阅发布模式...

Cobub 2019-08-22 11:00 评论0 收藏0
JS设计模式之Obeserver（观察者）模式、Publish/Subscribe（发布/订阅）模式

摘要：观察者模式定义设计模式中对的定义一个对象称为维持一系列依赖于它观察者的对象，将有关状态的任何变更自动通知给它们。如图模式比较观察者模式则多了一个类似于话题调度中心的流程，发布者和订阅者解耦。 Obeserver（观察者）模式定义《js设计模式》中对Observer的定义：一个对象（称为subject）维持一系列依赖于它（观察者）的对象，将有关状态的任何变更自动通知给它们。《设计模...

荆兆峰 2019-08-26 13:37 评论0 收藏0
简单理解观察者模式(pub/sub)在前端中的应用

摘要：概念观察者模式被广泛地应用于客户端编程中。所有的浏览器事件，等都是使用观察者模式的例子。在观察者模式中，一个对象订阅另一个对象的指定活动并得到通知，而不是调用另一个对象的方法。此外，观察者模式还可用于实现数据绑定。概念观察者模式被广泛地应用于JavaScript客户端编程中。所有的浏览器事件（mouseover，keypress等）都是使用观察者模式的例子。这种模式的另一个名字叫自...

guyan0319 2019-08-23 12:10 评论0 收藏0