$on、$emit、$off全局API实现
全局自定义事件派发更新及监听是一个比较常用且实用的功能,主要用于实现项目各模块间数据传递不方便或实时数据更新等场景
首先创建全局对象handlerGather
用于存储自定义事件
const handlerGather = {};
创建$emit
方法,定义全局自定义事件并派发更新,同时将API挂载到window
对象上
/**
* 全局派发更新方法
* @param event 派发更新的事件名
* @param data 回调函数传递的数据
* @returns 返回值
*/
window.$emit = function (event, data) {
const fn = (ev, d) => {
const len = handlerGather[ev].length;
for (let i = 0; i < len; i++) {
const ele = handlerGather[ev][i];
// 派发更新数据
ele(d);
}
};
if (Array.isArray(event)) {
// 监听的事件是一个数组时
event.forEach((item) => {
fn(item, data);
});
} else {
// 监听的事件只有一个时
fn(event, data);
}
return window;
};
创建$on
方法,全局监听对应全局自定义事件,同时将API挂载到window
对象上
/**
* 全局监听方法
* @param event 监听的事件名
* @param fn 回调函数
* @returns 返回值
*/
window.$on = function (event, fn) {
if (Array.isArray(event)) {
// 监听的事件是一个数组时:遍历取出每个事件单独监听
event.forEach((item) => {
window.$on(item, fn);
});
} else {
// 监听的事件不为数组时
(handlerGather[event] || (handlerGather[event] = [])).push(fn);
}
return window;
};
创建$off
方法,销毁对应全局自定义事件,同时将API挂载到window
对象上
/**
* 销毁全局自定义事件
* @param event 需要销毁的事件名
* @returns
*/
window.$off = function (event) {
// 事件不存在则终止执行
if (!handlerGather[event]) return;
// 销毁的事件为数组时
if (Array.isArray(event)) {
event.forEach((item) => {
if (handlerGather[event]) {
// 销毁对应事件
handlerGather[event] = [];
}
});
} else {
// 销毁的事件不为数组时
handlerGather[event] = [];
}
return window;
};
使用方法
$emit
用法
window.$emit('updateEvent', {
content: '',
});
$on
用法
window.$on('updateEvent', (data) => {
console.log(data);
});
$off
用法
window.$off('updateEvent');
下载npm包直接使用
npm i global-listener --save-dev
在项目入口文件main.js
直接引入包文件即可将上述三个API注册到window
对象上在项目中直接使用
import 'global-listener';