Javascript的事件模型和Promise实现

1. Javascript的运行时模型——事件循环 
JS的运行时是个单线程的运行时,它不像其他编程语言,比如C++,Java,C#这些可以进行多线程操作的语言。当它执行一个函数时,它只会一条路走到黑,不会在当前函数结束之前去调用其他的函数(除非当前函数主动调用其他函数)。它也不用担心会有其他线程打扰它,因为它的运行时只有一个线程。如果你还记得一些计算机原理的话,这种运行时只有一个栈,设计起来相当的简单。

一条路走到黑的设计很棒,因为它足够简单,但是又是谁决定哪个函数从开始进入栈内执行呢?答案是JS的运行时还有一个事件等待队列与栈搭配,每当运行栈为空时(也就是当前函数运行结束),JS的运行时就从当前的事件队列中取出一个消息处理,执行与这个消息相关联的函数。这种行为可以用以下代码来说明:

1 while (eventQueue.waitForMessage()) {
2     let event = eventQueue.pop();
3     let handler = event.handler;
4     handler();                      //执行事件关联的函数
5     context.scheduler.schedule();   //让调度器处理一下其他事务
6 }

有了运行栈和事件队列之后,我们的Javascript运行时已经初具雏形。不过Javascript中的变量都是对象,它们的大小通常很大,可不是一个小小的栈能放下的,如果我们熟悉C++,就会知道一般在C++中我们只在栈中存储基本类型(int, bool等)和指针,而指针所指的位置是内存堆中的一个地址,这也是JS的对象的存储地点。下面这张图可以形象地解释一下JS运行时的模型。

2. 事件循环模型的优点和缺点 
先说优点。除了实现上的简单,Javascript的最大优点就是完全异步,永不阻塞。这句话可能有点令人迷糊,一个单线程的运行时怎么完全异步,永不阻塞?实际上虽然JS运行时单线程,但是浏览器是个多进程多线程的环境,这一个点在后端也一样,虽然Node是个单线程JS运行时,但是后端还有其他进程和线程配合Node一起完成响应操作。

以浏览器打开IndexedDB为例,当你执行indexedDB.open()的之后,当前的Javascript运行栈就结束了,JS可以处理其他事件的关联函数,所以JS不会阻塞。那原来的open操作交给谁了呢?浏览器会调用其他线程接管这个打开数据库的过程,当返回时,浏览器会在JS运行时的事件队列中添加一个打开成功或者打开失败的事件,同时将你当时添加的回调函数关联到事件。

再说缺点。我们都知道JS的调用函数只会一条路走到黑,而且没有正常的方法能打断这一过程,如果这一路恰好比较长(比如进行了大量的数学运算),就会使JS进入一种类阻塞的状态,页面会无法响应。等等!刚说JS永不阻塞,这里怎么又冒出一个类阻塞呢?这时因为我们所说的阻塞一般都是指IO阻塞,也就是CPU等IO结束的过程,这种情况在JS中可以永远不会发生(注意这里是可以,不是一定,某些IO操作是有同步的API可以调用的)。所谓类阻塞状态呢,就是在执行CPU密集型任务,这是一种不可避免的过程。那为什么这种情况下页面会没有响应呢?这时因为浏览器虽然会把事件放入事件队列里,但是由于前一个函数还没执行完,页面响应事件关联的函数得不到执行,自然页面会表现出不响应的状态。

3. Promise的实现 
Promise是JS处理回调的一种方式,也是利用JS的事件循环模型的一个编程范式包装,也是ES7中await async的基础。如果说回调是对JS事件模型最直接最拙劣的实现的话,Promise至少给回调加了件衣服,使它不再那么难看。但本质上讲,Promise还是描述JS事件循环模型的一种工具。下面给个例子来说明它和JS事件模型的联系。

 1 let getUrlAsync = (url) => {
 2     let promise = new Promise((resolve, reject) => {
 3         const xhr = new XMLHttpRequest();
 4         xhr.open(‘GET‘, url);
 5         xhr.onload = () => resolve(xhr.responseText);
 6         xhr.onerror = () => reject(xhr.statusText);
 7     });
 8     return promise;
 9 };
