淺談JS和Nodejs中的事件驅(qū)動
事件驅(qū)動和發(fā)布-訂閱
事件驅(qū)動架構(gòu)是建立在軟件開發(fā)中一種通用模式上的,這種模式被稱為發(fā)布-訂閱或觀察者模式。
在事件驅(qū)動架構(gòu)中,至少有兩個參與者:主題(subject)和觀察者(observer)。
主題就像調(diào)頻收音機一樣,向有興趣收聽該主題所說內(nèi)容的觀察者進行廣播。
觀察者可能只有一個,也可能有一百個,這都沒有關(guān)系,只要主題有一些要廣播的消息就夠了。
請記住,事件驅(qū)動、發(fā)布-訂閱和觀察者模式在實踐中不是一回事,但在理想情況下,它們使用相同的方法:一個實體廣播一條消息,其他實體偵聽該消息。
事件驅(qū)動是怎樣用在瀏覽器中的JavaScript的?
借助引擎,JavaScript可以運行在你的瀏覽器中。
最受歡迎的 JavaScript 引擎是 Google Chrome 和 Node.js所使用的V8,F(xiàn)irefox 的 SpiderMonkey 和 Safari/WebKit 使用的 JavaScriptCore。
基于供豐富的環(huán)境,JavaScript 引擎增強了語言,還提供了事件驅(qū)動的 JavaScript 平臺。
實際上,瀏覽器中的 JavaScript 可以與html元素進行交互,這些html元素是事件發(fā)送器(event emitters),即能夠發(fā)送事件的對象。
思考一下這個簡單的例子,一個帶有按鈕的 HTML 文檔:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>What means "event-driven" in JavaScript?</title> </head> <body> <div> <button id="subscribe">SUBSCRIBE</button> </div> </body> </html>
如果沒有 JavaScript,則這個按鈕將毫無生命?,F(xiàn)在 HTML 按鈕是HTMLButtonElement類型的元素,并且與所有 HTML 元素一樣,它們都連接到EventTarget—— 每個 HTML 元素的共同祖先。
瀏覽器中的事件目標是能夠發(fā)出事件的對象:它們是觀察者模式中的主題。
有點混亂?請記?。褐黝}是 FM 廣播,所以任何 HTML 元素都像是廣電臺。
一會兒,你將看到誰是觀察者。
瀏覽器中的主題和觀察者
如果 HTML 元素是主題,那么誰是觀察者?任何注冊為偵聽器的 JavaScript函數(shù)都可以對瀏覽器中的事件做出反應(yīng)。
使用 JavaScript 選擇一個 HTML 元素:
const btn = document.getElementById('subscribe');
并使用 addEventListener注冊偵聽器:
const btn = document.getElementById('subscribe'); btn.addEventListener("click", function () { console.log("Button clicked"); });
這里的“click”是事件,按鈕是主題,或者是發(fā)送器,函數(shù)是偵聽器,或者是觀察者。
回顧一下:
HTML 元素是事件發(fā)送器。
JavaScript 中注冊為偵聽器的函數(shù)是觀察者。
所有這些組件構(gòu)成了“一個小小的事件驅(qū)動的體系結(jié)構(gòu)。要測試代碼請保存下面的 HTML 內(nèi)容到文件(或在 Codepen 上嘗試),請單擊按鈕,然后查看瀏覽器的控制臺:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>What means "event-driven" in JavaScript?</title> </head> <body> <div> <button id="subscribe">SUBSCRIBE</button> </div> </body> <script> const btn = document.getElementById('subscribe'); btn.addEventListener("click", function () { console.log("Button clicked"); }); </script> </html>
在下一部分中,你將看到用于 Node.js的相同概念。
事件驅(qū)動如何用于 Node.js?
Node.js是用于基于 V8 引擎的運行在瀏覽器之外(命令行工具和服務(wù)器端)的 JavaScript 環(huán)境。
你在 Node.js 中所做的大部分工作都是基于事件的。總會有一個發(fā)送器對象,一些觀察者在監(jiān)聽消息。
在 Node.js 中,沒有任何 HTML 元素,因此大多數(shù)事件都來自進程、與網(wǎng)絡(luò)的交互、文件等。
Node.js 中的每個事件發(fā)送器都有一個名為on的方法,該方法至少需要兩個參數(shù):
- 要偵聽的事件的名稱
- 監(jiān)聽器函數(shù)
讓我們舉一個實際的例子。看一下這個簡單的 Node.js 服務(wù)器:
const net = require("net"); const server = net.createServer().listen(8081, "127.0.0.1"); server.on("listening", function () { console.log("Server listening!"); }); server.on("connection", function (socket) { console.log("Client connected!"); socket.end("Hello client!"); });
這段代碼創(chuàng)建了一個監(jiān)聽本地主機端口 8081 的服務(wù)器。在server 對象上,我們調(diào)用 on 方法來注冊兩個偵聽器函數(shù)。
服務(wù)器啟動后立即觸發(fā)listening事件,而客戶端連接到 127.0.0.1:8081 時將觸發(fā)connection 事件(嘗試一下?。?。
在此示例中,server是事件發(fā)送器,主題。另一方面,偵聽器函數(shù)是觀察者。
但是那些on方法從哪里來的呢?
了解 EventEmitter
Node.js 中的所有事件驅(qū)動模塊都擴展了一個名為EventEmitter的根類。在我們之前的例子中,來自 net 模塊的網(wǎng)絡(luò)服務(wù)器就使用了 EventEmitter。
Node.js 中的EventEmitter有兩種基本方法:on和emit。
如果你想要與瀏覽器對應(yīng),那么可以把EventEmitter看作是能夠發(fā)出事件的任何一種 HTML 元素。
要在瀏覽器中偵聽事件,請在主題對象上調(diào)用addEventListener:
const btn = document.getElementById('subscribe'); btn.addEventListener("click", function () { console.log("Button clicked"); });
相反,在 Node.js 中有on:
// omit server.on("listening", () => { console.log("Server listening!"); }); // omit
準確地說,Eve??ntEmitter上還有一個addListener方法。on是它的別名。
EventEmitter還有一個emit方法,在你廣播自定義事件(消息)時很有用。
如果要使用EventEmitter,請從 “events” 模塊中導(dǎo)入并發(fā)出事件:
const EventEmitter = require("events"); const emitter = new EventEmitter(); emitter.on("customEvent", () => console.log("Got event!")); emitter.emit("customEvent");
用 Node.js 運行代碼,你將在控制臺中看到 “Got event”。
JavaScript 中有關(guān)觀察者/發(fā)布-訂閱的其他示例
JavaScript 沒有對觀察者對象的原生支持,但是有人建議將其添加到語言中。
RxJS是一個將觀察者模式引入 JavaScript 的庫。
Redux是 JavaScript 中發(fā)布-訂閱模式的實現(xiàn)。 這是一個非常好的事件發(fā)送器,其中狀態(tài)的更改會被分發(fā)給所有監(jiān)聽的觀察者。
現(xiàn)代瀏覽器附帶Intersection Observer API,這是觀察者模式的另一個例子。
Socket.IO是一個庫,大量使用了事件。
總結(jié)
希望你從這篇文章中學(xué)到新的東西。你學(xué)到了很多術(shù)語,但最終都歸結(jié)為大約 30 年前發(fā)明的模式:發(fā)布-訂閱。
這種模式,也稱為觀察者,是我們今天在 JavaScript 和 Node.js 中所使用的事件驅(qū)動架構(gòu)的基礎(chǔ)。
再次強調(diào),事件驅(qū)動、發(fā)布-訂閱和觀察者的模式并非完全相同:事件驅(qū)動的體系結(jié)構(gòu)建立在發(fā)布-訂閱之上,觀察者模式比 DOM 和 Node.js 事件更豐富。
但他們都是屬于同一個家庭的成員。
以上就是淺談JS和Nodejs中的事件驅(qū)動的詳細內(nèi)容,更多關(guān)于JS和Nodejs中的事件驅(qū)動的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
javascript實現(xiàn)頁面刷新時自動清空表單并選中的方法
這篇文章主要介紹了javascript實現(xiàn)頁面刷新時自動清空表單并選中的方法,涉及javascript中reset與focus方法的相關(guān)使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07微信小程序云開發(fā)實現(xiàn)云數(shù)據(jù)庫讀寫權(quán)限
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)實現(xiàn)云數(shù)據(jù)庫讀寫權(quán)限,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-05-05JS實現(xiàn)的另類手風(fēng)琴效果網(wǎng)頁內(nèi)容切換代碼
這篇文章主要介紹了JS實現(xiàn)的另類手風(fēng)琴效果網(wǎng)頁內(nèi)容切換代碼,通過JavaScript響應(yīng)鼠標事件動態(tài)操作頁面元素樣式屬性實現(xiàn)手風(fēng)琴效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09Javascript?promise.all的用法介紹(簡潔易懂)
這篇文章主要給大家介紹了關(guān)于Javascript?promise.all用法的相關(guān)資料,Promise.all()方法是一個Promise對象方法,可以將多個Promise實例包裝成一個新的Promise對象,最終返回一個數(shù)組,需要的朋友可以參考下2023-07-07CSS+Table圖文混排中實現(xiàn)文本自適應(yīng)圖片寬度(超簡單+跨所有瀏覽器)
最近在為學(xué)樂網(wǎng)開發(fā)圖片顯示功能時遇到一個問題:在一個table中有兩行,上邊顯示圖片(大小隨機),下邊顯示對圖片的相關(guān)說明(文字長度隨機)2009-02-02