Web前端开发学习笔记10--Web API：BOM

1、BOM 概述

• BOM 简介

1、 BOM 是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象（顶级对象）是 window

2、BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法和属性

3、BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

• BOM 的构成

window 对象是浏览器的顶级对象，具有双重角色：

1、是 JS 访问浏览器窗口的一个接口

2、是一个全局对象，定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法

2、window 对象的常见事件

• 窗口加载事件

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

1、window.onload = function() {};

2、window.addEventListener("load",function(){});

3、document.addEventListener('DOMcontentLoaded'，function(){});  
// DOMcontentLoaded 事件仅当 DOM 完成加载时触发，不包括样式表、图片、flash等（IE9+）

注意：

1、有 window.onload 就可以把 JS 代码写到页面元素上方

2、window.onload 传统注册事件方式只能写一次，如果有多个，会以字后一个 window.onload 为准

3、如果使用 addEventListener 则没有限制

• 调整窗口大小事件

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

window.onresize = function(){};

window.addEventListener("resize",function(){});

注意：

1、只要窗口大小发生像素变化，就会触发这个事件

2、经常利用这个事件完成响应式布局，window.innerWidth 当前屏幕的宽度

3、定时器

window 对象提供了两种定时器：

1. setTimeout 定时器

window.setTimeout(调用函数，[延迟的毫秒数]);
  
// 设置一个定时器，该定时器到期后执行调用函数（只调用一次）
// 在调用时 window 可以省略；延时时间单位是毫秒，默认为0，可以省略；调用函数可以直接写函数，或写函数命名
//setTimeout() 调用的函数为回调函数

2. setInterval() 定时器

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

// 重复调用一个函数，每隔这个时间就去调用一次回调函数

3. 停止（清除）定时器

window.clearTimeout(timeoutID | intervalID);  // 参数是定时器的标识符

• this 指向问题

一般情况下，this 的最终指向的是那个调用它对的对象

1、全局作用域或者普通函数中 this 指向全局对象 window（定时器里面的 this 指向 window）
2、方法中谁调用 this 指向谁
3、构造函数中 this 指向构造函数的实例

4、JS 执行队列

JS 语言是单线程语言，同一个时间只能做一件事。比如说我们对某个 DOM 元素进行添加和删除操作，不能同时进行，只能那个先进行添加之后再进行删除。

• 同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一直的、同步的
• 异步：在处理一个任务的同时，还可以处理其他任务
• 区别：这条流水线上各个流程的执行顺序不同

同步任务和异步任务执行过程：

• 同步任务：同步任务都在主线程上执行，形成一个执行栈
• 异步任务：JS 的异步是通过回调函数实现的

一般而言，异步任务有三种类型：

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

• JS 执行机制

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

5、location 对象

5.1 location 对象定义

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

• URL

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

一般语法格式：

protocol://host[:post]/path/[?query]#fragment

组成	说明
protocol	通信协议
host	主机（域名）
port	端口号，省略时为默认端口
path	路径
query	参数，以键值对的形式，通过 & 符号分隔开
fragment	片段 ，# 后面的的内容常见于链接锚点

• 获取 URL 参数

1、去掉多余字符：substr(‘起始位置’,截取的几个字符);
2、利用 = 把字符串分割为数组：split(‘=’);
3、把数据写入指定位置

5.2 location 对象的属性和方法

• location 对象的属性

location 对象属性	返回值
location.href	获取或者设置整个 URL
location.host	返回主机（域名）
location.port	返回端口号，如未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段

• location 对象的方法

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

6、navigator 对象

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

• 判断用户哪个终端打开页面，实现跳转

if((navigator.userAgent.math(/phone|pad|pod|iPhone|ios|iPad|Android|Mobile|BlackBerry|IEMoblie|MQQBrowser|JUC|Fennec|WOSBrowser|BrowserNG|Webos|Symbian|Window Phone)/i)) {
  window.location.href = "";  //手机
}else {
  window.location.href = "";  //电脑
}

7、history 对象

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

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