Javascript實(shí)現(xiàn)Vue跨組件通信的方法詳解
概述
我們都知道。
xxx.$on可以訂閱一個(gè)消息。
xxx.$emit可以發(fā)布一個(gè)消息。
xxx.$off可以取消訂閱一個(gè)消息。
思路要清晰
這個(gè)過(guò)程涉及到的幾個(gè)概念。
訂閱過(guò)程：
消息，肯定要區(qū)分，來(lái)個(gè)name。
消息也要有事做，來(lái)個(gè)handler。
一堆消息，要有地方放，來(lái)個(gè)arr。
訂閱時(shí)，交代叫什么name，干什么handler。
發(fā)布過(guò)程：
發(fā)布時(shí)，交代叫什么，來(lái)個(gè)name。
發(fā)布也可能有一些參數(shù)，來(lái)個(gè)param。
發(fā)布時(shí)，交代叫什么name，傳遞參數(shù)param。
取消訂閱過(guò)程：
取消訂閱，肯定要知道名字，來(lái)個(gè)name。
取消訂閱時(shí)，交代要取消的name。
實(shí)現(xiàn)要迅猛
代碼不多
class EventBus {
constructor() {
this.arr = [];
}
on = (name, fn) => {
let filter = this.arr.filter(v => v.name === name);
if (filter.length === 0) {
this.arr.push({
name, fn
})
}
}
emit = (name, param) => {
let filter = this.arr.filter(v => v.name === name);
if (filter.length === 1) {
filter[0].fn(param);
}
}
off = (name) => {
this.arr = this.arr.filter(v => v.name !== name);
}
}
構(gòu)造：初始化事件數(shù)組。
實(shí)例的on：查重，如果重復(fù)了就啥都不干。沒(méi)重復(fù)就push。
實(shí)例的emit：查重，如果有這事件就調(diào)用。
實(shí)例的off：篩選賦值。
測(cè)試效果
代碼不多。
let bus = new EventBus();
bus.on('say', (msg) => {
console.log(msg);
});
let i = 0;
let timer = setInterval(() => {
if (i >= 30) {
bus.off('say');
clearInterval(timer);
return;
}
bus.emit('say', "你好，世界！" + i++)
}, 1000);
新建一個(gè)消息中心。
訂閱一個(gè)事件。
計(jì)時(shí)器，每隔一秒發(fā)布該消息。
30下后，取消訂閱。
運(yùn)行結(jié)果：
30秒后：
查看是否取消成功：
成功！
優(yōu)化
使用ES6的Map代替數(shù)組，效率更好。
class EventBus {
map = new Map();
on = (name, handler) => {
if (!this.map.has(name)) {
this.map.set(name, handler);
}
}
emit = (name, param) => {
let handler = this.map.get(name);
if (handler !== null) {
handler(param);
}
}
off = (name) => {
this.map.delete(name);
}
}
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
兩個(gè)等號(hào)直接比較值，但是類型不能相互轉(zhuǎn)換的時(shí)候報(bào)錯(cuò)2010-04-04
BootStrap實(shí)現(xiàn)帶有增刪改查功能的表格(DEMO詳解)
這篇文章主要介紹了BootStrap實(shí)現(xiàn)帶有增刪改查功能的表格，表格封裝了3個(gè)版本，接下來(lái)通過(guò)本文給大家展示下樣式及代碼，對(duì)bootstrap增刪改查相關(guān)知識(shí)感興趣的朋友一起通過(guò)本文學(xué)習(xí)吧2016-10-10
Proxy是es2015 標(biāo)準(zhǔn)規(guī)范加入的語(yǔ)法，很可能你只是聽(tīng)說(shuō)過(guò)，但并沒(méi)有用過(guò)，畢竟考慮到兼容的問(wèn)題，不能輕易地使用Proxy特性。但現(xiàn)在隨著各個(gè)瀏覽器的更新迭代，Proxy的支持度也越來(lái)越高：而且使用Proxy進(jìn)行代理和劫持，也漸漸成為了趨勢(shì)。2021-05-05
這篇文章主要介紹了javascript中HTMLDOM操作詳解,需要的朋友可以參考下2014-12-12
JavaScript數(shù)據(jù)綁定實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 MVVM 庫(kù)
MVVM 是 Web 前端一種非常流行的開(kāi)發(fā)模式，利用 MVVM 可以使我們的代碼更專注于處理業(yè)務(wù)邏輯而不是去關(guān)心DOM 操作。接下來(lái)通過(guò)本文給大家介紹JavaScript使用數(shù)據(jù)綁定實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 MVVM 庫(kù)，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
JavaScript實(shí)現(xiàn)表單注冊(cè)、表單驗(yàn)證、運(yùn)算符功能
在本篇文章里我們給大家整理了關(guān)于JavaScript中表單注冊(cè)、表單驗(yàn)證、運(yùn)算符的代碼示例，有興趣的朋友們可以測(cè)試學(xué)習(xí)下。2018-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript中的this顯示綁定和硬綁定，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的可以了解一下2022-10-10
實(shí)例分析js和C#中使用正則表達(dá)式匹配a標(biāo)簽
本文通過(guò)2個(gè)實(shí)例，對(duì)比分析了在js和c#中使用正則表達(dá)式匹配a標(biāo)簽的異同，小伙伴們自己參考下吧，有利于深刻理解正則表達(dá)式的使用。2014-11-11
這篇文章主要介紹了JS模擬bootstrap下拉菜單效果,結(jié)合完整實(shí)例形式分析了javascript動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
JavaScript下一版本標(biāo)準(zhǔn)ES6的Set集合使用詳解
ES6：全稱ECMAScript 6.0，是JavaScript語(yǔ)言的國(guó)際標(biāo)準(zhǔn)，JavaScript是ECMAScript的實(shí)現(xiàn)。今天我們就來(lái)學(xué)習(xí)一下ES6的Set集合的使用2023-02-02