浅谈JS和Nodejs中的事件驱动
事件驱动和发布-订阅
事件驱动架构是建立在软件开发中一种通用模式上的，这种模式被称为发布-订阅或观察者模式。
在事件驱动架构中，至少有两个参与者：主题（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中的事件驱动的资料请关注猪先飞其它相关文章！
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码，有需要的小伙伴可以参考下。...2016-01-20
- 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧...2015-12-29
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办，不知道具体解决办法的下面跟小编一起来看看。 因项目需要，需要Node.js与PHP做接口调用，发现nod...2017-07-06
- 为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- v-for标签可以用来遍历数组，将数组的每一个值绑定到相应的视图元素中去，下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。...2017-06-15
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮，感兴趣的小伙伴们可以参考一下...2016-03-03