快捷導(dǎo)航

JavaScript中EventBus實(shí)現(xiàn)對(duì)象之間通信

更新時(shí)間：2020年10月18日 16:56:12 作者：soloplayer

這篇文章主要介紹了JavaScript中EventBus實(shí)現(xiàn)對(duì)象之間通信，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、什么是EventBus?

我個(gè)人理解：EventBus 可以實(shí)現(xiàn)對(duì)象之間的通信，當(dāng)數(shù)據(jù)或某些特性發(fā)生改變時(shí)，能自動(dòng)監(jiān)聽事件作出一些改變。還有更多的內(nèi)容可能我還沒有拓寬。怎么實(shí)現(xiàn)通信呢？這里通過一個(gè)例子可以理解到其中的精髓。

二、一個(gè)簡單的例子

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

以上代碼是進(jìn)行加減乘除的運(yùn)算，數(shù)據(jù)data改變后，對(duì)數(shù)據(jù)data進(jìn)行渲染，調(diào)用到渲染函數(shù)render();

有沒有覺得這樣很麻煩，代碼重復(fù)非常多，但是想表達(dá)的意思就是一個(gè)：data 只要進(jìn)行更新，就調(diào)用一次渲染函數(shù)render()

問題來了：有沒有辦法簡化呢？只要data一改變，就自動(dòng)調(diào)用render()函數(shù)

三、代碼演示實(shí)例

const eventbus=$({});  // 使用jQuery庫創(chuàng)建了一個(gè)eventbus。

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

updata(data){
  Object.assign(xx.data,data);  //批量賦值

  eventbus.trigger('updataed:xx.data');  //觸發(fā)事件,事件名為：'updataed:xx.data'
}

/* 調(diào)用jquer封裝的事件監(jiān)聽函數(shù) */
eventbus.on('updataed:xx.data',()=>{
  render(xx.data);
})

/* 改進(jìn)后的加減乘除函數(shù) */

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});
}

只要一調(diào)用updata()函數(shù)，就會(huì)使eventbus.trigger('updataed:xx.data')觸發(fā)，然后事件監(jiān)聽就會(huì)觸發(fā)，自動(dòng)調(diào)用render()函數(shù)進(jìn)行渲染

四、使用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();  //必須繼承父類的構(gòu)造函數(shù)constructor
  }
}

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

為何要進(jìn)行class 封裝和繼承EventBus？

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

到此這篇關(guān)于JavaScript中EventBus實(shí)現(xiàn)對(duì)象之間通信的文章就介紹到這了,更多相關(guān)JavaScript EventBus對(duì)象通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: