BOM
BOM（Browser Object Model，浏览器对象模型） 是浏览器对象模型，它的存在是为了让程序员能够简单且全面的操作网页。在这个模型中有一个非常重要的对象------ window 对象，它是一个全局对象，也是 JavaScript 中的顶级对象，诸如 document 、alert() 、console.log() 这些对网页的操作命令都是 window 的属性，所有通过关键字定义在全局作用域中的变量、函数都会变成window对象的属性和方法，这些属性和方法被调用时可以省略 window. 。
1 JavaScript 运行机制
JavaScript 语言的一大特点就是单线程，即同一个时间只能做一件事，也就意味着前一个任务结束后才会执行下一个任务，所有任务都需要排队就会带来一个问题：如果代码执行时间过长，就会带来页面渲染的不连贯，导致页面加载阻塞。
为了解决这个问题，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是 JS 中出现了同步和异步。
1 同步和异步
同步就是前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的；异步就是遇到了不能一下完成的任务时，就会在做这件任务的同时去完成其他任务，从而达到“两不耽误”的效果。它们本质区别就是在流水线上的各个流程执行顺序的不同。
2 同步任务和异步任务
同步任务都在主线程上执行，形成一个执行栈。
而JS 的异步是通过回调函数实现的。一般而言，异步任务有以下三种类型:
① 普通事件，如 click、resize 等
② 资源加载，如 load、error 等
③ 定时器，包括 setInterval、setTimeout 等
它们在一开始并不会放到执行栈中去，而是被添加到任务队列中（任务队列也称为消息队列）。
3 事件循环
（1）先执行执行栈中的同步任务。
（2）异步任务放入任务队列中。
（3）一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态并进入执行栈，然后开始执行。
2 location 对象
location 对象拆分并保存了 URL 地址的各个组成部分，其常用属性和方法有：
① href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
<script>
btn.addEventListener('click',()=>{
location.href = 'http://www.baidu.com'
})
</script>点击 btn 按钮就能实现跳转到 “百度一下，你就知道” 。
② search 属性获取地址中携带的参数，符号 ？后面部分
该属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分。
<script>
console.log(location.search);
location.search = 'a=1'
</script>console.log(location.search) 可打印出当前网页的查询参数，若当前网页无查询参数则输出为空；
location.search = 'a=1' 则是往当前的网址后面加上 'a=1' 的查询参数。
③ hash 属性获取地址中的啥希值，符号 # 后面部分
该属性是一个可读可写的字符串，该字符串是 URL 的锚部分。
<script>
console.log(location.hash);
location.hash = 'dadfxw123'
</script>console.log(location.hash) 可打印出当前网页的哈希值，若当前网页无哈希值则输出为空；
location.hash = 'dadfxw123' 则是往当前网址后添加（或修改当前）哈希值为 "dadfxw123"。
④ reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
<script>
const reload = document.querySelector('.reload')
reload.addEventListener('click', function () {
// f5 刷新页面
location.reload()
// 强制刷新 ctrl+f5
// location.reload(true)
})
</script>3 navigation 对象
navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
通过 userAgent 检测浏览器的版本及平台
<script>
console.log(navigator.userAgent);
</script>
4 history 对象
history 的数据类型是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。
<body>
<button>后退</button>
<button>前进</button>
<script>
const back = document.querySelector('button:first-child')
const forward = back.nextElementSibling
back.addEventListener('click', function () {
// 后退一步
// history.back()
history.go(-1) //go(-1) 和 back() 的效果一致
})
forward.addEventListener('click', function () {
// 前进一步
// history.forward()
history.go(1) //go(1) 和 forward() 的效果一致
})
</script>
</body>5 本地存储
本地存储的目的是将数据永久的存储在用户电脑（本地），为用户设置、读取某些数据提供方便，即便刷新页面也不会丢失数据。
5.1 localStorage
① localStorage.setItem('键', '值')
setItem() 有两个功能，如果本地没有该数据则新建，若本地有同键名的数据则修改。
<script>
// localStorage.setItem('键'，'值')
localStorage.setItem('uname', 'aabbcc')
localStorage.setItem('uname', 'ddeeff')// 如果原来有这个键，则是改，如果没有这个键则是增
</script>若要存储复杂数据，则需要先把复杂数据转换为 JSON 字符串，然后再进行存储。
<script>
const obj = {
uname: 'xxx老师',
age: 18,
}
localStorage.setItem('obj', JSON.stringify(obj))
</script>② localStorage.getItem('键')
<script>
获取方式
console.log(localStorage.getItem('键名'))
</script>getItem() 是通过键名获取到键值。
若要获取复杂类型数据，则需要在获取过后将 JSON 字符串转换为相应类型的数据。
<script>
// 把JSON字符串转换为 对象
const str = localStorage.getItem('obj')
console.log(JSON.parse(str))
</script>③ localStorage.removeItem('键')
<script>
删除本地存储
localStorage.removeItem('键名')
</script>通过 removeItem() 寻找所匹配的键名和键值并进行删除。
5.2 sessionStorage
sessionStorage 的生命周期仅为该窗口存在的时间，与 localStorage 类似，其数据以键值对的形式存储使用，并且在同一个窗口（页面）下可以实现数据共享，也是常用的数据存储方式。
扫一扫
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
