资讯专栏INFORMATION COLUMN

JS设计模式——发布订阅模式

shiyang6017 / 2691人阅读

摘要:发布订阅模式该模式大多数用于自定义事件通用代码分析这里其中关键的一点就是利用对象键值对存储了事件,在某个事件调用存储的事件,移除事件也是通过对对象重新赋值。

发布订阅模式

该模式大多数用于自定义事件

1. 通用代码
var event = {}
event.cacheList = {}
event.on = function (key, fn) {
    if (!event.cacheList[key]) {
        event.cacheList[key] = []
    }
    event.cacheList[key].push(fn)
}
event.fire = function () {
    var key = Array.prototype.shift.apply(arguments)
    var fns = event.cacheList[key]
    if (!fns || fns.length === 0) {
        return false
    }
    for (var i = 0, len = fns.length; i < len; i++) {
        fns[i].apply(this, arguments)
    }
}
event.remove = function (key, fn) {
    var fns = event.cacheList[key]
    if (!fns || fns.length === 0) {
        return false
    }
    if (!fn) {
        fns && (fns.length = 0)
    } else {
        for (var i = 0, len = fns.length; i < len; i++) {
            if (fns[i] === fn) {
                fns.splice(i, 1)
            }
        }
    }
}
var installEvent = function (obj) {
    for (var key in event) {
        obj[key] = event[key]
    }
}
var sellOffice = {}
installEvent(sellOffice)
sellOffice.on("square200", function () {
    console.log("square200")
})
sellOffice.on("square200", function () {

    console.log("square200 2")
})
sellOffice.fire("square200")
sellOffice.remove("square200")
sellOffice.fire("square200")
2.分析

这里其中关键的一点就是利用对象键值对存储了事件,在某个事件调用存储的事件,移除事件也是通过对对象重新赋值。这里使用对象作为存储的数据格式是因为通过键查询的复杂度是1,可以快速搜索到某个键存储的函数列表。

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

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

相关文章

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

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

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

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

    baishancloud 评论0 收藏0
  • 观察者模式发布订阅模式JS

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

    Sanchi 评论0 收藏0
  • js中的一对多 - 订阅发布模式

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

    Cobub 评论0 收藏0
  • JS设计模式之Obeserver(观察者)模式、Publish/Subscribe(发布/订阅模式

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

    荆兆峰 评论0 收藏0
  • 简单理解观察者模式(pub/sub)在前端中的应用

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

    guyan0319 评论0 收藏0

发表评论

0条评论

shiyang6017

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<