解析JavaScript与Node.js中的事件驱动架构

事件驱动与发布-订阅机制概述

事件驱动架构依托于软件开发中一种通用的设计模式，即发布-订阅模式（Publish-Subscribe Pattern）或观察者模式。

在事件驱动架构的模型中，至少包含两个核心参与者：主题（Subject）和观察者（Observer）。

主题的作用类似于调频收音机，负责向那些对该主题内容感兴趣的观察者进行广播。

观察者的数量可以是单个，也可以多达上百个，这并不影响架构的运行，只要主题存在需要广播的消息即可。

需要注意的是，事件驱动、发布-订阅和观察者模式在实践概念上有所区别，但在理想实现中，它们采用相同的方法论：一个实体负责广播消息，而其他实体负责监听该消息。

事件驱动机制在浏览器JavaScript中的应用

JavaScript代码通过引擎在浏览器环境中运行。

目前主流的JavaScript引擎包括Google Chrome和Node.js使用的V8引擎，Firefox使用的SpiderMonkey引擎，以及Safari/WebKit使用的JavaScriptCore引擎。

基于丰富的运行环境，JavaScript引擎对语言进行了增强，并提供了事件驱动的JavaScript平台支持。

实际上，浏览器中的JavaScript可以与HTML元素进行交互，这些HTML元素充当事件发送器（Event Emitters），即能够触发或发送事件的对象。

考虑以下简单的示例，一个包含按钮的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介入，该按钮将不具备交互功能。从类型上看，HTML按钮属于HTMLButtonElement类型，并且与所有HTML元素一样，它们都继承自EventTarget——这是所有HTML元素的共同祖先类。

在浏览器环境中，事件目标（EventTarget）是能够发出事件的对象，它们在观察者模式中扮演主题的角色。

这一概念可能稍显抽象，请牢记：主题是FM广播台，因此任何HTML元素都相当于一个广播电台。

接下来，我们将探讨谁充当观察者角色。

浏览器中的主题与观察者关系

如果HTML元素被视为主题，那么观察者是谁呢？任何注册为监听器的JavaScript函数都可以对浏览器中的事件做出响应。

使用JavaScript选取特定的HTML元素：

const btn = document.getElementById('subscribe');

并使用addEventListener方法注册监听器：

const btn = document.getElementById('subscribe');
btn.addEventListener("click", function () {
    console.log("Button clicked");
});

在此示例中，“click”代表事件，按钮作为主题（或发送器），而函数则作为监听器（或观察者）。

回顾核心概念：

HTML元素充当事件发送器。

在JavaScript中注册为监听器的函数充当观察者。

所有这些组件共同构成了一个小型的事件驱动架构。要测试代码，请将以下HTML内容保存为文件（或在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中相同的概念应用。

事件驱动机制在Node.js中的应用

Node.js是一个基于V8引擎的JavaScript运行环境，用于在浏览器之外（如命令行工具和服务器端）执行代码。

在Node.js中进行的大部分工作都是基于事件的。系统中总存在一个发送器对象，以及监听消息的观察者。

由于Node.js中没有HTML元素，因此大多数事件来源于进程、网络交互、文件操作等。

Node.js中的每个事件发送器都包含一个名为on的方法，该方法至少需要两个参数：

• 要监听的事件名称
• 监听器函数

让我们通过一个实际示例进行说明。观察以下简单的Node.js服务器代码：

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!");
});

这段代码创建了一个监听本地主机端口8081的服务器。在server对象上，我们调用on方法注册了两个监听器函数。

服务器启动后立即触发listening事件，而当客户端连接到127.0.0.1:8081时，将触发connection事件（您可以尝试连接测试）。

在此示例中，server是事件发送器，即主题；而监听器函数则是观察者。

那么，这些on方法源自何处呢？

深入理解EventEmitter

Node.js中所有事件驱动的模块都继承自一个名为EventEmitter的根类。在之前的示例中，来自net模块的网络服务器便使用了EventEmitter。

Node.js中的EventEmitter包含两种基本方法：on和emit。

若要与浏览器概念对应，可以将EventEmitter视为任何能够发出事件的HTML元素。

要在浏览器中监听事件，需在主题对象上调用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

准确地说，EventEmitter上还有一个addListener方法，on是其别名。

EventEmitter还包含一个emit方法，在广播自定义事件（消息）时非常有用。

如果要使用EventEmitter，需从“events”模块中导入并发出事件：

const EventEmitter = require("events");
const emitter = new EventEmitter();
emitter.on("customEvent", () => console.log("Got event!"));
emitter.emit("customEvent");

使用Node.js运行代码，您将在控制台看到“Got event”输出。

JavaScript中观察者/发布-订阅的其他示例

JavaScript语言本身并未原生支持观察者对象，但已有提案建议将其添加到语言标准中。

RxJS是一个将观察者模式引入JavaScript的库。

Redux是JavaScript中发布-订阅模式的实现。这是一个优秀的事件发送器，状态的更改会被分发给所有监听的观察者。

现代浏览器附带了Intersection Observer API，这是观察者模式的另一个实例。

Socket.IO是一个大量使用事件的库。

总结

希望本文能为您带来新的见解。您接触到了许多术语，但最终都归结为大约30年前发明的模式：发布-订阅。

这种模式，也称为观察者模式，构成了当今JavaScript和Node.js中事件驱动架构的基础。

再次强调，事件驱动、发布-订阅和观察者模式并非完全等同：事件驱动架构建立在发布-订阅之上，而观察者模式比DOM和Node.js事件的概念更为丰富。

但它们均属于同一技术家族。

以上就是关于JavaScript和Node.js中事件驱动的详细内容，更多相关技术文章请关注本站其他文章。