web 应用程序生命周期

来源：互联网发布：小米平板2windows版编辑：程序博客网时间：2024/05/21 06:55

生命周期概述

典型客户端 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");});

阅读全文

0 0