【前端】JavaScript-BOM

目录

一、BOM概述

BOM的构成

二、window对象的常见事件

窗口加载事件

调整窗口大小事件

三、定时器

1.setTimeout()定时器

停止setTimeout()定时器

2.setInterval()定时器

停止setInterval()定时器

this的指向

四、JS执行机制

同步任务

异步任务

执行机制

五、location对象

 location对象的属性

 location对象的方法

六、navigator对象

七、history对象

---

一、BOM概述

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

BOM的构成

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

1.它是JS访问浏览器的一个接口

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

在调用的时候可以省略window。对话框都属于window对象方法。

注意：window下的一个特殊属性window.name

二、window对象的常见事件

窗口加载事件

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

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

注意：

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

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

DOMContentLoaded事件触发时，仅当DOM加载完成，不包含样式表，图片，flash等。IE9以上才支持。

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

调整窗口大小事件

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

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

注意：

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

三、定时器

1.setTimeout()定时器

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

用于设置一个定时器，该定时器在定时器到期后执行调用函数。

注意：

1. 延迟时间单位为毫秒，可以省略，但是省略默认为0
2. 这个调用函数可以直接写函数还可以写函数名，还有一个写法'函数名()'，但不提倡
3. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
4. 调用函数也称为回调函数callback，这个函数需要等待时间，时间到了才去调用这个函数

停止setTimeout()定时器

        window.clearTimeout(timeoutID)

2.setInterval()定时器

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

区别：setTimeout()定时器只调用一次，setInterval()定时器每隔一个时间调用一次。

停止setInterval()定时器

        window.clearInterval(intervalID);

this的指向

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

四、JS执行机制

JS是单线程语言。

为了解决时间等待问题，利用多核cpu的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。于是JS中出现了同步和异步。

同步任务

同步任务都在主线程上执行，形成一个执行栈

异步任务

JS的异步任务是通过回调函数实现的。

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

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

执行机制

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

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

五、location对象

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

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

 location对象的属性

 location对象的方法

六、navigator对象

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

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

七、history对象

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