JavaScript의 EventBus는 객체 간 통신을 수행합니다.

1. EventBus란 무엇입니까?
저는 개인적으로 이해합니다. EventBus는 대상 간의 통신을 실현할 수 있고 데이터나 특정한 특성이 바뀔 때 자동으로 이벤트를 감청하여 변경할 수 있습니다.아직 더 많은 내용이 있습니다.어떻게 통신을 실현합니까?여기에는 하나의 예를 통해 그 중의 정수를 이해할 수 있다.
간단한 예

add(){
  data+=1;
  render(data);
},
minus(){
  data-=1;
  render(data);
},
multiply(){
  data*=2;
  render(data);
},
divide(){
  data/=2;
  render(data);
},

상기 코드는 가감승제의 연산으로 데이터 데이터가 변경된 후 데이터 데이터를 렌더링하여 렌더링 함수render () 로 호출합니다.
이렇게 번거롭다고 생각하십니까? 코드 중복이 매우 많지만 표현하고자 하는 뜻은 다음과 같습니다. 데이터는 업데이트만 하면 렌더링 함수render () 를 호출합니다.
질문이 왔습니다. 간소화할 방법이 있습니까?데이터가 바뀌면render () 함수를 자동으로 호출합니다
3. 코드 프레젠테이션 실례

const eventbus=$({});  //  jQuery eventbus。

let xx = {
  data:{
    n:100,
  }
}

updata(data){
  Object.assign(xx.data,data);  // 

  eventbus.trigger('updataed:xx.data');  // , ：'updataed:xx.data'
}

/*  jquer  */
eventbus.on('updataed:xx.data',()=>{
  render(xx.data);
})

/*   */

add(){
  updata({n:xx.data.n+1});
},
minus(){
  updata({n:xx.data.n-1});
},
multiply(){
  updata({n:xx.data.n*2});
},
divide(){
  updata({n:xx.data.n/2});
}

updata () 함수를 호출하면 이벤트 버스가 됩니다.trigger ('updataed: xx.data') 가 터치하고 이벤트 감청이 터치하며 렌더링 () 함수를 자동으로 호출합니다
넷째, class 패키지로 + EventBus 상속

class EventBus{
  constructor(){
    this.eventbus=$(window);  // jquery eventbus window 
  }
  on(eventName,fn){
    this.eventbus.on(eventName,fn);
  }
  trigger(eventName){
    this.eventbus.trigger(eventName);
  }
  off(eventName,fn){
    this.eventbus.off(eventName,fn);
  }
}

const eventbus=new EventBus();

eventbus.trigger('updated:xx.data')
eventbus.on('updated:xx.data',()=>{
  render(xx.data);
})
eventbus.off('updated:xx.data')

/*  EventBus */

class module extends EventBus{
  constructor(){
    super();  // constructor
  }
}

module.trigger('updated:xx.data')
module.on('updated:xx.data',()=>{
  render(xx.data);
})
module.off('updated:xx.data')

클래스 패키지와 EventBus를 계승하는 이유는 무엇입니까?
답: 코드를 더욱 포맷하기 위해 여기에서 EventBus뿐만 아니라 다른 곳에서도 사용할 수 있습니다.특히 모듈화된 작업에서 봉인+계승은 매우 중요하다.이렇게 하면 코드를 더욱 잘 유지할 수 있다.다른 모듈이 이벤트버스에 사용될 때 더 많은 변형이 있을 수 있습니다. 부류를 다시 쓰거나 방법을 추가할 수 있습니다.
JavaScript에서 EventBus가 대상 간의 통신을 실현하는 것에 관한 이 글은 여기에 소개되었습니다. 더 많은 JavaScript EventBus 대상 통신 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!