【设计模式】形象生动的观察者/发布订阅者模式

观察者模式

//Subject(baby)
class Subject{
    constructor(name){
        this.name = name
        //baby状态
        this.state = 'happy'
        this.observers = [] //存放观察者
    }
    //需要将观察者放到自己身上
    attach(ther){
        this.observers.push(ther)
    }
    //更新观察者的状态
    setState(state){
        this.state = state
        //循环取出每个观察者
        this.observers.forEach(ther => {
            ther.update(this)
        })
    }
}

class Observer{
    constructor(name){
        this.name=name
    }
    //观察baby的状态
    update(subject){
        console.log(this.name+':'+subject.name+'当前状态是:'+subject.state)
    }
}

let baby = new Subject('baby')

let father = new Observer('father')
let mother = new Observer('mother')

baby.attach(father)
baby.attach(mother)

baby.setState('sad')
baby.setState('very happy')

发布订阅者模式

//on是订阅  emit是发布

//邮局
let e = {
    //存订阅者
    _callback:[],
    on(callback){
        this._callback.push(callback)
    },
    //发布者
    emit(value){
        this._callback.forEach(method =>{
            method(value)
        })
    }
}
//订阅
e.on(function(value){
    console.log('Alice订阅:'+value)
})
e.on(function(value){
    console.log('Bob订阅:'+value)
})
e.on(function(value){
    console.log('Jony订阅:'+value)
})

//发布
e.emit('小学生周报')

最大区别

• 发布订阅者模式需要有一个调度中心
• 观察者模式可以直接让observer观察到object
• 对于发布订阅者模式而言，发布者和订阅者是解耦的