Event 与 PubSub

如题,这两基本是一个东西,Event是绑在对象上的,PubSub针对全局。

使用Event完全可以代替PubSub的工作。我就这么干过,比如 export default new Miku.Event()

所以说只要妹妹(Event)就可以了,并不需要姐姐(PubSub)!

一个Event对象

const Event = {
    evs:{}
    ,on(s,f){
        return !this.evs[s] ?this.evs[s]=[f]: this.evs[s].push(f);
    }

    //..

};
const o = {};
Object.assign(o,Event);
o.on(‘miku-miku-miku‘,_=>{});

最初用这种模式的时候,我就是用的上面那代码。但这么做evs对象就暴漏了出来,没法保证evs对象不被覆盖,这会产生冲突!

我们可以对这个对象加一层闭包,在Event对象相关方法的作用域中添加一个变量。

const MxEvent = o=>{
    const evs = Object.create(null);
    const Event = {
        on(s,f){
            return !evs[s] ?evs[s]=[f]: evs[s].push(f);
        }
        //...
    };
    return Object.assign(o,Event);
}

现在这样子基本没问题了。。但还是有坑,如果这个o对象被用作了原型对象,或者用作了assign的target,那么它的相关Event绑定的事件也被继承了下去,订阅的事件就混在一起了!

所以Event相关方法要是不可枚举的 ,最终这么写。

const MxEvent = o=>{
    const evs = Object.create(null);
    return Object.defineProperties(o , {
        on : {
            value(s,f){
                return !evs[s] ?evs[s]=[f]: evs[s].push(f);
            }
            ,writable:true
        }

        //...

    })
}

const o  = MxEvent({});
o.on(‘miku-miku-miku‘,_=>_);
const o2 = MxEvent(Object.assign(o,{b:‘b‘}));
//并不会对o发布
o2.trigger(‘miku-miku-miku‘);

我代码没写全,trigger不想写了(实现很简单)。。上面这段代码仅针对es5+的浏览器,现在普及也还好吧?

完整的Event还有remove、once等方法,可能需要命名空间划分的功能,这些都可以实现的。我就不写了,主要是扯了一下Event模式的封装~

时间: 2024-12-20 16:23:36

Event 与 PubSub的相关文章

javascript发布订阅pubsub模式

首先使用数组缓存订阅者订阅的消息,当订阅者订阅消息的时候,把订阅的消息push到指定消息的队列中,当发布者发布消息的时候,我们遍历执行push到指定消息队列中的回调事件. var Pubsub=(function(){ var eventObj={}; return { subscribe:function(event,fn){ eventObj[event]=fn }, publish:function(event){ if(eventObj[event]) eventObj[event]()

C#学习日记24----事件(event)

事件为类和类的实例提供了向外界发送通知的能力,实现了对象与对象之间的通信,如果定义了一个事件成员,表示该类型具有 1.能够在事件中注册方法 (+=操作符实现). 2.能够在事件中注销方法(-=操作符实现). 3.当事件被触发时注册的方法会被通知(事件内部维护了一个注册方法列表).委托(Delegate)是事件(event)的载体,要定义事件就的要有委托.  有关委托的内容请点击 委托(De... www.mafengwo.cn/event/event.php?iid=4971258www.maf

JavaScript实现的发布/订阅(Pub/Sub)模式

JavaScript实现的发布/订阅(Pub/Sub)模式时间 2016-05-02 18:47:58  GiantMing's blog原文  http://giantming.net/javascriptshi-xian-de-fa-bu-ding-yue-pub-sub-mo-shi/主题 JavaScript 观察者模式前段时间看了一下发布订阅者模式(也叫观察者模式),今天看<基于mvc的JavaScript的富应用开发>又看到了它,这个设计模式是非常有用的,正好写篇博客来分享一下.(

JS 设计模式之发布-订阅

1.JS ES6 定义类,并包含两个方法:subscribe(订阅).publish(发布). class PubJs { constructor () { // 订阅名称列表 this.event_list = {}; } // 订阅 subscribe (eventName, callback) { } // 发布 publish (eventName, ...args) { } } 2.编写订阅者基础逻辑: 允许订阅者订阅信息: 如果当前订阅关键字已存在,则更新订阅回调,否则,新增关键字,

基于Server-Sent Event的简单在线聊天室

一.Web即时通信 所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览知乎时如果有人回答了我们的问题,知乎就会即时提醒我们,再比如现在电子商务的在线客服功能.这些能大大提高用户体验的功能都是基于Web即时通信实现的. 普通HTTP流程 客户端从服务器端请求网页 服务器作出相应的反应 服务器返回相应到客户端 而由于HTTP请求是无状态的,也就是说每次请求完成后,HTTP链

Distributed Phoenix Chat with PubSub PG2 adapter

转自:https://www.poeticoding.com/distributed-phoenix-chat-with-pubsub-pg2-adapter/ In this article we’ll see how to cluster the Phoenix Chat nodes, using a really powerful functionality embedded in BEAM (the Elixir/Erlang VM), for easily communicate be

Linux-hexdump命令调试event驱动—详解(13)

hexdump: 查看文件的内容,比如二进制文件中包含的某些字符串,通常用来调试驱动用 1.调试 键盘驱动 讲解 当我们insmod挂载了键盘驱动后,找到键盘驱动被放在event1设备里, 此时没有按键按下,所以event1里面的数据是没有的,那么数据又是从来哪里来? 通过键盘驱动的read函数,若有按键按下,就会上传按键数据给用户层,此时的用户层就是hexdump 因为键盘驱动的input_handler 是:evdev_handler 所以键盘驱动的read函数是: evdev_handle

Extjs event domain 研究

Listeners and Event Domains In Ext JS 4.2, the MVC event dispatcher was generalized with the introduction of event domains. These event domains intercepted events as they were fired and dispatched them to controllers controlled by selector matching.

MYSQL 定时自动执行EVENT

MySQL从5.1开始支持EVENT功能,类似Oracle和MSSQL的定时任务job功能.有了这个功能之后我们就可以让MySQL自动的执行存储过程来实现数据汇总等功能了,不用像以前哪样手动操作完成了.下面我们来测试下,在MYSQL中如何自动执行指定存储过程,实现相关功能. 一.创建测试表CREATE TABLE EVENT_table(id INT auto_increment PRIMARY KEY NOT NULL,conent VARCHAR(80))ENGINE=INNODB DEFA