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

可以通過以下步驟實現(xiàn) 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('收到了數(shù)據(jù)：', data);
});
// 發(fā)布事件
eventManager.publish('eventName', { name: 'test', age: 18 });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最新評論