手写$on及$emit，实现项目全局派发更新及事件监听

$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';

写在最后：欢迎关注扫码作者微信公众号奋进的技术人，获取一手技术分享⛽️