JavaScript函数式编程——页面构建过程

运行时的页面构建过程

生命周期概览

典型客户端Web应用的生命周期从用户在浏览器地址栏输入一串URL，或单击一个链接开始。

1. 页面构建
2. 时间处理：进入循环等待事件发生，发生后调用事件处理器。

页面构建阶段

当Web应用能够被展示或交互之前，其页面必须根据服务器获取的响应（通常是HTML、CSS和JavaScript代码）来构建。

主要的步骤：

1. 解析HTML代码并构建文档对象模型DOM
2. 执行JavaScript代码
   

HTML解析和DOM构建

页面构建阶段始于浏览器接收HTML代码时，该阶段为浏览器构建页面UI的基础。通过解析收到的HTML代码，构建一个个HTML元素，构建DOM。

浏览器可以修正错误的HTML代码

HTML代码和DOM规范

当前的HTML版本为HTML5，DOM的版本为DOM3

在页面构建阶段，浏览器会遇到特殊类型的HTML元素——脚本元素，该元素用于包括JavaScript代码。每当解析到脚本元素时，浏览器就会停止从HTML构建DOM，并开始执行JavaScript代码。

执行JavaScript代码

代码的主要目的是提供动态页面，故而浏览器通过全局对象提供了一个API使JavaScript引擎可以与之交互并改变页面的内容。

浏览器暴露给JavaScript引擎的主要全局对象是window对象，它代表了包含着一个页面的窗口。window对象是获取所有其他全局对象、全局变量（甚至包含用户定义对象）和浏览器API的访问途径。

JavaScript代码的不同类型

function addMessage（element, message）{
	var messageElement = document.createElement("li");
    messageElement.textContent = message;
    element.appendChild(messageElement);
}
var first = document.getElementById("first");
addMessage(first, "Page loading")

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

若想执行函数代码，必须被其他代码调用：即可以是全局代码，也可以是其他代码。

一旦JavaScript引擎执行到脚本元素中JavaScript代码的最后一行，浏览器就退出了JavaScript执行模式，并继续余下的HTML构建为DOM节点。

事件处理

客户端Web应用是一种GUI应用，还会注册事件监听器（或处理器）。

事件处理器概览

浏览器执行环境的核心思想基于：同一时刻只能执行一个代码片段。即所谓的单线程执行模型。所有已生成的事件（无论是用户的，还是服务生成的）都会放在同一个事件队列中，以它们被浏览器检测到的顺序排列。

处理的流程：

• 浏览器检查事件队列头
• 如果浏览器没有在列队中检测到时间，则继续检查
• 如果浏览器在队列头中检测到了事件，则取出该事件并执行相应的事件处理器。在这个过程中，余下的事件在事件队列中耐心等待。

事件是异步的

• 浏览器事件
• 网络事件
• 用户事件
• 计时器事件

注册事件处理器

事件处理器是当某个特定事件发生后我们希望执行的函数。

• 通过把函数赋给某个特殊属性
• 通过使用内置的addEventListener

window.onload = function（）{};

通过这种方式，事件处理就会注册到load事件上。（当DOM已经就绪并全部构建完成，就会触发这个事件）。

document.body.onclick = function（）{};

把函数赋值给特殊属性是一种简单而直接的注册事件处理器方式。但是有个缺点：对于某个事件只能注册一个事件处理器。替代的方式：addEventListener方法让我们能够注册尽可能多的事件。

<script>
document.body.addEventListener（"mousemove", function（） {
	var second = document.getElementById（"second"）;
	addMessage（second, "Event: mousemove"）;
}）;
document.body.addEventListener（"click", function（）{ 
	var second = document.getElementById（"second"）;
	addMessage（second, "Event: click"）;
}）;
</script>

处理事件

主要的思想：当事件发生时，浏览器调用相应的事件处理器。