JavaScript中EventBus實現(xiàn)對象之間通信
一、什么是EventBus?
我個人理解:EventBus 可以實現(xiàn)對象之間的通信,當(dāng)數(shù)據(jù)或某些特性發(fā)生改變時,能自動監(jiān)聽事件作出一些改變。還有更多的內(nèi)容可能我還沒有拓寬。怎么實現(xiàn)通信呢?這里通過一個例子可以理解到其中的精髓。
二、一個簡單的例子
add(){
data+=1;
render(data);
},
minus(){
data-=1;
render(data);
},
multiply(){
data*=2;
render(data);
},
divide(){
data/=2;
render(data);
},
以上代碼是進(jìn)行加減乘除的運算,數(shù)據(jù)data改變后,對數(shù)據(jù)data進(jìn)行渲染,調(diào)用到渲染函數(shù)render();
有沒有覺得這樣很麻煩,代碼重復(fù)非常多,但是想表達(dá)的意思就是一個:data 只要進(jìn)行更新,就調(diào)用一次渲染函數(shù)render()
問題來了:有沒有辦法簡化呢?只要data一改變,就自動調(diào)用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'
}
/* 調(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ù),就會使eventbus.trigger('updataed:xx.data')觸發(fā),然后事件監(jiān)聽就會觸發(fā),自動調(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時的還能有更多的變樣,可以覆蓋重寫父類方法或者再添加一些方法。
到此這篇關(guān)于JavaScript中EventBus實現(xiàn)對象之間通信的文章就介紹到這了,更多相關(guān)JavaScript EventBus對象通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JS addEventListener()和attachEvent()方法實現(xiàn)注冊事件
- JS事件循環(huán)機制event loop宏任務(wù)微任務(wù)原理解析
- Js on及addEventListener原理用法區(qū)別解析
- javascript事件循環(huán)event loop的簡單模型解釋與應(yīng)用分析
- js中addEventListener()與removeEventListener()用法案例分析
- node.js中對Event Loop事件循環(huán)的理解與應(yīng)用實例分析
- node.JS事件機制與events事件模塊的使用方法詳解
- JavaScript 鼠標(biāo)事件(MouseEvent)案例講解
相關(guān)文章
基于layui內(nèi)置模塊(element常用元素的操作)
今天小編就為大家分享一篇基于layui內(nèi)置模塊(element常用元素的操作),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
swiper動態(tài)改變滑動內(nèi)容的實現(xiàn)方法
JavaScript Event學(xué)習(xí)第四章 傳統(tǒng)的事件注冊模型
javascript支持IE和firefox(FF)的漸變透明效果
JavaScript實現(xiàn)自己的DOM選擇器原理及代碼
微信小程序開發(fā)之實現(xiàn)自定義Toast彈框

