黑马JS学习笔记——BOM

1.BOM概述

1.1 定义

BOM(browser Object Model)浏览器对象模型，提供了独立于内容而已浏览器窗口进行交互的对象，其核心对象是window.

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

window包括：document location navigation screen history

1.2构成

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

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

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

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

2.window对象的常见事件

2.1窗口加载事件

window.onload

window.onload = function() {
    }

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

注意：有了~就可以吧JS代码写到页面元素的上方；~传统注册事件方式只能写一次，若有多个，以最后一个为准；如果使用addEventListener则没有限制。

DOMContentLoaded 是DOM加载完毕，不包含图片 flash css等就可以执行，加载速度比load更快一些.

2.2 调整窗口大小事件

window.onresize

~是调整窗口大小加载事件

注意：

只要窗口大小发生变化，就会触发这个事件；

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

3.定时器

3.1两种定时器

setTimeout

setInterval

3.2

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

注意：

window可以省略；

延时时间单位是毫秒 ；

调用函数也可以写函数名（不加引号小括号）；

页面中很多定时器，需要加标识符

setTimeout()这个调用函数我们也称为回调函数callback,需要等待时间。

之前讲的element.οnclick=function(){} 或 element.addEventListener("click",fn);里面的函数也是回调函数。

3.3停止setTimeout()定时器 

window.clearTimeout(timeout ID);

window可以省略，参数是定时器的标识符；

3.4

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

~重复调用一个函数，每隔一定时间就去调用一次回调函数，间隔毫秒数默认是0

区分：setTimeout 延时时间到了就去调用这个回调函数，只调用一次，就结束这个定时器；setInterval 每隔一个延时时间就去调用回调函数，会调用很多次。

3.5 停止setInterval()定时器

window.clearInterva;(interval ID);

3.6 this

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

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

4. JS执行机制

4.1 JS是单线程

即同一个时间只能做一件事，所有任务需要排队，前一个任务结束才会执行后一个任务，导致：如果JS执行事件过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

4.3 同步和异步

利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，于是JS出现了同步和异步。

本质区别：这条流水线上各个流程的执行顺序不同

4.4 JS执行机制

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

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

 5. location对象

5.1 什么是~

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

5.2 URL

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

 5.3 location 对象的属性

 重点：href search

5.5 location对象的方法

 6.navigator对象

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

//判断哪个终端打开页面，实现跳转
if ((navigator.userAgent.match(/phone|pad|pod|iphone|ipod|ios|ipad|Android|
Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|WOSBrowser|Browser|BrowserNG|
Webos|Symbian|Windows Phone)/i))){
    window.location.href = "";  //手机
}else {
    window.location.href = "";  //电脑
}

7. history对象

~与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的URL