ts实现订阅发布者模块

2020-03-02  本文已影响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

上一篇 下一篇

猜你喜欢

热点阅读