js发布订阅功能实现

/**
 * 发布订阅功能
 * @param {function} subscribe 订阅功能
 * @param {function} publish 发布通知
 * @param {function} remove 移除订阅功能
 */
export const observer = {
  eventList : [],
  subscribe : function(key,fn){
    if(isEmpty(key) || !fn) {
      return
    }else {
      let item = {
        key,
        fn
      }
      this.eventList.push(item)
    }
  },
  publish : function() {
    const [key, ...others] = [...arguments]
    let event = this.eventList.filter(e => e.key === key)
    if(isEmpty(event)) {
      return
    }else {
      event.forEach(e => {
        e.fn.apply(this, others)
      })
    }
  },
  remove: function(key, fn) {
    if(!key) return 
    for(let i=0;i<this.eventList.length;i++) {
      // 如果没有传递fn,则删除所有符合key的事件
      if(!fn) {
        if(this.eventList[i].key === key) {
          this.eventList.splice(i,1)
        }
      } else {
        // 如果传递fn,则删除key与fn一致的监听对象
        if(this.eventList[i].key === key && this.eventList[i].fn === fn) {
          this.eventList.splice(i,1)
        }
      }
    }
  }
}

具体使用比如说某个管理界面的数据修改/新增/删除后，在界面某个部分需要同步更新。我的功能放在了utils文件下，自己注意下。

// 订阅对应事件
this.utils.observer.subscribe('key', () => {
      // 对应操作，比如重新请求接口
    })

// 例：管理界面操作接口成功过后调用，发布事件，保证标识的key一致
this.utils.observer.publish('key')