Web应用的生命周期(客户端)

本文详细解析了Web应用从用户访问页面到关闭页面的完整生命周期,包括客户端和服务端的响应流程,以及如何通过JavaScript监听和处理用户事件,实现页面的动态交互。

  典型的一个Web应用的生命周期从用户在浏览器输入一串URL,或者单击一个链接开始(就是访问一个页面)。而这个生命周期的结束就是我们关闭这个页面。

响应流程:

  1. 用户输入一个 URL(生命周期开始)
  2. 客户端生成一个请求到服务端
  3. 服务端响应这个请求,并发送回客户端
  4. 客户端处理HTML、CSS、Javascript代码构建页面
  5. 构建并返回页面之后,并进行事件监听,一次处理一个事件(这些事件根据用户的操作来进行交互)
  6. 用户退出这个页面(生命周期结束)

例子(本例来自《javascript:忍者秘籍》)

HTML:

<ul></ul>
<ul></ul>

 

javascript:

const ulList = document.querySelectorAll('ul');

function addMessage(element, message) {
    var messageElement = document.createElement('li');
    messageElement.innerHTML = message;
    element.appendChild(messageElement);
}

addMessage(ulList[0], 'Page loading');

document.body.addEventListener('mousemove', function () {
    addMessage(ulList[1], 'Event: mousemove');
});        

document.body.addEventListener('click', function () {
    ddMessage(ulList[1], 'Event: click');
});

 

转载于:https://www.cnblogs.com/duxiu-fang/p/10862047.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值