WebAPI_DAY6_BOM
BOM
- BOM(Browser Object Model)浏览器对象模型
- window 是浏览器内置中的全局对象,我们所学习的所有Web APIs的知识内容都是基于window对象实现的
- window 对象下包含了navigator. location. document. history. screen 5个属性,即所谓的BOM ( 浏览器对象模型)
- document 是实现DOM的基础，它其实是依附于window的属性
- 注:依附于window对象的所有属性和方法,使用时可以省略window
定时器-延时函数(setTimeout)
let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)
只执行一次，例如：五秒后消失的广告
对比
- setInterval 的特征是重复执行，首次执行会延时
- setTimeout 的特征是延时执行，只执行1次
- setTimeout 结合递归函数，能模拟setInterval重复执行
- clearTimeout 清除由setTimeout创建的定时任务
递归函数
自己调用自己，不赘述，记得加退出条件
JS执行机制
JS是单线程
JavaScript语言的一-大特点就是单线程，也就是说,同一一个时间只能做- -件事。 这是因为Javascript这门脚本语言诞生的使命所致一JavaScript 是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加， 之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是:如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
同步和异步
同步：前一个任务结束后再执行后一个任务，线性
异步：你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事
情，比如做饭的异步做法，我们在烧水的同时,利用这10分钟，去切菜，炒菜。
他们的本质区别：这条流水线上各个流程的执行顺序不同
同步任务
同步任务都在主线程上执行，形成一个执行栈
异步任务
JS的异步是通过回调函数实现的
一般而言，异步任务有以下三种类型:
- 普通事件，如click、resize等
- 资源加载，如load、error 等
- 定时器，包括setInterval、setTimeout 等
- 异步任务相关添加到任务队列中(任务队列也称为消息队列)
执行机制
- 先执行执行栈中的同步任务。
- 异步任务放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
location对象
location 的数据类型是对象，它拆分并保存了URL地址的各个组成部分
常用属性和方法:
- href 属性获取完整的URL地址,对其赋值时用于地址的跳转
- search 属性获取地址中携带的参数，符号?后面部分
- hash 属性获取地址中的哈希值，符号#后面部分
- reload 方法用来刷新当前页面，传入参数true时表示强制刷新
href
location.href = '要跳转的网址'
执行后跳转到对应网址，如五秒后跳转到别的页面
search
获取地址中携带的参数，符号?后面部分
应用：一个网页表格提交后跳转到另一个网页，网址中包含表格内容
hash
属性获取地址中的哈希值，符号#后面部分
应用：后期vue中不刷新页面，显示不同页面
history对象
| 方法 | 作用 |
|---|---|
| back() | 后退功能 |
| forward() | 前进功能 |
| go(参数) | 前进后退功能，参数如果是1前进一个页面，-1后退一个页面 |
swiper插件
本地存储
- 数据存储在浏览器中
- 设置、读取方便、页面刷新不丢失数据
- 容量较大，sessionStorage和localStorage约5M左右
localStorage
- 生命周期永久生效，除非手动删除否则关闭页面也会存在
- 可以多窗口(页面)共享(同一浏览器可以共享)
- 以键值对的形式存储使用
存储数据
localStorage.setItem(key, value)
获取数据
localStorage.getItem(key)
删除数据
localStorage.removeItem(key)
对于复杂数据类型，需要将复杂数据类型转换称JSON字符串，再存储到本地
JSON.stringify(复杂数据类型)
将复杂数据转换成JSON字符串，存储本地存储中
JSON.parse(JSON字符串)
将JSON字符 串转换成对象，取出时候使用
