news 2026/6/23 21:54:56

web APIs第五天

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
web APIs第五天

(参考资料黑马程序员,详细资料和学习视频可去b站黑马程序员获取)

一、window对象

1.BOM(浏览器对象模型)

BOM(Browser Object Model ) 是浏览器对象模型
window对象是一个全局对象,也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

2.定时器-延时函数

JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout
语法:
setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行, 平时省略window
清除延时函数:
注意:延时器需要等待,所以后面的代码先执行;每一次调用延时器都会产生一个新的延时器
两种定时器对比:执行的次数
延时函数: 执行一次;
间歇函数:每隔一段时间就执行一次,除非手动清除

3.JS执行机制

(1)JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。
这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后再删除。
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程。于是,JS 中出现了同步和异步。
(2)同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。就是做一件事情时要按事情的顺序进行,当前任务未结束不能开始下一个任务,任务必须有序进行
异步:你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。就是当前任务未结束,可以处理其他任务。
他们的本质区别: 这条流水线上各个流程的执行顺序不同。
同步任务:同步任务都在主线程上执行,形成一个执行栈。
异步任务:JS 的异步是通过回调函数实现的。一般而言,异步任务有以下三种类型:1、普通事件,如 click、resize 等;2、资源加载,如 load、error 等;3、定时器,包括 setInterval、setTimeout 等。异步任务相关添加到任务队列中(任务队列也称为消息队列)。
(3)JS 执行机制
1. 先执行执行栈中的同步任务。
2. 异步任务放入任务队列中。
3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
图中两个例子都输出132,执行栈中执行完后,再去执行任务队列中的等待任务,即使延迟0秒

4.location对象

location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分
常用属性和方法:
href属性获取完整的 URL 地址,对其赋值时用于地址的跳转
search属性获取地址中携带的参数,符号 ?后面部分
hash属性获取地址中的啥希值,符号 # 后面部分
reload方法用来刷新当前页面,传入参数 true 时表示强制刷新

5.navigator对象

navigator的数据类型是对象,该对象下记录了浏览器自身的相关信息
常用属性和方法:通过 userAgent 检测浏览器的版本及平台
例如:
//检测userAgent(浏览器信息)
!(function () {
const userAgent = navigator.userAgent
//验证是否Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone,至移站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})()

6.history对象

history 的数据类型是对象,主要管理历史记录, 该对象与浏览器地址栏的操作相对应,如前进、后退、历史记录等

二、本地存储

1.本地存储介绍

随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。
(1)数据存储在用户浏览器
(2)设置、读取方便、甚至页面刷新不丢失数据
(3)容量较大,sessionStorage和localStorage约 5M 左右

2.本地存储分类

(1)localStorage
作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在
特性:(1)可以多窗口(页面)共享(同一浏览器可以共享);(2)以键值对的形式存储使用
注意:键名是自己命名;键和值都需要加单引号
(2)sessionStorage
特性:(1)生命周期为关闭浏览器窗口(2)在同一个窗口(页面)下数据可以共享(3)以键值对的形式存储使用(4)用法跟localStorage 基本相同

3.存储复杂数据类型

步骤:
(1)问题:本地只能存储字符串,无法存储复杂数据类型。
解决:需要将复杂数据类型转换成JSON字符串,存储到本地
语法:JSON.stringify(复杂数据类型)
(2)问题:因为本地存储里面取出来的是字符串,不是对象,无法直接使用
解决:把取出来的字符串转换为对象
语法:JSON.parse(JSON字符串)
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/23 18:35:28

Nmap深度解析:信息收集

概述 (Overview) Nmap (“Network Mapper”) 是一款开源且功能强大的网络扫描工具,广泛用于网络发现和安全审计。它利用原始 IP 报文来发现网络上的主机、探测这些主机开放的端口、确定端口上运行的服务及其版本、推测目标操作系统,并可通过 Nmap 脚本引…

作者头像 李华
网站建设 2026/6/22 16:40:44

【收藏】零基础学大模型:2025年小白入门完全指南

本文详细介绍AI大模型的多种类型(语言、向量、视觉、多模态等)、获取渠道(官方、第三方付费/免费、逆向工程)及实用方法(提示词优化、智能体应用等)。为2025年AI初学者提供零基础学习指南,帮助普…

作者头像 李华
网站建设 2026/6/22 16:25:47

小程序毕设选题推荐:基于SpringBoot+微信小程序的微信电影院票务系统管理系统设计与实现【附源码、mysql、文档、调试+代码讲解+全bao等】

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围:&am…

作者头像 李华
网站建设 2026/6/22 18:12:29

高通跃龙QCS6490平台视频录制与上传(1): 系统环境搭建指南

本文为系列教程的第一篇,主要介绍在高通QCS6490平台的Linux系统中搭建视频录制与上传功能所需的基础环境配置,涵盖系统工具安装、多媒体框架配置及开发环境准备。1. 平台概述与应用场景 高通跃龙QCS6490是一款基于ARM架构的高性能嵌入式平台,…

作者头像 李华