Javascript實現Vue的跨組件通信的方法詳解

Posted on by

概述

我們都知道。

xxx.$on可以訂閱一個消息。

xxx.$emit可以發佈一個消息。

xxx.$off可以取消訂閱一個消息。

思路要清晰

這個過程涉及到的幾個概念。

訂閱過程：

消息，肯定要區分，來個name。

消息也要有事做，來個handler。

一堆消息，要有地方放，來個arr。

訂閱時，交代叫什麼name，幹什麼handler。

發佈過程：

發佈時，交代叫什麼，來個name。

發佈也可能有一些參數，來個param。

發佈時，交代叫什麼name，傳遞參數param。

取消訂閱過程：

取消訂閱，肯定要知道名字，來個name。

取消訂閱時，交代要取消的name。

實現要迅猛

代碼不多

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

構造：初始化事件數組。

實例的on：查重，如果重復瞭就啥都不幹。沒重復就push。

實例的emit：查重，如果有這事件就調用。

實例的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);

新建一個消息中心。

訂閱一個事件。

計時器，每隔一秒發佈該消息。

30下後，取消訂閱。

運行結果：

在這裡插入圖片描述

30秒後：

在這裡插入圖片描述

查看是否取消成功：

在這裡插入圖片描述

成功！

優化

使用ES6的Map代替數組，效率更好。

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

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容! 

推薦閱讀：