BOM（Browser Object Model）是游览器对象模型
示意图：
- window时游览器内置中的全局对象，所有 Web APIs 的知识内容都是基于 window 对象实现的
- window对象下包含navigator、location、document、history、screen 5个属性，即是BOM（浏览器对象模型）
- document 是实现 DOM 的基础，它其实是依附于 window 的属性。
注：依附于 window 对象的所有属性和方法，使用时可以省略 window
定时器-延时函数
事件名：setTimeout
语法：
setTimeout（回调函数，等待的毫秒数）
清除延时函数（ 与setinterval类似）：
let timer = setTimeout(回调函数,延迟执行毫秒)
clearTimeout(timer)
案例：5秒钟之后消失的广告
<div style="height: 200px;width: 200px;border: black solid;">我是广告！</div>
<script>
setTimeout(() => {
document.querySelector('div').style.display = 'none'
}, 5000);
</script>
拓展
结合递归函数可以是使用setTimeout实现setInterval一样的功能
<script>
function myInterval() {
let date = new Date()
console.log(date.toLocaleString());
// 自己调用自己实现setInterval效果
setTimeout(() => {
myInterval()
}, 1000);
}
myInterval()
</script>
两种定时器对比
- setInterval是重复执行，首次执行会延时
- setTimeout是延时执行，只执行一次
- setTimeout结合递归函数，能实现setInterval的重复执行
- clearTimeout清除由setTimeout创建的任务，clearInterval清除setInterval
js执行机制
js是单线程
JavaScript语言同一时间只能做一件事，这是js单线程的特点。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
同步和异步
为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。
同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务排列顺序一致的、同步的。比如做饭，先切菜再炒菜
异步
与同步相反，同时执行多个任务，比如蒸饭的同时去切菜、炒菜等
同步任务
同步任务都在主线程上执行，形成执行栈
//执行栈
console.log(1);
setTimeout(function () { }, 1000)
console.log(3);
异步任务
js的异步是通过回调函数实现
异步任务有以下三种类型：
- 普通事件，如click、resize等
- 资源加载事件，如load、error等
- 定时器setInterval和setTimeout
异步任务相关添加到任务列队中（任务队列也称为消息队列）
执行机制
- 先执行执行栈中的同步任务
- 异步任务放入任务队列
- 一旦执行栈中的同步任务执行完毕，系统就会按次序任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
图例：
由于主线程不断的重复获得任务、执行任务、在获取任务、再执行。这种机制被称为事件循环（event loop）
location对象
location的数据类型是对象，他拆分并保存URL地址的各个组成部分
属性和方法
| 属性 | 方法 |
|---|---|
| href | 获取完整的URL地址对其赋值应用于地址跳转 |
| search | 获取地址中携带的参数，？后面部分 |
| hash | 获取地址中的哈希值，#后面部分 |
| reload | 用来刷新当前页面，传入参数true时表示强制刷新 |
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'
}
})()
histroy对象
history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
属性和方法
| histroy对象方法 | 作用 |
|---|---|
| back() | 后退功能 |
| forward() | 前进功能 |
| go(参数) | 前进后退功能，参数如果是1前进1个页面 如果是-1后退1个页面 |
本地存储
特性：
- 数据存储在游览器中
- 设置、读取方便、甚至页面刷新不丢数据
- 容量较大，sessionStorage和localStorage约5M左右
loaclStorage
- 生命周期永久生效，除非手动删除，否则关闭页面也会存在
- 可以多窗口（页面）共享（同一游览器可以共享）
- 以键值对的形式存储使用
存储数据
localStorage.setItem(key,value)//vlaue为字符串
获取数据
localStorage.getItem(key)
删除数据
localStorage.removeItem(key)
存储复杂数据类型存储
本地存储只能存储字符串，无法存储复杂数据类型。需要将复杂数据类型转换成JSON字符串，再存储到本地
JSON.stringify（复杂数据类型）序列化
将复杂数据转换成JSON字符串 存储本地
JSON.parse(JSON字符串) 反序列化
将JSON字符串转换成对象 取出时用
sessionStorage（了解）
- 生命周期为关闭游览器窗口
- 在同一窗口下数据共享
- 以键值对的形式存储使用
- 用法跟localStorage基本相同
自定义属性拓展
固有属性：
标签天生自带的属性 比如class id title等, 可以直接使用点语法操作
自定义属性:
由程序员自己添加的属性,在DOM对象中找不到, 无法使用点语法操作,必须使用专门的API
- getAttribute（‘属性名’）//获取自定义属性
- setAttribute（‘属性名’，‘属性值’）//设置自定义属性
- removeAttribute('属性名')//删除自定义属性
-
let box = document.querySelector('.box') box.setAttribute('myid', 'box')//设置myid属性，属性值为box console.log(box.getAttribute('myid'));//获取属性myid的属性值 box.removeAttribute('myid')//删除属性myid
date-自定义属性：
传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以在html5中推出来了专门的data-自定义属性 在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
let box = document.querySelector('.box')
box.setAttribute('myid', 'box')//设置myid属性，属性值为box
console.log(box.dataset.id)
