This is the sixth day of my participation in Gwen Challenge.

What is the publish subscribe model

The publish-subscribe model defines a one-to-many dependency, one for the publisher, who is responsible for publishing events, and many for the subscribers, who can subscribe to an event. Subscribers are notified when an event is triggered.

Publish-subscribe patterns are widely used in the front end, such as event triggers, VUE component lifecycle triggers, Vue watch triggers, and nodeJS event handling.

The publish-subscribe mode aims to reduce the coupling degree between different modules of the system and decouple each other within each module.

implementation

Basic implementation

class EventBus {
  constructor() {
    this.obj = {}
  }
  on(key, fn) {
    this.obj[key] = fn;
  }
  emit(key, value) {
    this.obj[key].call(this, value); }}let eventBus = new EventBus();
// Subscribe to an event named test1
eventBus.on('test1'.(val) = > {
  console.log('test1'.'value:' + val)
});
// Subscribe to an event named test2
eventBus.on('test2'.function (val) {
  console.log('test2'.'value:' + val)
});

setTimeout(() = > {
  / / triggers test1
  eventBus.emit('test1'.1)
  / / triggers test2
  eventBus.emit('test2'.2)},1000)
Copy the code

Further optimization: support for multiple subscribers

class EventBus {
  constructor() {
    this.obj = {}
  }
  on(key, fn) {
    if(this.obj[key] === undefined) {this.obj[key] = []
    }
    this.obj[key].push(fn)
  }
  emit(key, value) {
    this.obj[key].map(fn= >{
      fn.call(this, value); }}})let eventBus = new EventBus();
// Subscribe to an event named test1
eventBus.on('test1'.(val) = > {
  console.log('test1'.'value:' + val+ '1')}); eventBus.on('test1'.(val) = > {
  console.log('test1'.'value:' + val + '2')});// Subscribe to an event named test2
eventBus.on('test2'.function (val) {
  console.log('test2'.'value:' + val)
});

setTimeout(() = > {
  / / triggers test1
  eventBus.emit('test1'.1)
  / / triggers test2
  eventBus.emit('test2'.2)},1000)
Copy the code

One more optimization: support for unsubscribing events

class EventBus {
  constructor() {
    this.obj = {}
  }
  on(key, fn) {
    if(this.obj[key] === undefined) {this.obj[key] = []
    }
    this.obj[key].push(fn)
  }
  emit(key, value) {
    this.obj[key].map(fn= >{
      fn.call(this, value); })}off(key,value){
    if(typeof value === 'function' && this.obj[key]){
      const index = this.obj[key].findIndex(fn= >fn === value)
      if(index ! = = -1) {this.obj[key].splice(index)
      }
    }
  }
}

let eventBus = new EventBus();
// Subscribe to an event named test1

const fn1 = (val) = > {
  console.log('test1'.'value:' + val + '1')
}
eventBus.on('test1', fn1);
eventBus.on('test1'.(val) = > {
  console.log('test1'.'value:' + val + '2')}); ;// Subscribe to an event named test2
eventBus.on('test2'.function (val) {
  console.log('test2'.'value:' + val)
});

setTimeout(() = > {
  / / triggers test1
  eventBus.emit('test1'.1)
  / / triggers test2
  eventBus.emit('test2'.2)

  eventBus.off('test1', fn1)

  eventBus.emit('test1'.1)},1000)
Copy the code

The resources

  1. Juejin. Cn/post / 684490…
  2. Juejin. Cn/post / 685041…
  3. Juejin. Cn/post / 684490…