JS前端攻坚Eventbus实现更新示例详解

目录
  • 引言
    • 全局注册
    • 注册Ebus事件
    • 触发Ebus事件

引言

最近复盘了一下公司的项目，之前一直没有做过相关的Eventbus的案例实现，这篇文章大概简要的介绍一下各个部分是如何实现的，实现的方法比较简单，主要分为三个步骤，分别是全局挂载，注册，以及注册事件的触发。

全局注册

在newVue的时候需要对我们的eventbus进行挂载，挂载方式如下，newvue中包含了需要用到的方法，eventbus的注册需要在beforeCreate钩子中进行实例化，在这里我们的对eventbus在vue的原型上进行绑定，我们将this传入到Vue.prototype.eventBus上，那么eventbus的注册就已经是完成了。

new Vue({
    router,
    store,
    i18n,
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.eventBus = this;
    },
}).$mount('#app');

注册Ebus事件

EventBus的出现本身就是为了解决不同组件之间的通信问题，所以我们的注册事件和触发事件需要在不同的地方，如果是普通的父子组件之间的通信的话就没有必要用到Ebus的功能了

我们在flow页面对flow-refresh-id的事件进行注册，在这里可以看出笔者注册的是动态的一个事件，通过动态添加事件的方法可以区分出不同id之间调用相同事件的准确性，一次注册写法可以注册出多个监听事件，这里注册的是一个创建节点的事件，具体的功能这里就不做讲解了。

//flow.vue
let vm = this
vm.eventBus.$on(`flow-refresh-${vm.obj.id}`, (flowNewNodeData) => {
    vm.createNewNode(flowNewNodeData);
});

触发Ebus事件

在flow.vue页面注册好事件之后我们就可以在其他页面调用注册的事件了，通过vm.eventBus.$emit的方法在dataD.vue页面来触发已经注册好的事件。

//dataD.vue
let vm = this
 vm.eventBus.$emit(
    `flow-refresh-${this.menuActive.businessId}`,
    vm.flowNewNodeData
);

本文只是简单的记录一下实现Ebus的一整个实现过程，从全局注册Ebus插件，再到页面注册监听事件，另外一个页面触发其他页面注册的实现。

