浅谈JS和Nodejs中的事件驱动

2024-09-28 16:50:41

事件驱动和发布-订阅

事件驱动架构是建立在软件开发中一种通用模式上的，这种模式被称为发布-订阅或观察者模式。

在事件驱动架构中，至少有两个参与者：主题（subject）和观察者（observer）。

主题就像调频收音机一样，向有兴趣收听该主题所说内容的观察者进行广播。

观察者可能只有一个，也可能有一百个，这都没有关系，只要主题有一些要广播的消息就够了。

请记住，事件驱动、发布-订阅和观察者模式在实践中不是一回事，但在理想情况下，它们使用相同的方法：一个实体广播一条消息，其他实体侦听该消息。

发布-订阅模式和我一样老。在 1987 年左右开始理论化，而观察者模式则出现在 1994 年由“四人帮”所写的著作《设计模式》中。

事件驱动是怎样用在浏览器中的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 元素的共同祖先。

浏览器中的事件目标是能够发出事件的对象：它们是观察者模式中的主题。

有点混乱？请记住：主题是 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 事件更丰富。

但他们都是属于同一个家庭的成员。

以上就是浅谈JS和Nodejs中的事件驱动的详细内容，更多关于JS和Nodejs中的事件驱动的资料请关注我们其它相关文章！

浅谈javascript基础之客户端事件驱动

我们知道,面向对象发展起来后,"一夜之间",几乎所有的语言都能基于对象了,JavaScript也是基于对象的语言.用户在浏览器上的行为称作"事件",之后引发的一系列动作,比如弹窗啦,改变浏览器大小啦,验证啦,balabala,都叫做"事件驱动".当然,这次我主要介绍几个常常发生的事件. ps:对于js脚本的支持以浏览器而定!!!有的低版本的浏览器可能不支持!!! 1.单击事件(onClick) 啥叫单击事件呢?当用户单击鼠标按钮是,就会产生单击事
Node.js事件驱动

Node.js事件驱动实现概览虽然在ECMAScript的标准里并没有(也没有必要)明确规定"事件",但是在浏览器中,事件作为一个极为重要的机制,给予JavaScript响应用户操作与DOM变化的能力:在Node.js中,异步事件驱动模型则是其高并发能力的基础. 学习JavaScript也需要了解它的运行平台,为了更好的理解JavaScript的事件模型,我打算从Node及浏览器引擎源码入手,分析其底层实现,并将我的分析整理为一系列博文:一方面作为笔记,另一方面也希望能与大家交流,分
详解Javascript事件驱动编程

一.基本概述 JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数来处理. PS:这种方式和Java GUI中的事件监听机制很像,都是需要注册监听,然后再处理监听,只不过实现的方式不同而已. 二.事件驱动原理事件源:产生事件的地方(html元素) 事件:点击/鼠标操作/键盘操作等等事件对象:当某个事件发生时,可能会产生一个事件对象,该时间对象会封装好该时间的信息,传递给事件处理程序事件处理程序:响应用户事件的
Node.js中的事件驱动编程详解

在传统程编程模里,I/O操作就像一个普通的本地函数调用:在函数执行完之前程序被堵塞,无法继续运行.堵塞I/O起源于早先的时间片模型,这种模型下每个进程就像一个独立的人,目的是将每个人区分开,而且每个人在同一时刻通常只能做一件事,必须等待前面的事做完才能决定下一件事做什么.但是这种在计算机网络和Internet上被广泛使用的"一个用户,一个进程"的模型伸缩性很差.管理多个进程时,会耗费很多内存,上下文切换也会占用大量资源,这些对操作系统是个很大的负担,而且随着进程数的递增,会导致系统性能
你必须知道的Javascript知识点之"单线程事件驱动"的使用

复制代码代码如下: var intervalBody = function(){ console.log('interval'); } var startInterval = function(){ setInterval(intervalBody,1000); } var timeoutBody = function(){ console.log('timeout'); } var startTimeout = function(){ setTimeout(t
深入理解javaScript中的事件驱动

javascript中的事件驱动是通过鼠标或热键的动作引发的主要事件如下:1.鼠标单击事件 onclick 如:( <input type="button" value="鼠标单击" onclick="执行语句.处理" />) 通常用于如下控件:button 按钮对象checkbox 复选框或检查列表 --配合onclick单击事件,通常用于全选效果radio 单选按纽reset 重置按钮submit提交按钮 2.内容改变
理解 Node.js 事件驱动机制的原理

学习 Node.js 一定要理解的内容之一,文中主要涉及到了 EventEmitter 的使用和一些异步情况的处理,比较偏基础,值得一读. 大多数 Node.js 对象都依赖了 EventEmitter 模块来监听和响应事件,比如我们常用的 HTTP requests, responses, 以及 streams. const EventEmitter = require('events'); 事件驱动机制的最简单形式,是在 Node.js 中十分流行的回调函数,例如 fs.readFile.
JScript面向事件驱动的编程

世间万物,千变万化,面向对象的编程亦是对现实社会的模拟,而JavaScript是一种基于对象并且很接近面向对象编程的编程语言,而我们web设计师/程序员跟JavaScript打交道亦要直面JavaScript才能够把网页写得更加丰富多彩.在此先搞清楚一点就是:JavaScript并不仅仅用在Web上,它可以用在许多领域,当然我这里讨论的更多的是JavaScript在Web上的应用,并且主要是事件方面的应用. JavaScript并不能直接对Web对象进行操作,而是要通过浏览器提供的Documen
快速掌握Node.js事件驱动模型

一.传统线程网络模型在了解Node.js事件驱动模型之前,我们先了解一下传统的线程网络模型,请求进入web服务器(IIS.Apache)之后,会在线程池中分配一个线程来线性同步完成请求处理,直到请求处理完成并发出响应,结束之后线程池回收. 这就会就会带来以下几个问题 : 1.由于线程池中线程个数有限,对于频繁请求时,就会出现等待,严重的甚至会把服务器挂掉 2.对于高并发的时候,为了防止出现脏数据就会使用锁来解决,一些I/O事务可能消耗很长得时间,这样就会出现一些线程等待,效率低下二.事件驱动
js事件驱动机制浏览器兼容处理方法

3.1. 事件是如何产生的 * 第一种情况,用户对网页做了某些操作,比如,点击了一个按钮,产生点击事件. 第二种情况,用户没有对网页做操作,也可能产生事件,比如浏览器已经将整个页面加载完毕,会产生加载完成事件.当事件产生以后,浏览器会查找产生事件的节点有没有绑订相应的事件处理代码.如果有,则调用该代码来处理.如果没有,会继续向上查找父节点,有没有对应的事件处理代码(事件冒泡). 3.2. 绑订事件处理代码 ** 1) 绑订事件处理代码到html标记乊上比如: <a id="a1"