生命周期概述
典型客户端 web 应用程序的生命周期从用户在浏览器的地址栏中键入 URL 或单击链接开始。比方说, 我们想查找一个术语, 并去谷歌的主页。我们键入 URL www.google.com, 如图2.1 中左上角所示。
浏览器代表用户制定一个发送到服务器 C 的请求, 它处理请求 D 并制定通常由 HTML、CSS 和 JavaScript 代码组成的响应。当我们的客户端 web 应用程序真正开始使用时, 浏览器收到此响应的时刻。
因为客户端 web 应用程序是图形用户界面 (gui) 应用程序, 所以它们的生命周期遵循其他 GUI 应用程序的类似阶段 (认为标准桌面
应用程序或移动应用程序), 并在以下两个步骤中进行:
1页构建-设置用户界面。
2事件处理-输入一个循环 F 等待事件发生 G, 并开始调用事件处理程序。
应用程序的生命周期将在用户关闭或离开网页时结束 h. 现在让我们来看看一个示例 web 应用程序, 它具有一个简单的 UI, 它可以响应用户操作: 每次用户移动鼠标或单击页面时, 都会显示一条消息。我们将在整个章节中使用这个应用程序。
具有 GUI 响应事件的小型 web 应用程序实例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
</head>
<style>
#first { color: green;}
#second { color: red;}
</style>
<body>
<ul id="first"></ul>
<script>
function addMessage(element, message){
var messageElement = document.createElement("li");
messageElement.textContent = message;
element.appendChild(messageElement);
}
var first = document.getElementById("first");
addMessage(first, "Page loading");
</script>
<ul id="second"></ul>
<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>
</body>
</html>
我们从mousemove 事件处理程序, 它在用户每次移动鼠标时执行, 并且通过调用 addMessage 函数, 将消息 “事件:mousemove” 添加到第二个列表元素:
document.body.addEventListener("mousemove", function() {
var second = document.getElementById("second");
addMessage(second, "Event: mousemove");
});
我们还注册一个 click 事件处理程序, 每当用户单击该页时, 日志消息 “事件: 单击”, 也可以是第二个列表元素:
document.body.addEventListener("click", function(){
var second = document.getElementById("second");
addMessage(second, "Event: click");
});