做了个面试题：使用TDD思想，用vue3集成自己手写的event bus。

一些集成的就比较简单就不介绍了，直接看单测

import { EventBus } from "../plugin/EventBus";
const bus = new EventBus();describe("实现：事件车（发布订阅模式）", () => {it("event bus on", () => {const muckFn = jest.fn();bus.on("event one", muckFn);expect(bus.eventsMap.size).toBe(1)});// 事件监听 on这个功能 使用muck一个fn 看bus.eventMap这个集合中的 数量 是否放入中了it("event bus emit", () => {const muckFn = jest.fn();bus.on("event one", muckFn);bus.emit("event one", '1111111111111111111');bus.emit("event one", '2222222222222222222');bus.emit("event one", '3333333333333333333');expect(muckFn).toBeCalledTimes(3)});// 发送事件 看muck的fn调用次数 是不是三次it("event bus off", () => {const muckFn = jest.fn();bus.on("event one", muckFn);bus.emit("event one", '1111111111111111111');bus.off("event one", muckFn);bus.emit("event one", '1111111111111111111');expect(muckFn).toBeCalledTimes(1)});// 主要是看off之后是否函数继续调用it("event bus once", () => {const muckFn = jest.fn();bus.once("event once", muckFn);bus.emit("event once", '1111111111111111111');bus.emit("event once", '1111111111111111111');bus.emit("event once", '1111111111111111111');bus.emit("event once", '1111111111111111111');expect(muckFn).toBeCalledTimes(1)});// 主要是看once创建的是否会接收多次});

现在开始具体实现逻辑。

首先将任务拆分：

1、实现on是要将传入的函数和事件名存储到一个数据容器中，我选择的是Set()。

2、现在先写一个类，并先要声明存储的数据容器

export class EventBus {constructor() {this.eventsMap = new Set();}
}

3、on实现：就是将这里的内容存储到容器中

on(eveName, cb) {this.eventsMap.add({eveName,callback: cb,});}

4、emit实现：在调用时寻找容器中时间名和传入的事件名相等的项，调用函数，并将参数传入

emit(eveName, ...args) {const eventSet = this.eventsMap;for (const item of eventSet) {if (item.eveName == eveName) {item.callback(...args);if (item.once) {eventSet.delete(item);}}}}

5、once实现：与on相似只是使用了一个属性标识只执行一次。

once(eveName, cb) {this.eventsMap.add({eveName,callback: cb,once: true,});}

6、off实现：就是在调用时在容器寻找与传入事件名相同的项，并删除。

off(eveName) {const eventSet = this.eventsMap;for (const item of eventSet) {if (item.eveName == eveName) {this.eventsMap.delete(item);}}}

最后的单侧结果：

7、将插件集成到vue3中：

export default {install(app) {// 挂载到原型 app.config.globalProperties 方式const eventBus = new EventBus();app.config.globalProperties.$bus = eventBus;},
};

8、在main.js使用use进行注册：

import { createApp } from "vue";
import mountEventBus from "./plugin/EventBus";
import App from "./App.vue";const app = createApp(App);
app.use(mountEventBus).mount("#app");

9、在vue3的组件内使用：

<template><div><HelloWorld></HelloWorld></div>
</template><script>
import { getCurrentInstance } from 'vue'
import HelloWorld from './components/HelloWorld.vue';
export default {components: { HelloWorld },setup() {const { proxy } = getCurrentInstance()proxy.$bus.on('hahha', (...args) => {console.log(...args);})return {}}
}
</script>

做了个面试题：使用TDD思想，用vue3集成自己手写的event bus。相关推荐

【面试题】「中高级前端面试」JavaScript手写代码无敌秘籍
大厂面试题分享面试题库前端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库 1. 实现一个new操作符 new操作符做了这些事: 它创建了一个全新的对象. 它会被执行[[Proto ...
“约见”面试官系列之常见面试题之第八十四篇之手写promise（建议收藏）
class Promise{constructor(excutor){this.value = '';this.reason = '';this.status = 'padding'this.onFu ...
java中13%(-3)_Java面试题汇总（十三）《算法分析及手写代码661-675》
661.给出下面的二叉树先序.中序.后序遍历的序列? 答:先序序列:ABDEGHCF:中序序列:DBGEHACF:后序序列:DGHEBFCA. 补充:二叉树也称为二分树,它是树形结构的一种,其特点是每 ...
php怎么做一键收获,↗ 点这里，一键收获你的研会手写跨年寄语
原标题:↗ 点这里,一键收获你的研会手写跨年寄语如果所有人祝你新年快乐那我祝你来过青大才觉得人间值得在2021前夜青大研会各部门为大家精心准备了新年手写寄语和新年祝福陪大家度过这个难忘 ...
【手写系列】透彻理解Spring事务设计思想之手写实现
事务,是描述一组操作的抽象,比如对数据库的一组操作,要么全部成功,要么全部失败.事务具有4个特性:Atomicity(原子性),Consistency(一致性),Isolation(隔离性),Dura ...
javascript算法+手写js面试题
链表 function ListNode(val, next) {this.val = (val===undefined ? 0 : val)this.next = (next===undefined ...
【2020尚硅谷Java大厂面试题第三季 04】Redis 9种数据类型使用场景，分布式锁演变步骤，lua脚本，redis事务，Redisson，Redis内存占用，删除策略，内存淘汰策略，手写LRU
1.安装redis6.0.8 2023 02 02 为:redis-7.0.8.tar.gz 2.redis传统五大数据类型的落地应用 3.知道分布式锁吗?有哪些实现方案?你谈谈对redis分布式锁的 ...
社招前端必会手写面试题集锦
查找字符串中出现最多的字符和个数例: abbcccddddd -> 字符最多的是d,出现了5次 let str = "abcabcabcbbccccc"; let num ...
社招前端常考手写面试题总结
手写 Promise const PENDING = "pending"; const RESOLVED = "resolved"; const REJECTE ...

做了个面试题：使用TDD思想，用vue3集成自己手写的event bus。

做了个面试题：使用TDD思想，用vue3集成自己手写的event bus。相关推荐

最新文章

热门文章