JavaScript BOM

1 概述

(1) BOM(Browser Object Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
(2) BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
(3) BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

(4) BOM与DOM区别

<1> BOM是浏览器对象模型；BOM把「浏览器」当做一个「对象」来看待；BOM的顶级对象是window；BOM学习的是浏览器窗口交互的一些对象；BOM是浏览器厂商在各自浏览器上定义的，兼容性较差。
<2> DOM是文档对象模型；DOM就是把「文档」当做一个「对象」来看待；DOM的顶级对象是document；DOM主要学习的是操作页面元素；DOM是W3C标准规范。

(5) BOM的构成

<1> BOM比DOM更大，它包含DOM。
<2> window对象包括history、document、location、navigation、screen
<3> window对象是浏览器的顶级对象，它具有双重角色。
<3.1> 它是JS访问浏览器窗口的一个接口。
<3.2> 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
//访问全局变量完整写法：window.全局变量名

 

2 window对象的常见事件

(1) 窗口加载事件

<1> window.onload=function(){}; 或者 window.addEventListener("load",function(){});
<1.1> window.onload是窗口(页面)加载事件当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)，就调用的处理函数 function(){}。
<1.2> 注意
① 有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
② window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
③ 如果使用addEventListener则没有限制。
<2> Doucment.addEventListener('DOMContentLoaded',function(){}); //IE9以以上才支持。
<2.1> DOMContentLoaded事件触发时，仅当DOM加完成，不包括样式表，图片，flash等等，才执行 function(){}函数。
<2.2> 如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间交互效果就不能实现，必然影响用户的体验，此时用DOMContentloaded事件比较合适。

(2) 调整窗口大小事件

<1> window.onresize=function(){}; 或者 window.addEventristener("resize",function(){});
<2> window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。
<3> 注意
<3.1> 只要窗口大小发生像素变化，就会触发这个事件。
<3.2> 我们经常利用这个事件完成响应式布

 

3 定时器

(1) 两种定时器

window对象给我们提供了2个非常好用的定时器：
setTimeout();
setInterval();

(2) setTimeout()定时器

<1> window.setTimeout(调用函数,延退的毫秒数);  //延迟的毫秒数可不写，即立即执行。
<2> setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
<3> 注意
<3.1> window可以省略。
<3.2> 这个调用函数可以直接写函数，或者写函数名或者采取字符串“函数名()”三种形式。第三种不推荐
<3.3> 延退的毫秒数省略默认是0，如果写，必须是毫秒。
<3.4> 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。即设置一个变量名var st=setTimeout(调用函数,延退的毫秒数)。

(3) 停止setTimeout()定时器

<1> window.clearTimeout(定时器标识符);
<2> clearTimeout()方法取消了先前通过调用 setTimeout()建立的定时器。
<3> 注意
<3.1> window可以省略。
<3.2> 里面的参数就是定时器的标识符。

(4) setlnterval()定时器

<1> window.setInterval(回调函数,间隔的毫秒数);
<2> setlnterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
<3> 注意
<3.1> window可以省略。
<3.2> 这个调用函数可以直接写函数，或者写函数名或者采取字符串“函数名()”三种形式。
<3.3> 间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
<3.4> 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
<4> 与setTimeout()定时器区别
<4.1> setTimeout()延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器。
<4.2> setInterval()每隔过个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数。
<5> 倒计时

var time = 10;
setInterval(function(){
    if(time==0){
        location.href='url';
    }else{
        div.innerHTML='您将在'+time'秒后跳转到首页';
        time--;
    }
},1000)

(5) this

<1> this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。
<2> 现阶段，我们先了解一下几个this指向
<2.1> 全局作用域或者普通函数中this指向全局对象window，注意定时器里面的this指向window。

function fn(){
    console.log(this);
}
fn(); //window

<2.2> 方法调用中，谁调用方法，this指向谁。
① 通过事件调用

function fn(){
    console.log(this);
}
btn.addEventListener('click',fn); //btn

② 通过对象调用

var obj={
    log:function(){
        console.log(this);
    }
}
obj.log(); //obj

<2.3> 构造方法中，this指向构造函数的实例。

function Fn(){
    console.log(this); //fn
}
var fn=new Fn();

4 JS执行机制

(1) JS是单线程

<1> JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。
<2> 这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。
<3> 比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。
<4> 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。
<5> 这样所导致的问题是：如果JS执行的时间过长，这样就会造成页面的演染不连贯，导致页面渣染加载阻塞的感觉。

(2) 同步和异步

<1> 为了解决这个问题，利用多核CPU的计算能力，HTML5提出WebWorker标准，允许JavaScript脚本创建多个线程。于是，S中出现了同步和异步。
<2> 同步任务
同步任务都在主线程上执行，形成一个执行栈。
<3> 异步任务
<3.1> JS的异步是通过回调函数实现的，一般而言，异步任务有以下三种类型：
① 普通事件，如click、resize等
② 资源加载，如load、error等
③ 定时器，包括setlnterval、setTimeout等
<3.2> 异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。

(3) JS执行机制

<1> 先执行执行栈中的同步任务。
<2> 异步任务(即含有回调函数的任务)先交给任务处理程序。
<3> 当异步任务的执行条件被满足时，比如计时器时间耗尽或者点击事件被点击，任务处理程序将异步任务放入任务队列中。
<4> 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
<5> 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环(eventloop)。

 

5 location对象

(1) 概述

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

(2) URL

<1> 统一资源定位符（UniformResourceLocatorURL）是互联网上标准资源的地址。
<2> 互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
<3> URL的一般语法格式为：
protocol://host:port/path?query#fragment
<4> 组成说明
protocol：通信协议，常用的http、ftp、maito等。
host：主机(域名)，www.itheima.com
port：端口号，可选，省略时使用方案的默认端口如http的默认端口为80
path：路径，由零或多个/符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query：参数，以键值对的形式，通过&符号分隔开来
fragment：片段，#后面内容常见于链接铺点

(3) location对象的属性

location.href：获取或者设置整个URL
//可跳转到其他页面：location.href='url';
location.host：返回主机(域名)
location.port：返回端口号如果未写返回空字符串
location.pathname：返回路径
location.search：返回参数
location.hash：返回片段#后面内容常见于链接铺点

(4) location对象的方法

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

 

6 navigator对象

(1) navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。
(2) 下面前端代码可以判断用户那个终端打开页面，实现跳转。

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 = ""; //电脑端网页
}

7 history对象

(1) window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。
(2) history对象的方法
history.back()：可以后退功能。
history.forward()：前进功能。
history.go(参数)：前进后退功能参数如果是1，则前进一个页面；如果是“-1”则后退1个页面。

(3) history对象一般在实际开发中比较少用，但是会在一些OA办公系统中见到。