js实现简单的发布订阅模式

// 发布订阅Pub/Sub

class EventBus {

  constructor() {

    // 1.处理事件对应的处理函数

    this.sub = {}

  }

  $on(event,fn) {

    if(!this.sub[event]) {

      this.sub[event] = []

    }

    this.sub[event].push(fn)

  }

  $emit(event) {

    if(this.sub[event]) {

      this.sub[event].forEach(fn => {

        fn()

      });

    }

  }

}

let vm = new EventBus()

// 订阅事件

vm.$on('click', () => {

  console.log('click')

})

vm.$on('change', () => {

  console.log('change')

})

// 发布订阅

vm.$emit('click')

vm.$emit('change')

class Dep { //主题对象
  constructor(){
    this.subs = [] //订阅者列表
  }

  notify(){ //所有的订阅者更新
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}

class Sub { //订阅者
  constructor(data){
    this.data = data;
  }

  update(){ //订阅者的更新方法, 也可自定义更新方法
    this.data = this.data + 1;
    console.log(this.data);
  }
  
}

var dep = new Dep();

dep.subs.push(new Sub(1), new Sub(2));

var pub = { //发布者
  publish(){
    dep.notify()
  }
}

pub.publish();