3-JS进阶BOM

---

3.1 BOM概述

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

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

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

1.DOM和BOM区别

​ BOM 比 DOM 更大，它包含 DOM 。

2.BOM的构成

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

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

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

在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。

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

例：

var num=10;
console.log(window.num);

alert(123);
window.alert(123);

3.2 window对象常见事件

1.窗口加载事件

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

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

注意：

1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，甚至任意位置，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。

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

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

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

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

Ie9以上才支持

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

2.调整窗口大小事件

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

 window.onresize = function(){
    
    }

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

注意：

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

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

3.3 定时器

1.setTimeout() 定时器

​ setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数 。

1.1启动

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

注意：

1. window 可以省略。

2. 这个调用函数可以直接写函数，或者**写函数名（没有括号）或者采取字符串‘函数名()'**三种形式。第三种不推荐。

3. 延迟的毫秒数省略默认是 0，如果写，必须是毫秒。

4. 因为定时器可能有很多经常给定时器赋值一个，所以我们经常给定时器赋值一个标识符。

//第一种
setTimeout(function(){
    
    
	console.log(123);
},3000);
//第二种
var timer1=setTimeout(callback,3000);
//第三种
var timer2=setTimeout('callback()',3000);//不提倡

其中，调用的函数称为“回调函数”。

1.2停止

 window.clearTimeout(timeoutID)

注意：

1. window 可以省略。

2. 里面的参数就是定时器的标识符（上述timer1等）。

2.setInterval() 定时器

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

2.1启动

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

注意：

1. window 可以省略。

2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。

3. 间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。

4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

5. 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

2.2停止

 window.clearInterval(intervalID);

注意：

1. window 可以省略。

2. 里面的参数就是定时器的标识符 。

3.this

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

1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）

2. 方法调用中谁调用this指向谁

3. 构造函数中this指向构造函数的实例

3.4 JS执行队列

JS是单线程。

HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。

1.同步和异步

同步任务

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

异步任务

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

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

1、普通事件，如 click、resize 等

2、资源加载，如 load、error 等

3、定时器，包括 setInterval、setTimeout 等异步任务相关回调函数任务队列（消息队列）

2.JS执行机制

1. 先执行执行栈中的同步任务。

2. 如果遇到异步任务（回调函数）放入任务队列中，暂不执行。

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

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

3.5 location对象

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

1.URL

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

URL 的一般语法格式为：

2.location对象属性

例：

location.href='www.baidu.com';//可以实现立即跳转

3.location对象方法

3.6 navigator对象

navigator 对象包含有关浏览器的信息。

可以用该对象实现判断用户使用的手机端/电脑端，并跳转至对应的网页。

userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    
    
    window.location.href = "";     //手机
 } else {
    
    
    window.location.href = "";     //电脑
 }

3.7 history对象

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