BOM
1.BOM概述
1.1 什么是BOM
BOM ( BrowserObject Model ) 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
1.2 BOM的构成
BOM：浏览器对象模型（Browser Object Model），描述了与浏览器进行交互的方法和接口。由navigator、history、screen、location、window五个对象组成的，最根本对象是window。
window对象是浏览器的顶级对象,它具有双色。
它是JS访问浏览器窗口的一一个接口。
它是一 个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用window对象的属性或方法时，可以省略window，如window.alert()可以省略为alert()
- 注意: window下的一一个特殊属性window.name
2.window对象常见属性
| 属性 | 描述 |
|---|---|
| closed | 返回窗口是否已被关闭。 |
| innerHeight | 返回窗口的文档显示区的高度。 |
| innerWidth | 返回窗口的文档显示区的宽度。 |
| outerHeight | 返回窗口的外部高度，包含工具条与滚动条 |
| outerWidth | 返回窗口的外部宽度，包含工具条与滚动条。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| screenLeft、screenX | 返回相对于屏幕窗口的x坐标 |
| screenTop、screenY | 返回相对于屏幕窗口的y坐标 |
3.window对象常见事件
3.1 onload()
窗口（页面)加载事件**，当文档内容完全加载完成会触发该事件**(包括图像、脚本文件、CSS文件等),就调用的处理函数。
js入口函数
window.onload = function() {
console.log('页面已经加载完毕')
}或者
window.addEventListener("load",function(){}) ;注意:
1.有了window.onload就可以把JS代码写到head标签里,因为onload等页面内容全部加载完毕,再去执行处理函数。
2.window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload 为准。
3.如果使用addEventListener则没有限制
document.addEventListener ( 'DOMContentLoaded' , function() { })- DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片, flash等等。
- le9以上才支持
- 如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间，交互效果就不能实现,必然影响用户的体验,此时用DOMContent loaded事件比较合适。
3.2 onresize()
window.onresize是调整窗口大小加载事件
注意:
1.只要窗口大小发生像素变化,就会触发这个事件。
2.我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度
window.onresize = function() {
// ***
}
window.addEventListener("resize", ()=>{
// ***
}) ;3.3 onscroll()
这个 onscroll 事件是当浏览器的滚动条滚动的时候触发
window.onscroll = function () {
console.log('浏览器滚动了')
}注意：
前提是页面要超过浏览器的可视窗口才可以
3.4 Window对象常用方法
window对象的方法通常都是直接调用，并不需要使用：window.funcName()调用。 下面是一些常见的方法：
alert()：警告框prompt()：输入框confirm()：内容框 返回true 或 falseopen()：打开具有指定名称的新窗口，括号里写url网址，且需要前面加上https://close():关闭当前窗口
4.定时器
4.1 setTimeout()
作用：setTimeout()方法用于设置一个定时器 ,该定时器在定时器到期后执行调用函数。
语法：
// 5秒后弹窗提示
setTimeout(function(){
alert('hello')
},5000);注意：
- 延迟的毫秒数省略默认是
0，如果写，必须是毫秒。 - 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);4.2 停止setTimeout()
通过clearTimeout()方法取消先前通过调用setTimeout()建立的定时器。需要给定时器先定义一个名称
语法：
var timer =setTimeout(function(){
// ***
},1000)
clearTimeout(timer)4.3 setInterval()
作用：setInterval() 方法重复调用一个函数，每个隔这个时间，就去调用一次回调函数。
语法：
window.setInterval (回调函数，[间隔的毫秒数] );3.间隔的毫秒数省略默认是0 ,如果写,必须是毫秒,示每隔多少毫秒就自动调用这个函数。
4.因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。便于后边停止定时器
4.4 停止setInterval()
通过clearInterval()方法取消先前通过调用setInterval()建立的定时器。
语法：
var timer1 =setInterval(function(){
// ***
},1000)
clearInterval(timer1)4.5 定时器的返回值
定时器代码中为第几个定时器，返回值就是几
返回的是定时器的排名
4.6 定时器防抖
当我们给一个按钮添加了一个定时器，不断点击按钮事件，就会不断触发定时器，这样就会导致定时器不断叠加，速度越来越快
于是，我们需要给定时器设置防抖
- 定时器需要在事件外面声明
- 在事件开始就需要停止定时器
- 之后再给生命的定时器变量赋值一个定时器
- setInterval，setTimeout都适用
var timer box.addEventListener('click',function(){
clearInterval(timer)
timer=setInterval(function(){
//...
},1000)
})5.js执行队列
JS是单线程
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中期中的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是∶如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
5.1 同步和异步
为了解决这个问题，利用多核CPU的计算能力，HTML5提出 Web Worker标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步。
5.1.1 同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭，等水开了( 10分钟之后)，再去切菜，炒菜。
5.1.2 异步
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。对
5.2 同步任务和异步任务
5.2.1 同步任务
同步任务都在主线程上执行，形成一个执行栈。
5.2.2 异步任务
JS的异步是通过回调函数实现的。一般而言，异步任务有以下三种类型1、普通事件，如click、resize等
2、资源加载，如load、error等
3、定时器，包括setlnterval、setTimeout等
5.3 JS执行机制
1.先执行执行栈中的同步任务。
⒉.异步任务（回调函数)放入任务队列中。
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
6.location对象
6.1 location对象作用
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
6.2 URL
统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式为︰
protocol://host[:port ]/path/[?query]#fragment
http://ww.itcaE.cn/index.html?name=andy&age=18#link| 组成 | 说明 |
|---|---|
| protocol | 通信协议常用的http,ftp,maito等 |
| host | 主机(域名)www.itheima.com |
| port | 端口号可选，省略时使用方案的默认端口如http的默认端口为80 |
| path | 路径由零或多个/符号隔开的字符串，一般用来表示主机上的一个目录或文件地址 |
| query | 参数以键值对的形式,通过&符号分隔开来 |
| fragment | 片段#后面内容常见于链接锚点 |
6.3 location对象的属性
| location对象属性 | 返回值 |
|---|---|
| location.href | 获取或者设置整个URL |
| location.hash | 返回片段#后面内容常见于链接锚点 |
| location.search | 可以获取地址栏地址的?及以后的内容 |
| location.host | 返回主机(域名) |
| location.port | 返回端口号如果未写返回空字符串 |
| location.pathname | 返回路径 |
6.4 location 对象的方法
| location对象方法 | 返回值 |
|---|---|
| location.assign() | 跟href一样，可以跳转页面(也称为重定向页面),可以后退页面 |
| location.replace() | 替换当前页面，因为不记录历史，所以不能后退页面 |
| location.reload() | 重新加载页面，相当于刷新按钮或者f5， |
7.navigator 对象
7.1 navigator对象的属性
通过navigator.key获取
| 属性值 | 作用 |
|---|---|
| appName | 返回浏览器名称 |
| apCodeName | 返回浏览器的代码名 |
| appVersion | 返回浏览器的平台和版本信息。 |
| platform | 浏览器的操作系统平台。 |
| cookieEnabled | 是否支持cookie，返回布尔值 |
| online | 返回布尔值，表示浏览器是否联网 |
| userAgent | 返回浏览器用户代理标头。 简称UA 说白了可以确定是什么浏览器 |
| language | 返回浏览器语言。 |
navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。
根据userAgent判断用户浏览器
if(navigator.userAgent.indexOf('iPhone') !== -1){
alert('当前在苹果手机端')
}else if(navigator.userAgent.indexOf('Android') !== -1){
alert('当前在安卓手机')
}else if(navigator.userAgent.indexOf("Chrome") !== -1){
alert('当前在谷歌浏览器')
}else if(navigator.userAgent.indexOf("Safari") !== -1){
alert("当前在safari浏览器")
}else if(navigator.userAgent.indexOf('Firefox') !== -1){
alert('火狐浏览器')
}下面前端代码可以判断用户那个终端打开页面，实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Androd|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser| BrowserNG|Webos|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手机
}else {
window.location.href = "" ; //电脑
}8.history 对象
window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中)访问过的URL。
| history对象方法 | 作用 |
|---|---|
| back() | 可以后退功能back(-1),后退一个页面 |
| forward() | 前进功能 |
| go(参数) | 前进后退功能参数如果是1前进1个页面,2前进两个页面 |
| length | 历史记录个数 （了解） |
9.screen屏幕对象
语法
| 属性 | 描述 |
|---|---|
| width | 获取屏幕宽度（屏幕分辨率） |
| height | 获取屏幕高度（屏幕分辨率） |
| availWidth | 获取屏幕有效宽度（除去任务栏） |
| availHeight | 获取屏幕有效高度（除去任务栏） |
使用
// 获取屏幕宽度高度
console.log(screen.width, screen.height)
// 获取屏幕宽度高度（除去任务栏）
console.log(screen.availWidth, screen.availHeight)