Javascript實(shí)現(xiàn)Vue跨組件通信的方法詳解
概述
我們都知道。
xxx.$on可以訂閱一個消息。
xxx.$emit可以發(fā)布一個消息。
xxx.$off可以取消訂閱一個消息。
思路要清晰
這個過程涉及到的幾個概念。
訂閱過程:
消息,肯定要區(qū)分,來個name。
消息也要有事做,來個handler。
一堆消息,要有地方放,來個arr。
訂閱時,交代叫什么name,干什么handler。
發(fā)布過程:
發(fā)布時,交代叫什么,來個name。
發(fā)布也可能有一些參數(shù),來個param。
發(fā)布時,交代叫什么name,傳遞參數(shù)param。
取消訂閱過程:
取消訂閱,肯定要知道名字,來個name。
取消訂閱時,交代要取消的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ù)了就啥都不干。沒重復(fù)就push。
實(shí)例的emit:查重,如果有這事件就調(diào)用。
實(shí)例的off:篩選賦值。
測試效果
代碼不多。
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);
新建一個消息中心。
訂閱一個事件。
計(jì)時器,每隔一秒發(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é)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
BootStrap實(shí)現(xiàn)帶有增刪改查功能的表格(DEMO詳解)
這篇文章主要介紹了BootStrap實(shí)現(xiàn)帶有增刪改查功能的表格,表格封裝了3個版本,接下來通過本文給大家展示下樣式及代碼,對bootstrap增刪改查相關(guān)知識感興趣的朋友一起通過本文學(xué)習(xí)吧2016-10-10JavaScript數(shù)據(jù)綁定實(shí)現(xiàn)一個簡單的 MVVM 庫
MVVM 是 Web 前端一種非常流行的開發(fā)模式,利用 MVVM 可以使我們的代碼更專注于處理業(yè)務(wù)邏輯而不是去關(guān)心DOM 操作。接下來通過本文給大家介紹JavaScript使用數(shù)據(jù)綁定實(shí)現(xiàn)一個簡單的 MVVM 庫,感興趣的朋友一起學(xué)習(xí)吧2016-04-04JavaScript實(shí)現(xiàn)表單注冊、表單驗(yàn)證、運(yùn)算符功能
在本篇文章里我們給大家整理了關(guān)于JavaScript中表單注冊、表單驗(yàn)證、運(yùn)算符的代碼示例,有興趣的朋友們可以測試學(xué)習(xí)下。2018-10-10實(shí)例分析js和C#中使用正則表達(dá)式匹配a標(biāo)簽
本文通過2個實(shí)例,對比分析了在js和c#中使用正則表達(dá)式匹配a標(biāo)簽的異同,小伙伴們自己參考下吧,有利于深刻理解正則表達(dá)式的使用。2014-11-11JavaScript下一版本標(biāo)準(zhǔn)ES6的Set集合使用詳解
ES6:全稱ECMAScript 6.0,是JavaScript語言的國際標(biāo)準(zhǔn),JavaScript是ECMAScript的實(shí)現(xiàn)。今天我們就來學(xué)習(xí)一下ES6的Set集合的使用2023-02-02