react_event_bus_arge.js

/*
This is a test prototype coding for planning a react event-bus system
*/

class eventBus  {
  static on(event, callback) {
    document.addEventListener(event, (e) => callback(e.detail));
  }

  static dispatch(event, data) {
    document.dispatchEvent(new CustomEvent(event, { detail: data }));
  }

  static remove(event, callback) {
    document.removeEventListener(event, callback);
  }
}

class baseComponent extends eventBus {  
	constructor(){
	  super();  	          
  }
}

class myComponent1 extends baseComponent{
  constructor() {
    super();
    eventBus.on('duydum', this.soyledim);
    eventBus.on('gordum', this.gosterdim);
  }
  
  soyledim(){
  	alert('onu nasıl sevdgimi')

  }
  
  gosterdim(){
  	alert("1 resim gösteriyor.")
  }
 
}

class myComponent2 extends baseComponent{
  constructor() {
    super();
    eventBus.on('gordum', this.gosterdim);    
  }
  
   gosterdim(){
  	alert("2 resim gösteriyor.")
  }
}

class parentComponent extends baseComponent {
	constructor(){
	  super();
  }
  
  islemYap(data){
	  eventBus.dispatch('gordum', data)
  }
}



var child1 = new myComponent1();
var child2 = new myComponent2();

var app = new parentComponent()


app.islemYap('gordum');