Web前端学习JS篇之“BOM”

本次分享BOM的常见知识：

BOM（核心是对window的操作，主要针对浏览器窗口交互，BOM包含了DOM）

BOM包括：document,location,navigator,screen,history

全局定义的变量会成为window的一个属性，比如var num = 1,其实变成了window.num

全局定义的函数变成了window的一个方法，window.fn(),之前的alert、prompt等都属于window

---

BOM常见的事件

窗口加载事件：window.onload，文档内容全部加载完成才会执行，这就允许了把JS代码放在首部，但此方法只能写一次，使用addEventlistener就没有限制了

DOMContentLoader,DOM加载完就执行，不包括样式表图片等

调整窗口大小：window.onresize,可以完成响应式布局

定时器：

window.setTimeout(回调函数，延迟毫秒数),定时炸弹效果，函数可以直接写入，也可以写名称，外层定义函数

window.clearTimeout(定时器名称)

window.setInterval(回调函数，延迟毫秒数),每间隔这个事件调用一次

window.clearInterval(定时器名称)

---

JS的执行队列

JS是单线程的，但是现在提供了多线程。

JS中的任务分为同步任务和异步任务。同步任务都在主线程上执行，形成一个执行栈。

异步任务都是回调函数，被放在任务队列（消息队列）中，分为三类：

普通事件：click，resize等

资源加载：load、error等

定时器：setInterval、setTimeout等，因为里边包含回调函数

所以JS的执行机制是这样的：先执行主线程执行栈中的同步任务，遇到异步任务时（在此先经过一个异步进程处理来判断是否放入任务队列）就放在任务队列中但不执行，继续去执行完同步任务，再去找异步任务并放在执行栈中去执行（类似于主车道和应急车道）。此过程中异步进程处理会不断地检测，所以形成了一个事件循环的过程。

---

location对象（用于获取或设置或解析URL）

URL：协议+域名:端口+路径+参数+锚点

location.href获取或设置整个URL

location.host返回域名

location.port返回端口

location.pathname返回路径

location.search返回参数

location.hash返回片段，如锚点

常见方法：

location.assign()重定向页面

location.replace()替换当前页面但不能后退

location.reload()重新加载页面

---

navigator对象(浏览器的信息)

UserAgent

---

history对象(与浏览器历史进行交互)

常用方法：

history.forward()

history.back()

history.go(1)/history.go(-1)