web 应用程序生命周期

最新推荐文章于 2022-05-10 17:51:44 发布

生活中的思索

最新推荐文章于 2022-05-10 17:51:44 发布

阅读量1.8k

点赞数

文章标签： javascript url html css c语言

本文链接：https://blog.csdn.net/qq_35864642/article/details/78144261

版权

生命周期概述

典型客户端 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
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
web 应用程序生命周期

生命周期概述典型客户端 web 应用程序的生命周期从用户在浏览器的地址栏中键入 URL 或单击链接开始。比方说, 我们想查找一个术语, 并去谷歌的主页。我们键入 URL www.google.com, 如图2.1 中左上角所示。浏览器代表用户制定一个发送到服务器 C 的请求, 它处理请求 D 并制定通常由 HTML、CSS 和 JavaScript 代码组成的响应。当我们的客户端 web 应用程序真
复制链接

扫一扫