js事件总线

最新推荐文章于 2024-04-29 13:32:45 发布
最新推荐文章于 2024-04-29 13:32:45 发布
阅读量937 收藏
点赞数
文章标签： html html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45266081/article/details/120150520
版权

js是一门单线程语言，也就是同一时间做一件事情

图片转载至简书 

单线程队列，如果前面的任务非常耗时，就会一直等待前面的执行，导致程序假死

为了防止出现此类问题，js把待执行的任务分为两类

1同步任务

        只有前一个任务执行完毕，才能执行下一个任务

2异步任务    

        无需等待，分开执行

异步队列又分为宏任务和微任务

微任务队列的代表就是，Promise.then，MutationObserver，宏任务的话就是setImmediate setTimeout setInterval

JS运行的环境。一般为浏览器或者Node。 在浏览器环境中，有JS 引擎线程和渲染线程，且两个线程互斥。 Node环境中，只有JS 线程。 不同环境执行机制有差异，不同任务进入不同Event Queue队列。 当主程结束，先执行准备好微任务，然后再执行准备好的宏任务，一个轮询结束。

EventLoop执行概念

事件环的运行机制是，先会执行栈中的内容，栈中的内容执行后执行微任务，微任务清空后再执行宏任务，先取出一个宏任务，再去执行微任务，然后在取宏任务清微任务这样不停的循环。

宏任务：宿主环境提供的，比如浏览器
ajax、setTimeout、setInterval、setTmmediate(只兼容ie)、script、requestAnimationFrame、messageChannel、UI渲染、一些浏览器api

微任务：语言本身提供的，比如promise.then
then、queueMicrotask(基于then)、mutationObserver(浏览器提供)、messageChannel 、mutationObersve

​​​​​​​

        

        

