发布订阅模式仿写Vue事件监听手写js实现

Vue组件中，可以使用 $emit，$on，$off 分别来分发、监听、取消监听事件实现组件通信，比较方便；

最近空闲时间手撸代码实现了发布订阅模式，可以进行组件通信。

话不多说，直接上代码

/*** Created by laichengliang on 2021/04/13.*/const center = {}// 事件监听
center.on = (eventName, callback) => {if (!center[eventName]) center[eventName] = []// 保存回调函数center[eventName].push(callback)
}// 事件触发
center.emit = (eventName, params) => {// 取出对应事件的回调函数const callbackArr = center[eventName]// 一一调用每一个回调事件callbackArr.map(callback => callback(params))
}// 事件移除
center.off = (eventName, callback) => {// 情况1：只传eventName，移除所有事件// 情况2：传eventName和callbackif (!callback) {center[eventName] = null} else {const callbackArr = center[eventName]// 删除指定的callback回调const result = callbackArr.filter(callbackItem => callback !== callbackItem)// 重新赋值center[eventName] = result}
}export default center

发布订阅模式仿写Vue事件监听手写js实现相关推荐

设计模式之发布订阅模式
发布--订阅模式简介发布--订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,多个观察者对象都依赖于一个目标对象,当目标对象的状态发生变化时,所有依赖于这个对象的观察者对象都会收到通知. ...
【设计模式】692- TypeScript 设计模式之发布-订阅模式
前言在之前两篇自测清单中,和大家分享了很多 JavaScript 基础知识,大家可以一起再回顾下~ 本文是我在我们团队内部"「现代 JavaScript 突击队」"分享的一篇内容 ...
Spring - 设计模式 - 发布订阅模式
目录 1.Spring的发布订阅模式组成 1.1场景说明 1.2创建UserUpdateEvent 事件 1.3创建监听类 1.4发布UserUpdateEvent 事件 1.Spring的发布订阅模 ...
JavaScript 设计模式之发布-订阅模式（上）
什么是发布订阅模式? 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在JavaScript开发中,我们一般用事件模型来替 ...
事件监听watch框架vue2.x与3.x都适用
前言: 目前正在学习vue或者对vue部分使用不太熟悉的可以跟着的我文章,打开编辑器,安装vue-cli一步步的练习,不会安装vue-cli脚手架的小伙伴可以先看这篇文章https://blog.cs ...
Vue响应式原理探究之“发布-订阅”模式
前言在面试题中经常会出现与"发布订阅"模式相关的题目,比如考察我们对Vue响应式的理解,也会有题目直接考验我们对"发布订阅"模式或者观察者模式的理解,甚至还会 ...
从发布-订阅模式到Vue响应系统
概念发布-订阅模式又称为观察者模式,它定义的是一种一对多的依赖关系,当一个状态发生改变的时候,所有以来这个状态的对象都会得到通知. 生活中的发布-订阅模式上面事发布-订阅模式的一个比较正式的解释, ...
前端Vue之发布订阅模式
目录 1.什么是发布订阅模式 2.实现简单的发布订阅 3.收集更新函数 4.触发更新函数 5.总结一个响应式数据可能会有多个视图部分都需要依赖,也就是响应式数据变化之后,需要执行的更新函数可能不止一 ...
深入Vue原理_全面剖析发布订阅模式
文章目录发布订阅模式优化优化思路思考理解发布订阅模式(自定义事件) 收集更新函数触发更新函数 6.5 总结总结写在最后本期推荐欢迎各位小伙伴们! 为大家推荐一款刷题神奇哦点击链接访问 ...

发布订阅模式仿写Vue事件监听手写js实现

发布订阅模式仿写Vue事件监听手写js实现相关推荐

最新文章

热门文章

发布订阅模式 仿写Vue事件监听手写js实现

发布订阅模式 仿写Vue事件监听手写js实现相关推荐

最新文章

热门文章

发布订阅模式仿写Vue事件监听手写js实现

发布订阅模式仿写Vue事件监听手写js实现相关推荐