一、什麼是EventBus?

我個人理解：EventBus 可以實現物件之間的通訊，當資料或某些特性發生改變時，能自動監聽事件作出一些改變。還有更多的內容可能我還沒有拓寬。怎麼實現通訊呢？這裡通過一個例子可以理解到其中的精髓。

二、一個簡單的例子

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

以上程式碼是進行加減乘除的運算，資料data改變後，對資料data進行渲染，呼叫到渲染函式render();

有沒有覺得這樣很麻煩，程式碼重複非常多，但是想表達的意思就是一個：data 只要進行更新，就呼叫一次渲染函式render()

問題來了：有沒有辦法簡化呢？只要data一改變，就自動呼叫render()函式

三、程式碼演示例項

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()函式，就會使eventbus.trigger('updataed:xx.data')觸發，然後事件監聽就會觸發，自動呼叫render()函式進行渲染

四、使用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')

為何要進行class 封裝和繼承EventBus？

答：為了讓程式碼更加格式化，不僅在這裡能用到EventBus，在其他地方也能使用上。尤其在模組化的操作中，封裝+繼承這些就顯得十分的重要。這樣能讓程式碼有更好的維護性。其他模組使用到eventbus時的還能有更多的變樣，可以覆蓋重寫父類方法或者再新增一些方法。

到此這篇關於JavaScript中EventBus實現物件之間通訊的文章就介紹到這了,更多相關JavaScript EventBus物件通訊內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！