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

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

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

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ā)布事件的地方使用該對(duì)象。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最新評(píng)論