当前位置:   article > 正文

前端面试——设计模式之发布-订阅模式_面试题 发布订阅模式

面试题 发布订阅模式

发布订阅模式(观察者模式

定义:定义对象之间一对多的依赖关系,当一个对象状态发生改变时,所有依赖它的对象都将得到通知

发布-订阅模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响它们之间相互通信。当有新的订阅者出现时,发布者的代码不需要做任何改变,同样发布者需求改变时,也不会影响到之前的订阅者。只要约定的事件名没有变化,就可以自由地改变它们

实现发布-订阅模式

  • 指定发布者
  • 给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者
  • 最后发布消息的时候,发布者遍历缓存列表,依次触发里面存放的订阅者回调函数
  • 取消订阅:删掉缓存列表中对应的回调函数
通用的发布-订阅模式

先把发布-订阅的功能提取出来,放在一个单独的对象内

const event={
    clientList:{},
    listen:function(key,fn){
        if(!this.clientList[key]){
            this.clientList[key]=[];
        }
        this.clientList[key].push(fn);//订阅的消息加入缓存列表
    },
    trigger:function(){
        const key=Array.prototype.shift.call(arguments);
        const fns=this.clientList[key];

        //如果没有绑定对应的消息
        if(!fns||fns.length===0) return false;

        for(let i=0,fn;fn=fns[i++];){
            fn.apply(this,arguments);//arguments是调用trigger时所带上的参数
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

再定义一个installEvent函数,这个函数可以给所有对象都动态安装发布-订阅功能

const installEvent=function(obj){
    for(let key in event){
        obj[key]=event[key];
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5

测试——给售楼处对象salesOffice动态添加发布-订阅功能

const salesOffices={};
installEvent(salesOffices);

salesOffices.listen('square88',function(price){//小明订阅消息
    console.log(`价格:${price}`);
});

salesOffices.listen('square110',function(price){//小红订阅消息
    console.log(`价格:${price}`);
});

salesOffices.trigger('square88',880000);//价格:880000
salesOffices.trigger('square110',1100000);//价格:1100000
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
取消订阅的事件
event.remove=function(key,fn){//取消订阅
    const fns=this.clientList[key];
    //如果对应的key值没人订阅,直接返回
    if(!fns) return false;
    //如果没有传入回调函数,表示要取消key值对应消息的所有订阅
    if(!fn){
        fns&&(fns.length=0);
    }else{
        //反向遍历订阅的回调函数列表
        for(let i=fns.length-1;i>=0;i--){
            if(fns[i]===fn){
                //删除订阅者的回调函数
                fns.splice(i,1);
            }
        }                    
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

测试:

const fn=function(price){
    console.log(`价格:${price}`);
}

salesOffices.listen('square88',fn);//订阅
salesOffices.remove('square88');//取消订阅
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
全局的发布-订阅对象

发布-订阅模式中,可以用一个全局的Event对象来实现,订阅者不需要了解信息来自哪个发布者,发布者也不知道信息会推送给哪个订阅者,Event作为一个类似“中介”的角色,把发布者和订阅者联系起来

//全局的发布-订阅对象
const Event=(function(){
    const clientList={};

    //订阅消息
    const listen=function(...args){
        const key=args[0];
        const fn=args[1];
        if(!clientList[key]){
            clientList[key]=[];
        }
        clientList[key].push(fn);//订阅的消息加入缓存列表
    }

    //发布消息
    const trigger=function(){
        const key=Array.prototype.shift.call(arguments);
        const fns=clientList[key];

        //如果没有绑定对应的消息
        if(!fns||fns.length===0) return 0;

        for(let i=0,fn;fn=fns[i++];){
            fn.apply(this,arguments);//arguments是调用trigger传入的参数
        }
    }

    //取消订阅
    const remove=function(...args){
        const key=args[0],fn=args[1];
        const fns=clientList[key];
        //未订阅,直接返回
        if(!fns||fns.length===0) return false;
        //未传入fn,取消key所有相关的订阅
        if(!fn){
            fns&&(fns.length=0);
        }else{
            //反向遍历缓存列表
            for(let i=fns.length-1;i>=0;i--){
                if(fns[i]===fn){
                    //从缓存列表删除订阅者的回调函数
                    fns.splice(i,1);
                }
            }
        }
    }

    return {
        listen,
        trigger,
        remove
    }
})();


const fn=function(price){
    console.log(`价格:${price}`);
}
Event.listen('square90',fn);
Event.listen('square10',fn);

Event.remove('square10',fn);

Event.trigger('square90',1000);
Event.trigger('square10',3000);

//输出:价格:1000

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
模块间通信

点击a模块里的按钮,b模块显示按钮点击次数:

const a=(function(){
    let count=0;
    const btn=document.querySelector('#btn');
    btn.addEventListener('click',function(){
        Event.trigger('add',++count);
    });
})();

const b=(function(){
    const divObj=document.querySelector('#text');
    Event.listen('add',function(count){
        divObj.innerHTML=count;
    })
})();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CfrE5Twv-1637981929666)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20211113113537094.png)]

先发布再订阅

某些情况下,我们需要先将消息保存下来,等到有对象订阅它的时候,再重新安发布给订阅者。就像QQ的离线消息一样,离线消息先被保存在服务器中,接收人下次登录的时候,可以重新接收到这条消息

为了满足这类需求,可以建立一个存放离线事件的堆栈,事件发布的时候,还没有订阅者来订阅这个事件,就暂时先把发布事件的动作包裹在一个函数里,这些包装函数将会被保存在堆栈中,等到有订阅者订阅消息的时候,再遍历堆栈并且依次执行这些包装函数,也就是重新发布这些事件(离线事件生命周期只有一次,就像qq消息只会被重新阅读一次)

总结

发布-订阅模式,又称观察者模式,在实际开发中非常有用

优点:

  • 时间上的解耦
  • 对象之间的解耦

缺点:

  • 创建订阅者本身需要消耗一定的时间和内存,而当你订阅一个消息后,也许消息最后都没有发生,但这个订阅者会始终存在于内存中

  • 可以弱化对象之间的联系,如果过度使用的话,对象之间的必要联系会被深埋在背后,会导致程序难以跟踪维护和理解,特别是多个发布者和订阅者嵌套在一起的时候

发布-订阅模式的应用非常广泛,既可以用在异步编程中,也可以帮助我们完成更松耦合的代码编写,还可以用来帮助实现一些别的设计模式,比如中介者模式

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/157586
推荐阅读
相关标签
  

闽ICP备14008679号