【前端通信新技能】使用 CustomEvent 是一个不错的选择!

科技   2024-12-14 00:00   福建  

引言:前端组件之间的通信非常重要,也相对简单。然而,在组件间嵌套关系复杂、逻辑复杂时,我们该如何快速、安全地开发出新需求呢?

最近,我在开发团队监控项目时,发现上面引言中情况,我意识如果继续下去,开发时间会很长,风险也很大。但是,后续我发现了一项极具实用性的技术——「CustomEvent」。这一方法不仅提供了灵活的事件推送机制,还能让我们在复杂场景中独立于项目代码,实现高效的通知推送。

通过简单的几行代码,我们能够轻松创建和触发自定义事件,从而降低特殊场景下的开发风险,并且提升我们的开发效率。而且它可以非常容易的写到 React 和 Vue 项目中,这里和大家做一下分享。希望对你有所帮助!有所借鉴!

🔥🔥实现过程(千万不要错过,超级简单 case)

让我们快速上手,看看如何利用 CustomEvent 构建一个全局广播推送消息的机制:

// 创建并触发自定义事件
const customEvent = new CustomEvent('yourEventName', {  
  detail: { key'myKey'value'newValue'// 自定义数据
}); 

window.dispatchEvent(customEvent); // 推送消息

接下来,我们需要设置接收端:

// 监听自定义事件
window.addEventListener('yourEventName', (event) => {
  const { key, value } = event.detail;
  if (key === 'myKey') {
    console.log('Detected localStorage change:', value);
  }
});

通过以上代码,你已经实现了一个简洁高效的广播消息通知机制,这将大大简化组件间及跨组件间的通信。更令人兴奋的是,这种方式不仅限于内部通信,它还可以用于扩展原生事件,达到全局共享的效果!

语法细节 🎯🎯

CustomEvent 是 JavaScript 中专门用于创建和触发自定义事件的构造函数,让我们可以在网页上定义自己的事件,并携带一些自定义数据与事件监听器进行交互。具体来说:

const event = new CustomEvent(eventType, eventInit);
  • 「eventType」:事件名称(字符串)。
  • 「eventInit」(可选):一个对象,包含与事件相关的属性。
    • 「detail」:传递给事件监听器的自定义数据。
    • 「bubbles」:事件是否应该冒泡(默认为 false)。
    • 「cancelable」:事件是否可以被取消(默认为 false)。

适用场景 🤔🤔

  • 「组件间与跨组件间的通信」:无论你是在使用 React 还是 Vue,这种方式都能有效提高组件间的解耦性。通过 CustomEvent,组件可以独立工作,减少对其他组件的依赖。
  • 「扩展 JS 原生事件」:通过 CustomEvent,我们能够封装浏览器的原生事件,实现全局共享的功能。

其他场景待发现。。。

🤔1、Vue 组件之间进行通信

例如,假设我们有一个 「UserProfile」 组件和一个 「Notification」 组件。当用户在 「UserProfile」 中更新名字时,我们希望通过 「Notification」 显示一条消息。

UserProfile.vue

<template>
  <div>
    <input v-model="username" @input="updateUser" placeholder="Enter your name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      username'',
    };
  },
  methods: {
    updateUser() {
      // 创建并触发自定义事件
      const customEvent = new CustomEvent('userUpdated', {
        detail: { namethis.username },
      });
      window.dispatchEvent(customEvent);
    },
  },
};
</script>

Notification.vue

<template>
  <div v-if="message">{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message'',
    };
  },
  mounted() {
    window.addEventListener('userUpdated', (event) => {
      const { name } = event.detail;
      this.message = `User name has been changed to ${name}`;
    });
  },
  beforeDestroy() {
    window.removeEventListener('userUpdated'this.eventListener);
  },
};
</script>

将这两个组件放在你的 Vue 应用中,当 「UserProfile」 组件中的输入框内容改变时,将触发自定义事件,「Notification」 组件将接收并显示通知。

🤔2、React 组件之间进行通信

例如,假设我们有一个 「UserProfile」 组件和一个 「Notification」 组件。当用户在 「UserProfile」 中更新名字时,我们希望通过 「Notification」 显示一条消息。

UserProfile.jsx

import React, { useState } from 'react';

const UserProfile = () => {
  const [username, setUsername] = useState('');

  const updateUser = (e) => {
    const newName = e.target.value;
    setUsername(newName);

    // 创建并触发自定义事件
    const customEvent = new CustomEvent('userUpdated', {
      detail: { name: newName },
    });
    window.dispatchEvent(customEvent);
  };

  return (
    <div>
      <input value={username} onChange={updateUser} placeholder="Enter your name" />
    </div>

  );
};

export default UserProfile;

Notification.jsx

import React, { useEffect, useState } from 'react';

const Notification = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const eventListener = (event) => {
      const { name } = event.detail;
      setMessage(`User name has been changed to ${name}`);
    };

    window.addEventListener('userUpdated', eventListener);

    return () => {
      window.removeEventListener('userUpdated', eventListener);
    };
  }, []);

  return <div>{message}</div>;
};

export default Notification;

最后的思考 🧩🧩

尽管 CustomEvent 具备快速和简单的特性,在开发中我们仍然应该优先考虑使用 React 和 Vue 等框架自带的通信方式,因为这能更好地管理和维护代码。然而,在面对复杂场景、时间紧迫的情况下,CustomEvent 无疑是一个降低风险、提升效率的理想选择。

如果你对 CustomEvent 有任何疑问或想法,欢迎分享你的见解。

前端工匠
我是浪里行舟,Github博客6000+star作者,掘金、CSDN社区活跃作者,致力于打造一系列能够帮助前端工程师提高的优质文章。
 最新文章