前端常用设计模式之观察者模式

前情

在前端开发越来越复杂的今天，越来越需要一些设计模式来提高开发质量和效率

定义

属于行为型模式，当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。

代码演示

自定义事件监听器，注册一批方法，一次触发

let obj1 = {
  fn() {
    console.log('fn1');
  }
}

let obj2 = {
  fn() {
    console.log('fn2');
  }
}

class MyEvent{
  constructor() {
    this.handles = {};
  }

  /**
   * 事件注册
   * @param {String} eventName 
   * @param {Function} fn 
   */
  addEvent(eventName, fn) {
    if (typeof this.handles[eventName] === 'undefined') {
      this.handles[eventName] = [];
    }
    this.handles[eventName].push(fn);
  }

  /**
   * 事件触发
   * @param {String} evnetName 
   */
  trigger(evnetName) {
    if (!(evnetName in this.handles)) {
      return ;
    }
    this.handles[evnetName].forEach(fn => {
      fn();
    })
  }
}

let eventObj = new MyEvent();
// 事件注册
eventObj.addEvent('myevent', obj1.fn);
eventObj.addEvent('myevent', obj2.fn);

// 事件触发
setTimeout(() => {
  eventObj.trigger('myevent');
}, 1100);