章
目
录
今天咱们就来深入探讨一下前端的全局共享方式、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，要是这个数组存在，就去查找想要取消订阅的处理函数的索引。一旦找到了，就从数组里把这个函数删掉。
四、前端常考设计模式
4.1 单例模式
单例模式的作用就是保证一个类只有一个实例，并且提供一个全局都能访问它的入口。在前端开发里，像全局的配置对象、弹窗实例这些需要全局唯一的资源，就可以用单例模式来管理，这样能避免重复创建资源，防止出现冲突。
4.2 代理模式
代理模式就是给其他对象提供一个代理，通过这个代理来控制对原对象的访问。在前端开发场景中，它可以用来处理网络请求的缓存，或者进行权限验证。比如在真正发送网络请求之前，先通过代理看看缓存里有没有数据，或者检查一下用户有没有权限访问，这就是对请求的预处理。
4.3 工厂模式
工厂模式把对象的创建和使用分开了。通过一个工厂函数，根据不同的参数就能创建出不同类型的对象。这就好比工厂按照不同的订单生产不同的产品一样，能提高代码的可维护性和扩展性，还能减少创建对象时重复的代码。
掌握好这些前端组件通信方式和设计模式，对于咱们前端开发者来说非常重要，能帮助咱们构建出结构清晰、容易维护而且运行高效的前端应用哦。
