JavaScript事件机制详解

如何实现一个事件的发布订阅

可以通过以下步骤实现 JavaScript 中的发布-订阅模式：

1. 创建一个事件管理器对象。

const eventManager = {
  events: {},
  subscribe: function (eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  },
  publish: function (eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(function (callback) {
        callback(data);
      });
    }
  },
};

2. 在需要订阅或发布事件的地方使用该对象。

// 订阅事件
eventManager.subscribe('eventName', function (data) {
  console.log('收到了数据：', data);
});

// 发布事件
eventManager.publish('eventName', { name: 'test', age: 18 });

这样就可以实现 JavaScript 中的发布-订阅模式。

介绍下事件循环

JavaScript 的事件循环是一种机制，用于管理代码中异步操作的执行。它基于单线程模型，即只有一个主线程来处理所有的任务。

当 JavaScript 代码在执行时，它会将同步任务添加到调用栈中，并按照顺序依次执行，直到调用栈为空。但是，JavaScript 还支持处理异步任务，例如 HTTP 请求、定时器等等。这些异步任务不会立即返回结果，而是在某个时间点才会完成。

为了处理异步任务，JavaScript 引擎会将它们添加到任务队列中，并在调用栈为空后开始执行队列中的下一个任务。这个过程就是事件循环。事件循环通过不断地从任务队列中取出任务并执行来处理异步操作。

在事件循环中，任务被分为两类：宏任务（macrotask）和微任务（microtask）。宏任务包括事件回调、定时器回调和 I/O 操作等，而微任务则包括 Promise 的回调函数及其它一些需要立即执行的任务。当调用栈为空时，事件循环首先会执行所有已经准备好的微任务，然后再从宏任务队列中获取一个任务并执行。

宏任务和微任务的区别

在 JavaScript 中，宏任务和微任务都是异步代码执行的方式,主要体现在任务队列中。

宏任务（macrotask）通常是一些较为耗时的任务,包括整块代码的执行、setTimeout、setInterval、I/O 操作等任务。它们会被放入宏任务队列中等待执行,在每个事件循环（event loop）中，只有一个宏任务可以被执行。

微任务（microtask）通常是一些较为轻量的任务,包括 Promise 的回调函数、MutationObserver 的回调函数、async/await等，在每个宏任务执行完成后会立即执行所有微任务队列中的任务，直到队列为空。

在执行事件循环时，如果宏任务队列中有任务，就会执行宏任务队列中的第一个任务，执行完后再执行微任务队列中的所有任务。这样来回循环，直到宏任务和微任务队列中都没有任务为止。
因此，宏任务和微任务的区别在于执行顺序和优先级不同，微任务会优先于宏任务执行。这是因为微任务执行完之后可能会有一些渲染的操作，如果先执行宏任务，可能会导致页面的渲染不及时，出现页面卡顿的情况。

简单来说，宏任务在下一次事件循环时执行，而微任务在当前事件循环的末尾执行。这就意味着微任务可以更快地执行，并且可以在当前事件循环内处理一些重要的任务。