首页教程软件教程正文

前端组件通信和设计模式详解

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 948 浏览 2205 个字

摘要 :

文章目录一、前端全局共享方式 1.1 provide/inject：Vue跨层级通信的“捷径” 1.2 pinia：Vue的集中式状态管理“利器” 1.3 EventBus（事件总线）：基于发布订阅模式的通……

文
章
目
录

一、前端全局共享方式

1.1 provide/inject：Vue跨层级通信的“捷径”
1.2 pinia：Vue的集中式状态管理“利器”
1.3 EventBus（事件总线）：基于发布订阅模式的通信桥梁

二、深入理解emit机制
三、EventEmitter：发布订阅者模式的具体实现

3.1 初始化与订阅方法
3.2 发布事件方法
3.3 取消订阅方法

四、前端常考设计模式

4.1 单例模式
4.2 代理模式
4.3 工厂模式

今天咱们就来深入探讨一下前端的全局共享方式、emit机制、EventEmitter的实现，还有那些在面试和实际开发中经常遇到的设计模式。

一、前端全局共享方式

1.1 provide/inject：Vue跨层级通信的“捷径”

在Vue框架中，provide/inject是一组用于跨层级组件通信的实用工具。通常在顶层组件里使用provide来提供数据或者方法，那些深深嵌套在组件树里的子组件，不用再通过一层一层传递props这种繁琐的方式获取数据了，直接用inject就能拿到共享的内容，这可大大简化了数据在组件树中的传递流程，让代码变得更简洁。

1.2 pinia：Vue的集中式状态管理“利器”

pinia是一个独立于组件之外的状态管理库，专门为Vue应用而生。它能把应用里的状态统一抽取出来进行管理，就像把家里的杂物都分类整理到一个地方，找起来和整理起来都更方便。这种集中式管理的方式，让状态的更新和访问都变得更清晰、更好维护，尤其在大型应用处理复杂业务逻辑的时候，pinia的优势就更明显了。

1.3 EventBus（事件总线）：基于发布订阅模式的通信桥梁

EventBus是基于发布订阅者模式实现组件间通信的重要方式。它可以用来共享数据和方法，只要组件想使用这些共享内容，订阅对应的事件就行。mitt就是一个很常用的轻量级EventBus实现库，用起来特别方便。

二、深入理解emit机制

emit在父子组件以及兄弟组件的通信过程中起着关键作用。子组件通过emit触发父组件定义好的自定义事件，而父组件则用v-on来监听这些事件。比如说，父组件给子组件传递了一些数据，要是父组件想修改这些数据，就可以监听子组件通过emit触发的事件，根据事件的名称（也就是emit里的key）来决定执行什么操作。

三、EventEmitter：发布订阅者模式的具体实现

发布订阅者模式在编程里很常见，也非常重要，EventEmitter类就是这个模式的典型实现。下面咱们一步一步来看它的代码实现：

3.1 初始化与订阅方法

class EventEmitter {
    constructor() {
      this.cache = {};// 用于存储事件及对应的处理函数集合   
    }
    on(name, fn) {
      // 建立事件与处理函数的订阅关系
      if (this.cache[name]) {
        this.cache[name].push(fn)
      } else {
        this.cache[name] = [fn]
      }
    }
}

在这段代码里，constructor方法初始化了一个cache对象，这个对象用来存放事件和对应的处理函数。on方法的作用是建立事件和处理函数之间的订阅关系。如果cache里已经有这个事件了，就把新的处理函数添加到对应的数组里；要是没有，就创建一个新数组，再把处理函数放进去。

3.2 发布事件方法

    emit(name, ...args) { // 发布者发布消息的方式
        if (this.cache[name]) {
            let tasks = this.cache[name].slice();
            tasks.forEach(fn => fn(...args));
        }
    }

emit方法是用来发布事件的。当cache里有这个事件的时候，先获取这个事件对应的处理函数数组的副本tasks，然后一个一个地执行这些处理函数，并且把传进来的参数args也一起传进去。

3.3 取消订阅方法

    off(name, fn) {
        let tasks = this.cache[name];
        if (tasks) {
          const index = tasks.findIndex(f => f === fn);
          if (index >= 0) {
            tasks.splice(index, 1);
          }
        }
    }

off方法用于取消订阅。它先找到指定事件对应的处理函数数组tasks，要是这个数组存在，就去查找想要取消订阅的处理函数的索引。一旦找到了，就从数组里把这个函数删掉。