【JS】形象生動的觀察者和發佈訂閱模式

觀察者模式

//Subject(小寶寶)
class Subject{
    constructor(name){
        this.name = name
        //小寶寶狀態
        this.state = '開心'
        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
    }
    //觀察小寶寶的狀態
    update(subject){
        console.log(this.name+':'+subject.name+'當前狀態是:'+subject.state)
    }
}

let baby = new Subject('小寶寶')

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

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

baby.setState('不開心')
baby.setState('灰常開心')

發佈訂閱者模式

//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('張三訂閱:'+value)
})
e.on(function(value){
    console.log('李四訂閱:'+value)
})
e.on(function(value){
    console.log('王五訂閱:'+value)
})

//發佈
e.emit('中央日報')

最大區別

• 發佈訂閱者模式須要有一個調度中心
• 觀察者模式能夠直接讓observer觀察到object