当前位置:澳门贵宾厅 > Web > 事件事件驱动和发布-订阅,但是通过事件和回调支持并发
事件事件驱动和发布-订阅,但是通过事件和回调支持并发
2020-03-01

浏览器中的主题和观察者

因为我这个服务器是在阿里云里跑起来的,所以只要在外面的浏览器中键入阿里云IP+端口就可以访问了。

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

var http = require;http.createServer(function  { //发送 HTTP 头部 //HTTP 状态值: 200 : OK //内容类型: text/plain response.writeHead(200, {'Content-Type': 'text/plain'}); //发送响应数据 "Hello World" response.end.listen;//终端打印如下信息console.log('Server running at http://127.0.0.1:8888/'); 

准确地说,Eve​​ntEmitter上还有一个addListener方法。on是它的别名。

在事件驱动模型中,会生成一个主循环来监听事件,当检测到事件时触发回调函数。

JavaScript 没有对观察者对象的原生支持,但是有人建议将其添加到语言中。

3.在home文件夹下建个目录叫mynodeproj,然后再建了个文件叫server.js

事件驱动架构中,至少有两个参与者:主题(subject)观察者(observer)

(来源于Javascript是单线程又是异步的,但是这种语言有个共同的特点:它们是 event-driven 的。驱动它们的 event 来自一个异构的平台。)

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

2.设置链接,设置链接的目的在于任何路径都能够用到node命令

你在 Node.js 中所做的大部分工作都是基于事件的。总会有一个发送器对象,一些观察者在监听消息。

1.首先解压缩

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

Node.js 单线程类似进入一个while的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观察者,如果有事件发生就调用该回调函数.

在 Node.js 中,没有任何 HTML 元素,因此大多数事件都来自进程、与网络的交互、文件等。

当这个请求完成,它被放回处理队列,当到达队列开头,这个结果被返回给用户。

EventEmitter还有一个emit方法,在你广播自定义事件(消息)时很有用。

整个事件驱动的流程就是这么实现的,非常简洁。有点类似于观察者模式,事件相当于一个主题,而所有注册到这个事件上的处理函数相当于观察者。

要在浏览器中侦听事件,请在主题对象上调用addEventListener:

(例如,我们可以一边读取文件,一边执行其他命令,在文件读取完成后,我们将文件内容作为回调函数的参数返回。这样在执行代码时就没有阻塞或等待文件 I/O 操作。这就大大提高了 Node.js 的性能,可以处理大量的并发请求。)

JavaScript 中注册为侦听器的函数是观察者

以上代码输出的结果是:

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

input.txt的内容。

一会儿,你将看到谁是观察者

Node.js 使用事件驱动模型,当webserver接收到请求,就把它关闭然后进行处理,然后去服务下一个web请求。

所有这些组件构成了“一个小小的事件驱动的体系结构。要测试代码请保存下面的 HTML 内容到文件(或在 Codepen 上尝试),请单击按钮,然后查看浏览器的控制台:

复制代码 代码如下:tar xvf node-v4.2.3-linux-x64

!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleWhat means "event-driven" in JavaScript?/title/headbodydiv button SUBSCRIBE/button/div/bodyscript const btn = document.getElementById('subscribe'); btn.addEventListener("click", function () { console.log("Button clicked"); });/script/html

为什么要这样做呢?原因有两点:

在下一部分中,你将看到用于 Node.js 的相同概念。

Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高。

用 Node.js 运行代码,你将在控制台中看到 “Got event”。

不过大多数时候我们不会直接使用 EventEmitter,而是在对象中继承它。包括 fs、net、 http 在内的,只要是支持事件响应的核心模块都是 EventEmitter 的子类。

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

Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现。

了解 EventEmitter

Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发。

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

事件驱动模型

// omitserver.on("listening", () = { console.log("Server listening!");});// omit

node server.js

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

4.使用node命令执行以上代码

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

//引入events模块var events = require;//创建eventEmitter对象var eventEmitter = new events.EventEmitter();//创建事件处理程序var connectHandler = function connected() { console.log; //触发data_received事件 eventEmitter.emit;}//绑定connection事件处理程序eventEmitter.on('connection', connectHandler);//使用匿名函数绑定data_received事件eventEmitter.on('data_received', function(){ console.log;//触发connection事件 eventEmitter.emit;console.log; 

让我们举一个实际的例子。看一下这个简单的 Node.js 服务器:

上述的结果正如你想的一样,通过这种事件驱动模型我们就可以实现异步操作的。

如果没有 JavaScript,则这个按钮将毫无生命。现在 HTML 按钮是HTMLButtonElement类型的元素,并且与所有 HTML 元素一样,它们都连接到EventTarget—— 每个 HTML 元素的共同祖先。

下面给大家分享我的第一个NodeJs项目

相反,在 Node.js 中有on

首先,具有某个实体功能的对象实现事件符合语义, 事件的监听和发射应该是一个对象的方法。其次 JavaScript 的对象机制是基于原型的,支持 部分多重继承,继承 EventEmitter 不会打乱对象原有的继承关系。

HTML 元素事件发送器

以上代码输出的结果是:

有点混乱?请记住:主题是 FM 广播,所以任何 HTML 元素都像是广电台。

复制代码 代码如下:ln -s /home/node-v4.2.3-linux-x64/bin/node /usr/local/bin/nodeln -s /home/node-v4.2.3-linux-x64/bin/npm /usr/local/bin/npm

Node.js 中的EventEmitter有两种基本方法:onemit

Node.js 有多个内置的事件,我们可以通过引入 events 模块,并通过实例化 EventEmitter 类来绑定和监听事件,如下实例:

如果你想要与浏览器对应,那么可以把EventEmitter看作是能够发出事件的任何一种 HTML 元素。

Node.js的安装通常有两种方式:自己编译源代码和使用编译好的文件,我这里使用编译好的文件目前我的home目录下有刚下载来的node-v4.2.3-linux-x64

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

var fs = require;fs.readFile('input.txt', function { console.log; return; } console.log;console.log; 

作者:Valentino Gagliardi翻译:疯狂的技术宅原文:

从上述代码可以看出fs.readFile可以分发事件,当然Node.js里面的许多对象都会分发事件,一个net.Server对象会在每次有新连接时也会分发一个事件, 所有这些产生事件的对象都是 events.EventEmitter 的实例。

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

执行上述命令之后会在命令行中显示"Server runnint at

Node.js 中的每个事件发送器都有一个名为on的方法,该方法至少需要两个参数:

这个模型非常高效可扩展性非常强,因为webserver一直接受请求而不等待任何读写操作。

回顾一下:

服务器启动后立即触发listening事件,而客户端连接到 127.0.0.1:8081 时将触发connection 事件(尝试一下!)。

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

这种模式,也称为观察者,是我们今天在 JavaScript 和 Node.js 中所使用的事件驱动架构的基础。

使用 JavaScript 选择一个 HTML 元素:

constbtn =document.getElementById('subscribe');

Socket.IO是一个库,大量使用了事件

如果 HTML 元素是主题,那么谁是观察者?任何注册为侦听器的 JavaScript 函数都可以对浏览器中的事件做出反应。

借助引擎,JavaScript 可以运行在你的浏览器中

思考一下这个简单的例子,一个带有按钮的 HTML 文档:

并使用 addEventListener注册侦听器

Node.js是用于基于 V8 引擎的运行在浏览器之外(命令行工具和服务器端)的 JavaScript 环境。

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

如果要使用EventEmitter,请从 “events” 模块中导入并发出事件:

事件驱动是怎样用在浏览器中的 JavaScript 的?

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

基于供丰富的环境,JavaScript 引擎增强了语言,还提供了事件驱动的 JavaScript 平台

最受欢迎的 JavaScript 引擎是 Google Chrome 和 Node.js 所使用的V8,Firefox 的 SpiderMonkey 和 Safari/WebKit 使用的 JavaScriptCore。

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

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

再次强调,事件驱动、发布-订阅和观察者的模式并非完全相同:事件驱动的体系结构建立在发布-订阅之上,观察者模式比 DOM 和 Node.js 事件更丰富。

希望你从这篇文章中学到新的东西。你学到了很多术语,但最终都归结为大约 30 年前发明的模式:发布-订阅

实际上,浏览器中的 JavaScript 可以与 HTML 元素进行交互,这些 HTML 元素是事件发送器(event emitters),即能够发送事件的对象

总结

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

但是那些on方法从哪里来的呢?

事件驱动如何用于 Node.js?

Node.js 中的所有事件驱动模块都扩展了一个名为EventEmitter的根类。在我们之前的例子中,来自 net 模块的网络服务器就使用了 EventEmitter。

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

时间: 2019-12-30阅读: 68标签: 事件事件驱动和发布-订阅

在此示例中,server是事件发送器,主题。另一方面,侦听器函数是观察者

!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleWhat means "event-driven" in JavaScript?/title/headbodydiv button SUBSCRIBE/button/div/body/html

这里的“click”是事件,按钮是主题,或者是发送器,函数是侦听器,或者是观察者