实现观察者模式

事件监听机制，是一种观察者模式实现

针对问题去写，感觉有针对性好一些

function PubSub() {
  this.handler = {}
}

PubSub.prototype.on = function(type, handle) {
  if (!this.handles[type]) {
    return false
  }
  this.handles[type].push(handle)
}

PubSub.prototype.emit = function () {
  let type = Array.prototype.shift.call(arguments) // shift，改变原数组，返回首位
  // 如果没有事件，返回
  if (!this.handler[type]) return false
  // 找到事件对应的回调数组
  for (let i; i < this.handler[type].length; i++) {
    let handle = this.handler[type][i]
    handle.apply(this, arguments) // 理解下这个this
  }
}

PubSub.prototype.off = function (type, handle) { // handle 是一个函数引用
  let handles = this.handler[type]
  if (handles) {
    if (!handle) { // 没有回调的时候，就清空全部
      handles.length = 0  // 清空数组  
    } else {
      for (let i = 0; i < handles.length; i++) {
        let _handle = handles[i]
        if (_handle === handle) {
          handle.splice(i, 1)
        }
      }
    }
  }
}

另一种

大体的架子，里面有一个立即执行函数

    const Observe = (function () {
        //防止消息队列暴露而被篡改，将消息容器设置为私有变量
        let __message = {};
        return {
            //注册消息接口
            on : function () {},
            //发布消息接口
            subscribe : function () {},
            //移除消息接口
            off : function () {}
        }
    })();

EventBus方式

class EventBus {
  constructor() {
    this.events = {}
  }

  on(key, cb) { this.events[key].push(cb) }

  trigger(key, args) { 
    this.events[key].forEach(function (cb) {
      cb.call(this, ...args)
    })
  }
  
  remove() {}
}

const event = new EventBus()

参考

JavaScript设计模式之观察者模式