js 发布/订阅模式

plokmju88 发布于2019-08-26 13:44 / 2235人阅读

摘要：这里卖家属于发布者，小红，小明属于订阅者订阅事件触发事件该名称未发布删除订阅事件小红你的鞋子到了小明你的鞋子到了

JavaScript中有五种异步编程的方式

1.回调函数
2.事件监听
3.发布订阅
4.Promise对象
5.Generator函数

发布/订阅 模式
比方说淘宝购物，小红在淘宝上看到一双鞋，但是卖光了，小红联系卖家什么时候有货，卖家告诉小红需要等一星期，卖家说如果喜欢可以等有货的时候
再通知你，所以小红收藏了该店铺，但是同时，小明，小花也喜欢这款鞋，也收藏了改店铺，等鞋子到了就会依次通知小红，小明，小花。
这里卖家属于发布者，小红，小明属于订阅者

function Public(){
    this.handles = {}
    //订阅事件
    this.addEventListener  = function(eventType,fn){
        if(!(eventType in this.handles)){
            this.handles[eventType] = []
        }
        this.handles[eventType].push(fn)
        console.log(this.handles)
        return this;
    },
    // 触发事件
    this.dispatchEvent = function(eventType){
        var handlerArgs = Array.prototype.slice.call(arguments,1);
        if(!this.handles[eventType]){
            throw Error("该名称未发布")
        }
        for(var i=0;i ele.name === handler.name)
            this.handles[eventType].splice(index,1)
        }
        return this;
    }
}

var publish = new Public();
publish.addEventListener("xiaohong",function tellHong(data){
    console.log(`${data}`)
})
publish.addEventListener("xiaoming",function tellMing(data){
    console.log(`${data}`)
})
publish.dispatchEvent("xiaohong","小红你的鞋子到了")
publish.dispatchEvent("xiaoming","小明你的鞋子到了")
publish.removeEventListener("xiaohong")

海外云主机服务器托管发布订阅模式订阅发布模式 DTS 订阅发布模式订阅模式

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

转载请注明本文地址：https://www.ucloud.cn/yun/109418.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