js设计模式-观察者模式（3）

基本观察者模式

以下Observer为观察者，当state改变时通知观察者。addObserver进行订阅，this.observers中储存了所有的观察者。notify时对观察者进行通知。

class Subject{
    constructor(){
        this.state="init"
        this.observers=[]
    }

    setState(state){//修改状态并通知观察者
        this.state=state
        this.notify(state)
    }

    notify(state){//通知
        this.observers.forEach(observer=>observer.getNewState(state))
    }

    addObserver(observer){//订阅
        this.observers.push(observer)
    }
}
class Observer{
    getNewState(state){
        console.log(`new state is: ${state}`)
    }
}
const sub=new Subject()
const observer1=new Observer()
const observer2=new Observer()
sub.addObserver(observer1)//new state is: next state
sub.addObserver(observer2)//new state is: next state
sub.setState("next state")

node中EventEmitter模块实现

参考： 循序渐进教你实现一个完整的node的EventEmitter模块
EventEmitter的使用方式：
.on（type,function）设置监听事件的名称，.emit（type,args）触发事件，传递参数

var events=require('events');
var eventEmitter=new events.EventEmitter();
eventEmitter.on('say',function(name){
    console.log('Hello',name);
})
eventEmitter.emit('say','Jony yu');

EventEmitter的基本实现：handler储存所有的事件，key为事件名称。value为数组，数组中储存监听的function

handler:{
  click:[],
change:[]
}

class EventEmitter{
    constructor(){
        this.handler={}
    }
    on(type,fn){
        //第一次添加对应type-初始化
        !this.handler[type]&&(this.handler[type]=[])
        this.handler[type].push(fn)
    }
    emit(type,args){
        if(!this.handler[type])
        {
            console.log(`did not add listener : ${type}`)
            return null
        }else {
            this.handler[type].forEach(fn=>fn(args))
        }

    }
}
let event=new EventEmitter();
event.on('say',function(str){
    console.log(str);
});
event.emit('say','hello Jony yu');