手写一个简单的观察者

push主动触发

class Observer {
  constructor() {
    this.observers = {}
  }

  add(type, func) {
  	if( !this.observers[type] ) this.observers[type] = [] 
    this.observers[type].push(func)
  }

  removeObserver(type, fn) {
    const fns = this.observers[ type ];
    if(!fns) throw new Error('没有找到要删除的观察者');
    if(!fn) {
      fns && fns.length = 0;
    } else {
		let _fns = fns.filter( item => {
			return item !== fn
		})
		fns = _fns
    }
  }

  emit(type, data) {
    try {
      this.observers[type].forEach( func => func(data) )
    } catch (error) {
      throw new Error("未找到观察者")
    }
  }

}

const obs = new Observer()

const func1 = (message) => {
  console.log("我是:" + message);
}

const func2 = (message) => {
  console.log("你是:" + message);
}

obs.add("what",func1)
obs.add("what",func2)

obs.emit("what","猪")

pull 自行触发get方法

class Observer {
  constructor() {
    this.message = null,
    this.observers = {}
  }
  add(type, func) {
    if (this.observers[type]) return this.observers[type].push(func)
    this.observers[type] = [] 
    return this.observers[type].push(func)
  }

  removeObserver(type) {
    const index = this.observers.indexOf(type);
    if(index >= 0) {
      this.observers.splice(index, 1);
    } else {
      throw new Error('没有找到要删除的观察者');
    }
  }

  emit(type, msg) {
    this.message = msg
    this.observers[type].forEach( func => func())
  }

  getMsg() {
    return this.message
  }


}


const obs = new Observer()
const func = () => {
  console.log(123);
  const message = obs.getMsg();
  console.log('我收到了信息:' + message);
}

obs.add("get",func);

obs.emit("get", '这条信息需要你自己pull')

参考文献

手写JS（五）–实现观察者模式