以上就是JS前端攻坚Eventbus实现更新示例详解的详细内容，更多关于JS前端Eventbus更新的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JS前端开发模拟虚拟dom转真实dom详解

    目录 引言 虚拟dom的介绍 虚拟dom转换真实dom 总结 引言 经常使用Vue或React的小伙伴肯定对虚拟dom这个词不陌生,虚拟dom的设计是推进前端框架发展的一大变革.今天带大家简单模拟下虚拟dom转换真实dom的js设计.废话不说了,上车吧. 虚拟dom的介绍 介绍 虚拟dom本质是一段js代码,用来模拟dom树的结果. 如下是对一段虚拟dom模拟真实dom的例子 真实dom <div class="box"> <p name="dog"

  • JS前端性能指标定位FMP使用详解

    目录 什么是FMP? 权重定位 权重计算 节点标记 计算权重值 第一步:简单粗暴,按大小计算 第二步:根据权重值推导主角元素 第三步:根据元素类型取时间 回归验证 什么是FMP? 可能大家对「白屏时间」这个名词并不陌生,他是「刀耕火种」年代,我们收集的页面性能指标之一,随着前端工程的复杂化,白屏时间已经没有什么实质性的意义了,取而代之的就是 FMP. 先来介绍几个与之相关的名词. FP(First Paint):首次绘制,标记浏览器渲染任何在视觉上不同于导航前屏幕内容的时间点 FCP(First

  • 前端必会的nodejs知识工具模块使用示例详解

    目录 Util 常用的判断属性,在util.types对象 常用的方法和属性 DNS OS 常用的方法和属性 Path 常用的方法和属性 总结 Util nodejs中有许多在框架中常用而我们又不知道的工具模块,本文介绍下这几个工具模块,算是自己的一个知识回顾吧. Node.js 的工具模块 常用的判断属性,在util.types对象 isDate:判断是否是日期格式的变量 isAnyArrayBuffer:判断是否是buffer isAsyncFunction:判断函数是否是异步的 let u

  • JS前端操作 Cookie源码示例解析

    目录 引言 源码分析 使用 源码 分析 set get remove withAttributes & withConverter 总结 引言 前端操作Cookie的场景其实并不多见,Cookie也因为各种问题被逐渐淘汰,但是我们不用Cookie也可以学习一下它的思想,或者通过这次的源码来学习其他的一些知识. 今天带来的是:js-cookie 源码分析 使用 根据README,我们可以看到js-cookie的使用方式: // 设置 Cookies.set('name', 'value'); //

  • JS前端错误监控捕获以及上报方法详解

    目录 前端错误捕获方法 不同场景错误处理方式 错误信息上报 ajax进行上报 image上报 sendBeacon 前端错误捕获方法 前端捕获错误的方法: try..catch:捕获的异常必须是线程执行进入到try...catch且try...catch未执行完的时候抛出来. 语法异常在语法检查阶段就报错了,线程尚未进入try...catch代码块,所以无法捕获到异常. try { a. }catch(e) { console.log('catch error:', e) } 不能捕获setTi

  • JS前端面试手写apply和bind实例

    目录 前言 apply && bind apply && bind 作用 相同点 VS 不同点 轻松手写 手写实现 apply 手写实现 bind 总结 前言 面试官问:“聊一聊你理解的 apply 和 bind.” 于是我便开始开始介绍起这两个知识点,最后顺带提了它们的实现代码. 这不提倒还好,一提就出了大事,一下子给面试官找到了面试题目. 面试官紧接着说:“既然你提到了代码,那就手写一下它俩吧.” 我一下子不知所措.虽然我了解过 apply 和 bind 手写代码,但是

  • JS前端攻坚浅析instanceof实现原理

    目录 正文 instanceof的实现 正文 无论是平时开发还是学习中,对于类型的判断总是非常的重要,常见的类型判断方法有很多,对于每种比较常用的api我们需要对其进行一定的了解,才能更好的判断其中的实现方法,对Js的了解程度才能更深,这篇文章带大家了解一下instanceof的实现 instanceof的实现 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上(来自MDN) 我们先来看下instanceof的用法,有点类似于对于一个父类,生

  • JS前端重新部署通知用户刷新网页

    目录 1.目标场景 2.思考解决方案 3.代码实现 4.测试 1.目标场景 有时候上完线,用户还停留在老的页面,用户不知道网页重新部署了,跳转页面的时候有时候js连接hash变了导致报错跳不过去,并且用户体验不到新功能. 2.思考解决方案 如何去解决这个问题 思考中... 如果后端可以配合我们的话我们可以使用webSocket 跟后端进行实时通讯,前端部署完之后,后端给个通知,前端检测到Message进行提示,还可以在优化一下使用EvnentSource 这个跟socket很像只不过他只能后端往

  • JS实现简单的下雪特效示例详解

    JS实现简单的下雪特效示例详解

    目录 前言 主要实现代码 HTML代码 JS代码 前言 很多南方的小伙伴可能没怎么见过或者从来没见过下雪,今天我给大家带来一个小Demo,模拟了下雪场景,首先让我们看一下运行效果 可以点击看看在线运行http://haiyong.site/xiaxue 首先看看项目结构,一张雪花图片,一个.html文件和 jquery-1.4.2.js 用到的雪花图片我放在这里了,或者可以直接用我上传到自己网站上的图片地址:http://haiyong.site/wp-content/uploads/2021/

  • Three.js实现雪糕地球的使用示例详解

    Three.js实现雪糕地球的使用示例详解

    目录 前言 ThreeJS 基础——实现转动的球体 ThreeJS 纹理——实现转动的地球 交互式雪糕地球 添加 loading 效果 前言 最近的天气有几分酷热,去实验室的道路也有几分漫长,走着走着,小包感觉灵魂已经被热出窍了.回到实验室,把空调打开,雪糕吃上,静坐了几分钟,才重新感觉到灵魂的滋味,葛优躺在实验室的小床上,思维开始天马行空,世上有一万种方式能让小包凉快,但地球母亲呐,她却日渐炎热,谁能来给她降降温? 躺着躺着,进入了梦乡,小包梦到未来有一天,人类超级发达,可以穿梭时空,但发展的

  • JS实现大数相加大数相乘示例详解

    目录 JS大数相加.大数相乘 一.实现两个大数相加 二.实现两个大数相乘 JS大数相加.大数相乘 JavaScript 只有一种数字类型,可以使用也可以不使用小数点来书写数字. 在 JavaScript 中,数字不分为整数类型和浮点数类型,所有的数字都是浮点数类型.JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字,此格式用 64 位存储数值.其中 0~51存储数字片段,52~62存储指数,63 位存储符号. 来看看 JavaScript 中数字的最大值和最小值:

  • JS实现简单的操作杆旋转示例详解

    目录 一.实现效果 二.组成部分 目标 三.代码实现 1.操作控制 2.dom对象操作类 3.用法 总结与思考 一.实现效果 JS 简单的操作杆旋转实现 首先说明一下,请直接忽略背景图,这里主要实现的是杆旋转控制方向盘旋转. 鼠标移出控制区域,控制球复位 二.组成部分 创建 ballOption.js 文件,用以绑定控制球指定 dom,并初始化相关操作 创建 eleOption.js 文件,用以实现一些频繁的 dom 操作 主要是通过鼠标滑动事件控制“控制球”位置更改及获取以屏幕上方向为0度的角

  • JS实现一个微信录音功能过程示例详解

    目录 功能原型图 拆解需求 评估时间 代码实现 功能原型图 其实就是微信发送语音的功能.没有转文字的功能. 拆解需求 根据原型图可以很容易的得出我们需要做的内容包括下面三个部分: 接入微信的语音SDK 调用微信SDK的API逻辑 界面和交互的实现 其中第一点和第二点属于业务逻辑部分,第三点属于交互逻辑部分.对于业务逻辑和交互逻辑的关系在我的另外一篇文章描述过,我在vue中是这样拆分组件的 从原型图可以分析出如下的流程图: 评估时间 第三事情是评估时间.在接到这个需求的时候,我们需要假设我们在此之

  • Node.js实现分片上传断点续传示例详解

    目录 正文 文件的分片与合并 并发控制 使代码可复用 服务端接口实现 正文 大文件上传会消耗大量的时间,而且中途有可能上传失败.这时我们需要前端和后端配合来解决这个问题. 解决步骤: 文件分片,减少每次请求消耗的时间,如果某次请求失败可以单独上传,而不是从头开始 通知服务端合并文件分片 控制并发的请求数量,避免浏览器内存溢出 当因为网络或者其他原因导致某次的请求失败,我们重新发送请求 文件的分片与合并 在JavaScript中,FIle对象是' Blob '对象的子类,该对象包含一个重要的方法s

  • node.js中Util模块作用教程示例详解

    目录 从类型判断说起 严格相等 Error First & Promise 调试与输出 从类型判断说起 在 JavaScript 中,进行变量的类型校验是一个非常令人头疼的事,如果只是简单的使用 typeof 会到各种各样的问题. 举几个简单的: console.log(typeof null) // 'object' console.log(typeof new Array) // 'object' console.log(typeof new String) // 'object' 后来,大

  • JS前端模块化原理与实现方法详解

    本文实例讲述了JS前端模块化原理与实现方法.分享给大家供大家参考,具体如下: 1.什么是前端模块化 模块化开发,一个模块就是一个实现特定功能的文件,有了模块我们就可以更方便地使用别人的代码,要用什么功能就加载什么模块. 2.模块化开发的好处 1)避免变量污染,命名冲突 2)提高代码利用率 3)提高维护性 4)依赖关系的管理 3.前端模块化的进程 前端模块化规范从原始野蛮阶段现在慢慢进入"文艺复兴"时代,实现的过程如下: 3.1 函数封装 我们在讲到函数逻辑的时候提到过,函数一个功能是实

  • JS前端设计模式之发布订阅模式详解

    目录 引言 例子1: version1: version2: 总结 引言 昨天我发布了一篇关于策略模式和代理模式的文章,收到的反响还不错,于是今天我们继续来学习前端中常用的设计模式之一:发布-订阅模式. 说到发布订阅模式大家应该都不陌生,它在我们的日常学习和工作中出现的频率简直不要太高,常见的有EventBus.框架里的组件间通信.鉴权业务等等......话不多说,让我们一起进入今天的学习把!!! 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系 当一个对象的状态发生改变时,所有

  • js闭包和垃圾回收机制示例详解

    前言 闭包和垃圾回收机制常常作为前端学习开发中的难点,也经常在面试中遇到这样的问题,本文记录一下在学习工作中关于这方面的笔记. 正文 1.闭包 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.作为一个JavaScript开发者,理解闭包十分重要. 1.1闭包是什么? 闭包就是一个函数引用另一个函数的变量,内部函数被返回到外部并保存时产生,(内部函数的作用域链AO使用了外层函数的AO) 因为变量被引用着所以不会被回收,因此可以用来封装一个私有

随机推荐