|
|
51CTO旗下网站
|
|
移动端

2.1 生命周期概览

《JavaScript忍者秘籍(第2版)》第2章运行时的页面构建过程,本章会完整探索客户端Web应用程序的生命周期,从页面请求开始,到用户不同种类的交互,最后至页面被关闭。本节为生命周期概览。

作者:一心一译前端小组 译来源:人民邮电出版社|2018-03-06 14:28

第2章 运行时的页面构建过程

本章包括以下内容:

Web应用的生命周期步骤

从HTML代码到Web页面的处理过程

JavaScript代码的执行顺序

与事件交互

事件循环

我们对JavaScript的探索从客户端Web应用开始,其代码也在浏览器提供的引擎上执行。为了打好后续对JavaScript语言和浏览器平台的学习基础,首先我们要理解Web应用的生命周期,尤其要理解JavaScript代码执行在生命周期的所有环节。

本章会完整探索客户端Web应用程序的生命周期,从页面请求开始,到用户不同种类的交互,最后至页面被关闭。首先我们来看看页面是如何从HTML代码建立的。然后我们将集中探讨JavaScript代码的执行,它给我们的页面提供了大量交互。最后我们会看看为了响应用户的动作,事件是如何被处理的。在这一些列过程中,我们将探索很多Web应用的基础概念,例如DOM(Web页面的一种结构化表示方式)和事件循环(它决定了应用如何处理事件)。让我们开始学习吧!

你知道吗?

浏览器是否总是会根据给定的HTML来渲染页面呢?

Web应用一次能处理多少个事件?

为什么浏览器使用事件队列来处理事件?

2.1 生命周期概览

典型客户端Web应用的生命周期从用户在浏览器地址栏输入一串URL,或单击一个链接开始。例如,我们想去Google的主页查找一个术语。首先我们输入了URL,www.google.com,其过程如图2.1所示。

从用户的角度来说,浏览器构建了发送至服务器(序号2)的请求,该服务器处理了请求(序号3)并形成了一个通常由HTML、CSS和JavaScript代码所组成的响应。当浏览器接收了响应(序号4)时,我们的客户端应用开始了它的生命周期。 由于客户端Web应用是图形用户界面(GUI)应用,其生命周期与其他的GUI应用相似(例如标准的桌面应用或移动应用),其执行步骤如下所示:

1.页面构建——创建用户界面;

2.事件处理——进入循环(序号5)从而等待事件(序号6)的发生,发生后调用事件处理器。

应用的生命周期随着用户关掉或离开页面(序号7)而结束。现在让我们一起看一个简单的示例程序:每当用户移动鼠标或单击页面就会显示一条消息。本章会始终使用这个示例,如清单2.1所示。

清单 2.1  一个带有GUI的Web应用小程序,其描述了对事件的响应

清单2.1首先定义了两条CSS 规则,即#first和#second,其指定了ID为first和second两个元素的文字颜色(从而使我们方便地区分两者)。随后用first这个id定义了一个列表元素:

  1. <ul id="first"></ul> 

然后定义一个addMessage函数,每当调用该函数都会创建一个新的列表项元素,为其设置文字内容,然后将其附加到一个现有的元素上:

  1. function addMessage(element, message){  
  2. var messageElement = document.createElement("li");  
  3. messagemessageElement.textContent = message;  
  4. element.appendChild(messageElement);  

如下所示,通过使用内置的方法getElementById来从文档中获取ID为first的元素,然后为该元素添加一条信息,用于告知页面正在加载中:

  1. var first = document.getElementById("first");  
  2. addMessage(first, "Page loading"); 

然后我们又定义了一个列表元素,这次给该列表赋予的ID属性为second:

  1. <ul i d="second"></ul> 

最后将这两个事件处理器附加到Web页面的body上。每当用户移动鼠标,鼠标移动事件处理器就会被执行,然后该处理器调用addMessage方法,为第二个列表元素加上一句话“Event: mousemove”。

  1. document.body.addEventListener("mousemove", function() {  
  2. var second = document.getElementById("second");  
  3. addMessage(second, "Event: mousemove");  
  4. }); 

我们还注册了一个单击事件处理器,每当用户单击页面就会输出该消息“Event: click”,并添加至第二个列表元素中。

  1. document.body.addEventListener("click", function(){  
  2. var second = document.getElementById("second");  
  3. addMessage(second, "Event: click");  
  4. }); 

该应用的运行结果和交互如图2.2所示。

我们还会用这个例子来展示Web应用生命周期阶段之间的不同之处。让我们从页面构建阶段开始讲起。


喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973

【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Cisco CCNA 640-802题库

Cisco 640-802 Cisco Certified Network Associate (CCNA) Testinside CCNA 640-802 V14 最新题库与Testinside CCNA 640-802 Q&A 192 ...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