|
|
|
|
移动端

2.2.2 执行JavaScript代码

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

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

开发者盛宴来袭!7月28日51CTO首届开发者大赛决赛带来技术创新分享

2.2.2 执行JavaScript代码

所有包含在脚本元素中的JavaScript代码由浏览器的JavaScript引擎执行,例如,Firefox的Spidermonkey引擎, Chrome 和 Opera和 V8引擎和Edge的(IE的)Chakra引擎。由于代码的主要目的是提供动态页面,故而浏览器通过全局对象提供了一个API 使JavaScript引擎可以与之交互并改变页面内容。

JavaScript中的全局对象

浏览器暴露给JavaScript 引擎的主要全局对象是window对象,它代表了包含着一个页面的窗口。window对象是获取所有其他全局对象、全局变量(甚至包含用户定义对象)和浏览器API的访问途径。全局window对象最重要的属性是document,它代表了当前页面的DOM。通过使用这个对象,JavaScript代码就能在任何程度上改变DOM,包括修改或移除现存的节点,以及创建和插入新的节点。

让我们看看清单2.1中所示的代码片段:

  1. var first = document.getElementById("first"); 

这个示例中使用全局document对象来通过ID选择一个元素,然后将该元素赋值给变量first。随后我们就能在该元素上用JavaScript代码来对其作各种操作,例如改变其文字内容,修改其属性,动态创建和增加新孩子节点,甚至可以从DOM上将该元素移除。

浏览器API

本书自始至终都会描述一系列浏览器内置对象和函数(例如,window和document)。不过很遗憾,浏览器所支持的全部特性已经超出本书探讨JavaScript的范围。幸好Mozilla为我们提供支持,通过https://developer.mozilla.org/en-US/docs/Web/API,你可以查找到WebAPI接口的当前状态。

对浏览器提供的基本全局对象有了基本了解后,我们可以开始看看JavaScript代码中两种不同类型的定义方式。

JavaScript代码的不同类型

我们已能大致区分出两种不同类型的JavaScript代码:全局代码和函数代码。清单2.2会帮你理解这两种类型代码的不同。

清单2.2 JavaScript全局代码和函数代码

这两类代码的主要不同是它们的位置:包含在函数内的代码叫作函数代码,而在所有函数以外的代码叫作全局代码。

这两种代码在执行中也有不同(随后你将能看到一些其他的不同,尤其在第5章中)。全局代码由JavaScript引擎(后续会作更多解释)以一种直接的方式自动执行,每当遇到这样的代码就一行接一行地执行。例如,在清单2.2中,定义在addMessage函数中的全局代码片段使用内置方法getElementById来获取ID为first的元素,然后再调用addMessage函数,如图2.6所示,每当遇到这些代码就会一个个执行。

反过来,若想执行函数代码,则必须被其他代码调用:既可以是全局代码(例如,由于全局代码的执行过程中执行了addMessage函数代码,所以addMessage函数得意被调用),也可以是其他函数,还可以由浏览器调用(后续会作更多解释)。

在页面构建阶段执行JavaScript代码

当浏览器在页面构建阶段遇到了脚本节点,它会停止HTML到DOM的构建,转而开始执行JavaScript代码,也就是执行包含在脚本元素的全局JavaScript 代码 (以及由全局代码执行中调用的函数代码)。让我们看看清单2.1中的示例。

图2.7显示了在全局JavaScript代码被执行后DOM的状态。让我们仔细看看这个执行过程。首先定义了一个addMessage函数:

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

然后通过全局document对象上的getElementById方法从DOM上获取了一个元素:

  1. var first = document.getElementById("first"); 

这段代码后紧跟着对函数addMessage 的调用:

  1. addMessage(first, "Page loading"); 

这条代码创建了一个新的li元素,然后修改了其中的文字内容,最后将其插入 DOM中。

这个例子中,JavaScript通过创建一个新元素并将其插入DOM节点修改了当前的DOM结构。一般来说,JavaScript 代码能够在任何程度上修改DOM结构:它能创建新的接单或移除现有DOM节点。但它依然不能做某些事情,例如选择和修改还没被创建的节点。这就是为什么要把script元素放在页面底部的原因。如此一来,我们就不必担心是否某个HTML元素已经加载为DOM。

一旦JavaScript引擎执行到了脚本元素中(如图2.5中的addMessage函数返回)JavaScript代码的最后一行,浏览器就退出了JavaScript执行模式,并继将余下的HTML构建为DOM节点。在这期间,如果浏览器再次遇到脚本元素,那么从HTML到DOM的构建再次暂停,JavaScript运行环境开始执行余下的JavaScript代码。需要重点注意:JavaScript应用在此时依然会保持着全局状态。所有在某个JavaScript代码执行期间用户创建的全局变量都能正常地被其他脚本元素中的JavaScript代码所访问到。其原因在于全局window对象会存在于整个页面的生存期之间,在它上面存储着所有的JavaScript变量。只要还有没处理完的HTML元素和没执行完的JavaScript代码,下面两个步骤都会一直交替执行。

1.将HTML构建为DOM。

2.执行JavaScript代码。

最后,当浏览器处理完所有HTML元素后,页面构建阶段就结束了。随后浏览器就会进入应用生命周期的第二部分:事件处理。


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

51CTO读书频道二维码


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

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

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

读 书 +更多

人月神话:32周年中文纪念版

在软件领域,很少能有像《人月神话》一样具有深远影响力并且畅销不衰的著作。Brooks博士为人们管理复杂项目提供了最具洞察力的见解。既有很...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