一、什么是EventBus?

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

二、一個簡單的例子

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

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

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

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

三、代碼演示實例

const eventbus=$({}); // 使用jQuery庫創(chuàng)建了一個eventbus。let xx = { data:{ n:100, }}updata(data){ Object.assign(xx.data,data); //批量賦值 eventbus.trigger(’updataed:xx.data’); //觸發(fā)事件,事件名為：’updataed:xx.data’}/* 調用jquer封裝的事件監(jiān)聽函數(shù) */eventbus.on(’updataed:xx.data’,()=>{ render(xx.data);})/* 改進后的加減乘除函數(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});}

只要一調用updata()函數(shù)，就會使eventbus.trigger(’updataed:xx.data’)觸發(fā)，然后事件監(jiān)聽就會觸發(fā)，自動調用render()函數(shù)進行渲染

四、使用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(); //必須繼承父類的構造函數(shù)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實現(xiàn)對象之間通信的文章就介紹到這了,更多相關JavaScript EventBus對象通信內容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！