不二家大哥哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Js 手写Eventbus 事件总线
qq_45270287的博客
07-16 264
function EventBus() { this._events = {}; } EventBus.prototype.on = function (eventId, func) { const callbacks = this._events[eventId]; if (!callbacks) { this._events[eventId] = [func]; return; } callbacks.push(func); }; EventBus.prototype.once = function (
JS中的事件总线（秒懂事件总线概念）
百赢出品，必属精品
04-04 1095
事件总线是事件发布者和事件订阅者之间的中介，它负责接收和分发事件。当事件发布者发布一个事件时，事件总线会将该事件传递给所有订阅了该事件类型的订阅者。：也称为事件消费者，订阅者会监听事件总线上特定类型的事件，并在事件发生时执行相应的操作。总的来说，事件总线是一种非常强大和灵活的架构模式，可以应用于各种不同的场景和应用领域，从而实现系统的解耦、可扩展和可维护性。事件总线在现代软件架构中有广泛的应用，特别是在大型、复杂的应用程序中。当事件被发布时，事件总线会调用相应的订阅者函数，并传递相应的数据给它们。
在 Vue.js 中使用事件总线在组件之间传递数据
最新发布
油墨香^-^的博客
04-29 21
这是对 Vue.js 中事件总线的介绍。事件总线充当组件之间易于实现的独立通信，无需通过中央组件或父组件。虽然事件总线最初似乎是组件间通信的便捷方法，但建议探索替代选项，例如provide/inject或全局状态管理。这些替代方案为促进组件之间的通信提供了更强大且可维护的解决方案。
js实现事件总线EventBus
czz19910404的博客
06-07 834
使用js简单模拟事件总线的处理机制，包括on,once,off,emit四个方法
JS Global Event Bus（全局事件总线）
阿牛哥的博客
02-28 521
发布-订阅模式： 该模式涉及两个主要角色 - 发布者（Publisher）和订阅者（Subscriber）。发布者负责发布（触发）事件，而订阅者则通过订阅事件来接收通知。事件对象： 通常，一个事件是一个包含相关信息的对象。当发布者触发事件时，它可以传递一些数据给所有订阅者。事件总线对象： 在全局事件总线中，通常会有一个中央的事件总线对象，用于管理所有的事件。这个对象包含一个事件注册表，用于存储不同类型事件的订阅者列表。订阅事件： 组件或模块可以通过订阅事件来表达对某一类型事件的关注。
纯js实现通过事件总线EventBus来完成插件封装
一键写代码的博客
10-22 340
前言： 当我们在插件开发的时候，肯定需要对外暴露函数，使用者调用插件内的方法，如果插件内的某些操作是异步的，就需要等异步完成后，通知使用者处理结果，使用者然后再去执行其他的操作。 我们在vue中，可以通过实例化vue来实现事件总线。 或者通过Vuex来完成类似的操作。 如果是纯插件的时候，我们最好通过js自己完成封装。 示例如下： window.onload = function () { var oproto = Object.prototype var aproto = Ar
verkehrjs:一个极简的 JavaScript 事件总线
05-30
JavaScript 事件总线，如 `verkehrjs`，是一种轻量级的设计模式，用于在复杂的JavaScript应用程序中实现组件之间的通信。在大型应用中，不同模块之间的数据传递和事件监听经常成为一个挑战，事件总线可以有效地解决...
Vue.js的事件总线-JavaScript开发
05-26
vue-bus Vue.js的事件总线，同时支持Vue 1.0和2.0。 有关更多详细信息，请参见Vue文档。 安装您可以通过yarn或npm安装它。 $ yarn add vue-bus $ npm install vue-bus --save这是av vue-bus Vue.js的事件总线，同时...
eventbus:适用于js的微型，快速，零依赖事件总线
03-06
一个很小的，快速的，零依赖JavaScript事件总线。 描述 压缩后少于500个字节+已压缩 零依赖 现代语法 快速地 简单的 已输入 安装 只需下载index.js，或使用以下选项之一： yarn add @mxttwoods/eventbus 或者 npm...
Node.js-EventBusOttoRxBus事件总线使用
08-12
本教程将详细讲解Node.js中的EventBus、Otto以及RxBus这三种事件总线的使用方法。 首先，让我们了解什么是事件总线。事件总线是一种松耦合的通讯方式，它允许应用程序的不同部分通过发布和订阅事件来互相通信，而...
事件总线
02-13
事件总线（Event Bus）是软件工程中一种用于组件间通信的设计模式，尤其在JavaScript开发中广泛应用。这种模式允许不同的组件或模块之间通过发布和订阅事件来传递信息，而不是直接引用彼此，从而降低了代码的耦合度...
Node.js-EasyEventBus一个轻量级的事件总线库
08-12
EasyEventBus 一个轻量级的事件总线库
multi-page-event-bus:多页面事件总线
05-13
多页面事件总线 在Node.js的多页面应用中，用于各个页面之间通信的事件总线方案。 背景 在模块间业务耦合性不强的应用中，使用多页面架构可以有效的降低应用的复杂度。 但是，有些页面上的逻辑比较复杂，需要切割到多个页面中实现。在多页面架构中，没有前端路由、状态管理等框架的辅助，只能靠刷新页面来获取最新的数据，用户体验不流畅。 基于服务器的事件总线方案，可以在多个页面之间通过监听和分发自定义事件来交换数据，并不需要刷新页面。 服务端使用 安装模块： npm install --save multi-page-event-bus 代码中的引用： var bus = require('multi-page-event-bus'); bus.init(server); 备注： 参数server是一个net.Server实例。express实例的listen方法、http.createServer创
JS手写事件总线
weixin_44717047的博客
12-28 521
API eventBus: 包含所有功能的事件总线对象 eventBus.on(eventName, listener): 绑定事件监听 eventBus.emit(eventName, data): 分发事件 eventBus.off(eventName): 解绑指定事件名的事件监听, 如果没有指定解绑所有 原理 使用 on 方法来绑定发生某种事件后应该执行的回调函数。 使用 emit 触发这个事件，并给这个事件的回调函数传入数据。 代码 class EventBus { constructor(
前端面试题：JS 如何实现事件总线 Event Bus
lwebapp.com
03-10 2089
原文：https://lwebapp.com/zh/post/event-bus 介绍 Event Bus 事件总线，通常作为多个模块间的通信机制，相当于一个事件管理中心，一个模块发送消息，其它模块接受消息，就达到了通信的作用。 比如，Vue 组件间的数据传递可以使用一个 Event Bus 来通信，也可以用作微内核插件系统中的插件和核心通信。 原理 Event Bus 本质上是采用了发布-订阅的设计模式，比如多个模块 A、B、C 订阅了一个事件 EventX，然后某一个模块 X 在事件总线发布了这个事件，
教你自己实现一个事件总线EventBus
热门推荐
crazychen的专栏
08-11 1万+
EventBus是一个Github上著名的开源事件总线框架，想必很多人都使用过它。它实现了事件订阅者和事件发布者的解耦，让我们更加容易在actvity等组件间传递信息。 我们虽然不喜欢重复造轮子，但是不代表我们不需要了解轮子是怎么造的。 这篇文章通过这个简单的实例，给大家说明EventBus实现的原理，一起来打造一个简单的事件总线框架。如果你明白了这个框架的设计原理，那么EventBus也就相
EventBus--事件总线：观察者模式的拓展
u011337574的专栏
05-08 2554
为何要使用 android应用开发中，经常会涉及Activity,Fragment，Service等不同组件或者模块之间的消息传递。使用传统的方法实现，往往代码不够优雅，而且不同组件和模块之间的耦合严重。随着模块的增多、代码逻辑的不断新增和修改，整个代码的架构就会显得越来越混乱。为了便于理解，下面举例说明： 例1 Activity中的不同的fragment之间需要进行通信，传统的做法是 ...
EventBus--事件总线
duxingzhe2012729的博客
05-13 1151
什么是EventBus EventBus是Android下高效的发布/订阅事件总线机制。作用是可以代替传统的Intent,Handler,Broadcast或接口函数在Fragment,Activity,Service,线程之间传递数据，执行方法。特点是代码简洁，是一种发布订阅设计模式（Publish/Subsribe），或称作观察者设计模式。 下载EventBus 1.
js 事件线， 异步引入
liaoasd的博客
04-07 510
js时间线： 浏览器解析html页面过程中，整个js运行的状态。 三个状态： loading : 页面开始解析的准备 domtree树 创建了document ,节点 、文本，准备将所有节点注入到document中 document.readState = loading; interactive：页面解析中 解析html ： 1、遇到css（头部样式、link）,独立开启一个线程下载 ；创建cssDom继续解析 2、遇到js ：<script></...
react事件总线js
11-05
React事件总线是一种在React应用程序中实现组件通信的方法。它使用事件总线模式，其中一个中央事件总线用于在组件之间传递消息。在React中，可以使用第三方库EventEmitter或自定义事件总线来实现事件总线。通过事件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值