美文网首页
ts实现订阅发布者模块

ts实现订阅发布者模块

作者: 前端小旋风 | 来源:发表于2020-03-02 13:39 被阅读0次

1实现一个调度中心的类

interface Dispatch {
    handle: (type:string) => void;
    install: (type:string) => Dispatch;
    uninstall: (type:string) => Dispatch;
    add: (type:string,callback:() => void) =>Dispatch;
}

class DispatchingCenter implements Dispatch{

    private evenetList: object;

    constructor(){
        this.evenetList = new Object();
    }

    public handle(type:string){
        if(this.evenetList.hasOwnProperty(type)){
            for(let i = 0; i < this.evenetList[type].length; i++){
                this.evenetList[type][i]();
            }
        }else{
            throw new Error('namespace not found');
        }
    }

    public install(type:string):Dispatch{
        this.evenetList[type] = [];
        return this;
    }

    public uninstall(type:string):Dispatch{
        if(this.evenetList.hasOwnProperty(type)){
        }else{
            throw new Error('namespace not found');
        }
        return this;
    }

    public add(type:string,callback:() => void):Dispatch{
        if(this.evenetList.hasOwnProperty(type)){
            this.evenetList[type].push(callback);
        }else{
            throw new Error('namespace not found');
        }
        return this;
    }
}

2.调试

let dispatch = new DispatchingCenter();
// 注册两个发布类型到调度中心
dispatch.install('a').install('b');
// 添加四个订阅者到调度中心
dispatch
    .add('a',function (){console.log('订阅者1 => 收到了发布者a的通知')})
    .add('b',function (){console.log('订阅者2 => 收到了发布者b的通知')})
    .add('a',function (){console.log('订阅者3 => 收到了发布者a的通知')})
    .add('b',function (){console.log('订阅者4 => 收到了发布者b的通知')});


// 发布通知
for(let i = 0; i < 5;i++){
    let type = i % 2 == 0 ? 'a' : 'b';
    dispatch.handle(type);
}

3.输出结果

订阅者1 => 收到了发布者a的通知
订阅者3 => 收到了发布者a的通知
订阅者2 => 收到了发布者b的通知
订阅者4 => 收到了发布者b的通知
订阅者1 => 收到了发布者a的通知
订阅者3 => 收到了发布者a的通知
订阅者2 => 收到了发布者b的通知
订阅者4 => 收到了发布者b的通知
订阅者1 => 收到了发布者a的通知
订阅者3 => 收到了发布者a的通知

此致敬礼~
结束~

我建了一个前端微信交流群,欢迎大家加入,qq中转群号:1076484243

相关文章

  • ts实现订阅发布者模块

    1实现一个调度中心的类 2.调试 3.输出结果 此致敬礼~结束~ 我建了一个前端微信交流群,欢迎大家加入,qq中转...

  • vue双向绑定原理

    1.采用数据劫持结合发布者-订阅者模式。2.有3个模块:发布者(Observer),编译器(Compile),订阅...

  • redis发送订阅

    订阅者 发送者 订阅者 python实现 (help类) 订阅者 发布者 原文地址:https://www.cn...

  • 使用Typescript手写一个Eventhub(发布订阅模式)

    什么是发布-订阅模式? 发布-订阅模式主要包含三个模块, 发布者,事件处理中心,订阅者。举个简单的例子,假设我们是...

  • 4.Redis 发布/订阅(Pub/Sub)

    Pub/Sub 订阅,取消订阅和发布实现了发布/订阅消息范式(引自wikipedia),发送者(发布者)不是计划发...

  • Vue的响应式原理

    vue数据双向绑定是通过数据劫持(Object.defineProperty)+发布者-订阅者模式来实现的 发布者...

  • defineProperty和Proxy实现响应式系统

    发布者订阅者模式 vue的响应式系统是由发布者订阅者模式来收集依赖和派发更新的,所以首先实现Dep的类 测试数据 ...

  • t-pot使用hpfeeds协议爬坑

    hpfeeds协议是一种发布者/订阅者协议,发布者/订阅者拥有着自己的发布/订阅频道,发布者可以通过发布频道发送消...

  • EventBus解读

    EventBus 基础发布者通过EventBus发布事件,订阅者通过EventBus订阅事件。当发布者发布事件时,...

  • 发布订阅者模式

    简单实现 缺点:发布者发布消息无差别发送,没有订阅该消息的订阅者也会受到该消息解决办法:增加标识key值,只订阅自...

网友评论

      本文标题:ts实现订阅发布者模块

      本文链接:https://www.haomeiwen.com/subject/itpmkhtx.html