10 getUrlAsync(‘http://exaple.com/text/11111‘)
11     .then(res => console.log(res))
12     .catch(error => console.log(error));

当调用getUrlAsync时,JS运行时做以下事情: 
1. 会创建一个Promise对象,此时还是在getUrlAsync的栈帧里; 
2. 然后创建一个XMLHttpRequest对象,此时还是在getUrlAsync的栈帧里; 
3. 调用XMLHttpRequestopen方法,此时浏览器其他线程接管open过程,JS无需等待open结束; 
4. 给xhronload事件关联一个处理函数(委托),注意此时该事件并没有进入事件队列; 
5. 给xhronerror事件关联一个处理函数(委托),同样此时该事件没有进入运行时的事件队列; 
6. 传入res => console.log(res)来具体化第4步中的委托; 
7. 传入error => console.log(error)来具体化第5部中的委托,此时当前的运行栈就退出了,运行时将处理其他事件。 
在某一个时刻,浏览器控制的open方法返回,它会在JS运行时的事件队列中添加一个事件,比如onload 
8. JS运行时循环到onload事件,并找到它的关联处理函数,在这个例子中就是res => console.log(res),并运行这个函数。

最后吐槽一个博客园,还不支持Markdown吗?默认编辑器真的好难用。。。。

原文地址:https://www.cnblogs.com/bill-shooting/p/9301817.html

时间: 2024-10-13 07:55:59

Javascript的事件模型和Promise实现的相关文章

javascript绑定事件

本质:不同的库或者工具中总是封装了不同的事件绑定形式,但是究其根源,还是IE事件模型和W3C事件模型不同的处理方式 1)W3C事件模型:支持事件捕捉和冒泡 addEventListener('type',function(){},bool) removeEventListener ('type',function(){},bool) 2)IE事件模型:仅支持事件冒泡 attachEvent('type',function(){}); detachEvent('type',fucntion(){}

BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第9章节--client对象模型和REST APIs概览 JavaScript

BEGINNING SHAREPOINT? 2013 DEVELOPMENT 第9章节--client对象模型和REST APIs概览  JavaScript 与托管.NETclient对象模型(Managed CSOM)并排的是JavaScript客户对象模型(JS CSOM). JS CSOM最初的目的是同意在SP上下文的页面中执行JavaScript代码,不须要整个页面回传就能够反馈SP.它不是设计或让开发者在SP页面上下文之外的地方使用的. BEGINNING SHAREPOINT® 2

BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第9章节--客户端对象模型和REST APIs概览 JavaScript

BEGINNING SHAREPOINT? 2013 DEVELOPMENT 第9章节--客户端对象模型和REST APIs概览  JavaScript 与托管.NET客户端对象模型(Managed CSOM)并排的是JavaScript客户对象模型(JS CSOM). JS CSOM最初的目的是允许在SP上下文的页面中运行JavaScript代码,不需要整个页面回传就可以反馈SP.它不是设计或让开发人员在SP页面上下文之外的地方使用的.

JavaScript的事件_事件概述/事件模型

一.事件概述 JavaScript 事件是由访问 Web 页面的用户引起的一系列操作,例如:用户点击页面上的某个按钮或者鼠标移动到页面的某个图片上而产生一系列的互动的反馈. 当用户执行某些操作的时候,再去执行一系列代码. 事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netscape Navigator 中出现,作为分担服务器端运算负载的一种手段.直到几乎所有的浏览器都支持事件处理. 而 DOM2级规范开始尝试以一种复合逻辑的方式标准化 DOM 事件.IE9.Firefox.Oper

Javascript知识——事件

O(∩_∩)O~~又是新的一周开始了,今天还是在继续学习Javascript知识,今天主要讲了事件的知识.现在就总结下吧. 事件 事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netscape Navigator 中出现,作为分担服务器端运算负载的一种手段. 直到几乎所有的浏览器都支持事件处理. 而 DOM2级规范开始尝试以一种复合逻辑的方式标准化 DOM 事件.IE9.Firefox.Opera.Safari 和Chrome 全都已经实现了“DOM2 级事件”模块的核心部分.IE8

JavaScript笔记——事件

事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netscape Navigator 中出现, 作为分担服务器端运算负载的一种手段.直到几乎所有的浏览器都支持事件处理.而 DOM2 级规范开始尝试以一种复合逻辑的方式标准化 DOM 事件 JavaScript 有三种事件模型:内联模型.脚本模型和 DOM2 模型 内联模型 这种模型是最传统接单的一种处理事件的方法.在内联模型中,事件处理函数是 HTML 标签的一个属性,用于处理指定事件.虽然内联在早期使用较多,但它是和 HTML 混写的

Dataflow编程模型和spark streaming结合

Dataflow编程模型和spark streaming结合 主要介绍一下Dataflow编程模型的基本思想,后面再简单比较一下Spark  streaming的编程模型 == 是什么 == 为用户提供以流式或批量模式处理海量数据的能力,该服务的编程接口模型(或者说计算框架)也就是下面要讨论的dataflow model 流式计算框架处理框架很多,也有大量的模型/框架号称能较好的处理流式和批量计算场景,比如Lambda模型,比如Spark等等,那么dataflow模型有什么特别的呢? 这就要要从

BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第9章节--客户端对象模型和REST APIs概览 Windows Phone

BEGINNING SHAREPOINT? 2013 DEVELOPMENT 第9章节--客户端对象模型和REST APIs概览 Windows Phone 和.NET托管代码和JavaScript CSOMs一样,CSOM库对于Windows Phone和Silverlight同样可用.

架构设计:系统间通信(5)——IO通信模型和JAVA实践 下篇

接上篇:<架构设计:系统间通信(4)--IO通信模型和JAVA实践 中篇>,我们继续讲解 异步IO 7.异步IO 上面两篇文章中,我们分别讲解了阻塞式同步IO.非阻塞式同步IO.多路复用IO 这三种IO模型,以及JAVA对于这三种IO模型的支持.重点说明了IO模型是由操作系统提供支持,且这三种IO模型都是同步IO,都是采用的"应用程序不询问我,我绝不会主动通知"的方式. 异步IO则是采用"订阅-通知"模式:即应用程序向操作系统注册IO监听,然后继续做自己