如何實現一個事件的發(fā)布訂閱

可以通過以下步驟實現 JavaScript 中的發(fā)布-訂閱模式：

創(chuàng)建一個事件管理器對象。

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);
      });
    }
  },
};

在需要訂閱或發(fā)布事件的地方使用該對象。

// 訂閱事件
eventManager.subscribe('eventName', function (data) {
  console.log('收到了數據：', data);
});
// 發(fā)布事件
eventManager.publish('eventName', { name: 'test', age: 18 });

這樣就可以實現 JavaScript 中的發(fā)布-訂閱模式。

介紹下事件循環(huán)

JavaScript 的事件循環(huán)是一種機制，用于管理代碼中異步操作的執(zhí)行。它基于單線程模型，即只有一個主線程來處理所有的任務。

當 JavaScript 代碼在執(zhí)行時，它會將同步任務添加到調用棧中，并按照順序依次執(zhí)行，直到調用棧為空。但是，JavaScript 還支持處理異步任務，例如 HTTP 請求、定時器等等。這些異步任務不會立即返回結果，而是在某個時間點才會完成。

為了處理異步任務，JavaScript 引擎會將它們添加到任務隊列中，并在調用棧為空后開始執(zhí)行隊列中的下一個任務。這個過程就是事件循環(huán)。事件循環(huán)通過不斷地從任務隊列中取出任務并執(zhí)行來處理異步操作。

在事件循環(huán)中，任務被分為兩類：宏任務（macrotask）和微任務（microtask）。宏任務包括事件回調、定時器回調和 I/O 操作等，而微任務則包括 Promise 的回調函數及其它一些需要立即執(zhí)行的任務。當調用棧為空時，事件循環(huán)首先會執(zhí)行所有已經準備好的微任務，然后再從宏任務隊列中獲取一個任務并執(zhí)行。

宏任務和微任務的區(qū)別

在 JavaScript 中，宏任務和微任務都是異步代碼執(zhí)行的方式,主要體現在任務隊列中。

宏任務（macrotask）通常是一些較為耗時的任務,包括整塊代碼的執(zhí)行、setTimeout、setInterval、I/O 操作等任務。它們會被放入宏任務隊列中等待執(zhí)行,在每個事件循環(huán)（event loop）中，只有一個宏任務可以被執(zhí)行。

微任務（microtask）通常是一些較為輕量的任務,包括 Promise 的回調函數、MutationObserver 的回調函數、async/await等，在每個宏任務執(zhí)行完成后會立即執(zhí)行所有微任務隊列中的任務，直到隊列為空。

在執(zhí)行事件循環(huán)時，如果宏任務隊列中有任務，就會執(zhí)行宏任務隊列中的第一個任務，執(zhí)行完后再執(zhí)行微任務隊列中的所有任務。這樣來回循環(huán)，直到宏任務和微任務隊列中都沒有任務為止。

因此，宏任務和微任務的區(qū)別在于執(zhí)行順序和優(yōu)先級不同，微任務會優(yōu)先于宏任務執(zhí)行。這是因為微任務執(zhí)行完之后可能會有一些渲染的操作，如果先執(zhí)行宏任務，可能會導致頁面的渲染不及時，出現頁面卡頓的情況。

簡單來說，宏任務在下一次事件循環(huán)時執(zhí)行，而微任務在當前事件循環(huán)的末尾執(zhí)行。這就意味著微任務可以更快地執(zhí)行，并且可以在當前事件循環(huán)內處理一些重要的任務。

到此這篇關于深入理解JavaScript事件機制的文章就介紹到這了,更多相關JS事件機制內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論