【Web APIs】BOM 定时器、location对象、navigator对象、history对象

1、BOM概述

1.1 BOM概述

BOM ( Browser Object Model )即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

1.2 BOM的构成

BOM比DOM更大，它包含DOM

• window 对象是浏览器的顶级对象，它具有双重角色
  1. 它是JS访问浏览器窗口的一个接口
  2. 它是一个全局对象。定义在全局作用域中的变量，函数都会变成window对象的属性和方法
     • 在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert)、prompt()等。
     • 注意：window下的一个特殊属性 window.name

2、window对象的常见事件

2.1 窗口加载事件

window.onload = function(){}
或者
window.addEventListener('load',function(){});

window.onload是窗口(页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)，就调用的处理函数。

注意：

1. 有了 window.onload 就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
2. window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
3. 如果使用 addEventListener 没有限制

document.addEventLinstener('DOMContentLoaded',function(){})

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

如果页面的图片很多的话，从用户访问到 onload 触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

2.2 调整窗口大小事件

window.onresize = function(){}
window.addEventLinstener('resize',function(){});

window.onresize 是调整窗口大小加载事件。当触发时就调用的处理函数。

注意：

1. 只要窗口大小发生像素变化，就会触发这个事件。
2. 我们经常利用这个事件完成响应式布局。window.innerWidth可获取当前屏幕的宽度

3、定时器

• window对象提供了两种方法-定时器
  • setTimeout()
  • setInterval()

3.1 setTimeout() 定时器

window.setTimeout(调用函数,[延迟的毫秒数]);

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
setTimeout() 这个调用函数我们也称为回调函数callback

注意：

1. window可以省略
2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。第三种不推荐
3. 延迟的毫秒数省略默认是0，如果写，必须是毫秒。
4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

var timer1 = window.setTimeout(调用函数,[延迟的毫秒数]);

3.2 停止setTimeout() 定时器

window.clearTimeout(timeoutID)

clearTimeout() 方法取消了先前通过调用 setTimeout() 建立的定时器。

3.3 setInterval() 定时器

window.setInterval(调用函数,[间隔的毫秒数]);

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

注意：

1. window可以省略
2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。第三种不推荐
3. 间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示没隔多少毫秒就自动调用这个函数
4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

3.4 停止setInterval() 定时器

window.clearInterval(timeoutID)

clearInterval() 方法取消了先前通过调用 setInterval() 建立的定时器。

3.6 this指向

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象

1. 全局作用域或者普通函数中this指向全局对象window
2. 方法调用中谁调用，this指向谁
3. 构造函数中this指向构造函数的实例

4、JS执行队列

4.1 JS是单线程

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

4.2 同步和异步

同步任务：同步任务都在主线程上执行，形成一个执行栈
异步任务：
JS的异步是通过回调来实现的。一般而言，异步任务有以下三种类型：

1. 普通事件，如click、resize等
2. 资源加载，如load、error等
3. 定时器，包括setInterval、srtTimeout等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

4.3 JS执行机制

1. 先执行执行栈中的同步任务
2. 异步任务（回调函数）放入任务队列中
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结秉等待状态，进入执行栈，开始执行。

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）

5、location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象

5.1 URL

统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL的一般语法格式为：

protocol: / / host [:port] /path/ [ ?query]#fragment
http: / / www.itcast.cn/index.html ?name=andy&age=18#link

组成	说明
protocol	通信协议，常用的http、ftp、maito等
host	主机（域名) www.itheima.com
port	端口号（可选），省略时使用方案的默认端口，如http的默认端口为80
path	路径 由 零或多个‘ / ’符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数，以键值对的形式，通过&符号分隔开来
fragment	片段，#后面内容，常见于链接 锚点

5.2 location对象的属性

location对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机（域名）
location.port	返回端口号，如果未写 返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段，#后面内容常，见于链接锚点

5.3 location对象的方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面（也称为重定向页面）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者f5,如果参数为true 强制刷新ctrl+f5

6、navigator对象

navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。

下面前端代码可以判断用户哪个终端打开页面，实现跳转

		if((navigator.userAgent.match( / (phonel|pad|pod|iPhone|iPod|ios|iPad|AndroMobilelBlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser| BrowserNG | webosl symbian | windows Phone)/i) )) {
            window.location.href = ""; //手机
        } else {
            window.location.href = ""; //电脑
        }

7、history对象

window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中)访问过的URL。

history对象方法	作用
back()	后退功能
forward()	前进功能
go(参数)	前进后退功能，参数如果是1，前进一个页面，如果是-1，后退一个页面