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

一、观察者模式

image.png
观察者模式 ：对象间存在一对多的依赖关系，当一个对象的状态发生改变，会让所有依赖它的对象得到通知并被自动更新，这种模式就是观察者模式。

模式动机：一个观察目标可以对应多个观察者，而且这些观察者之间没有相互联系，可以根据需要增加和删除观察者，使得系统更易于扩展，这就是观察者模式的模式动机。

模式动机

解决的问题：一个对象改变需要通知所有依赖它的对象去改变。

优点：1.解耦。
2.支持广播通信。

缺点： 1.观察者太多影响性能。
2.观察者被观察者有循环依赖，观察目标会触发循环调用，可能导致系统崩溃。
3.观察者只知道目标变化，不知道目标是怎么变化。

二、js实现一个观察者模式

// 1.定义一个观察类
function Pubsub(){
    //存放事件
    this.handles = {}
}
Pubsub.prototype = {
        // 2.实现事件订阅on
        on:function(type,handle){ //type=>事件类型 handles=>事件
            if(!this.handles[type]){
                this.handles[type] = []
            }
            this.handles[type].push(handle)
        },
        // 3.注册触发事件
        emit:function(){
            const type = Array.prototype.shift.call(arguments) // shift 获取传入参数的第一个
            const handleArray = this.handles[type]
            if(!handleArray) return 
            for(let i = 0;i<handleArray.length;i++){
                const handleItem = handleArray[i]
                handleItem.apply(this,arguments)
            }
        },
        // 4.注册解除监听事件
        remove:function(type,handle){
            const handlesArray = this.handles[type]
            if(handlesArray){
                if(!handle){ 
                    handlesArray = [] // 清空数组 
                }
            }else {
                for(let i =0;i<handlesArray.length;i++){
                    const _handle = handlesArray[i]
                    if(_handle === handle){ // 事件匹配就删掉
                        handlesArray.splice(i,1)
                    }
                }
            }
        }
    }
// 调用
const observer1 = new Pubsub()
const fn = function(val){console.log('我被点击了' + val + '次')}
observer1.on('click',fn) //注册
observer1.emit('click','1') //触发
observer1.emit('click','2') // 触发
observer1.remove('click',fn) // 解除