前端入门：JS -- BOM (JS执行机制) P10121896-10121916

BOM 浏览器对象模型

1、概述

BOM提供了与浏览器窗口进行交互的对象；

BOM的一系列对象都有很多方法和属性，其中顶级对象是window；

document 包含在 window 中，所以 DOM 是在 BOM 的范围内。

 

window 对象：

是 JS 访问浏览器窗口的一个借口；

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

 

2、window对象的常用事件

窗口加载事件：

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

当文档页面全部加载完成后（包括脚本文件、CSS文件等），就触发此事件，调用里面的的事件处理函数；

可以把 JS 放在 HTML文档的前面或其他位置，也不会影响效果。

 

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

仅当 DOM 加载完成后触发，不包括CSS样式表、图片、flash等；

加载速度比 load 快，在页面图片很多的情况下避免等待时间过长。

 

 

调整窗口大小事件：

                          window.onresize = function () {...}      或     window.addEventListener ( 'resize', function () {...} )

窗口大小发生像素变化就触发，常用于响应式布局。

 

window.InnerWidth

 

3、定时器

window 提供了两种定时器：

（1）setTimeout

                                   window.setTimeout ( 调用函数, 延迟时间 )

在设定的延迟时间到了以后就执行调用函数，它属于回调函数 callback；

使用时 window 可以省略，直接写 setTimeout ()；

延迟时间只写一个数字，单位为毫秒，也可省略不写，延迟时间就为0。

 

                                   window.clearTimeout ( 定时器名 )

取消之前通过 setTimeout 建立的定时器。

 

（2）setInterval

                      window.setInterval ( 调用函数, 间隔时间 )            window.clearInterval ( 定时器名 )        

使用方法与  setTimeout 相同，但 setInterval 是每间隔指定的时间，就调用一次函数，会不断地重复调用；

 

 

this 指向问题

一般是谁调用了对象，this 就指向谁：

1. 全局作用域或普通函数中，this 指向 window对象；
2. 方法函数中，this 指向调用者；
3. 构造函数中，this 指向构造函数的实例对象。

 

 

4、JS执行队列           

JS 的一大特点就是单线程，按程序的排列顺序来执行；

H5 的新标准提出了 JS 的同步和异步：

• 同步还是按顺序执行的单线程；
• 异步可以创建多线程，同时执行多个任务，是通过回调函数实现的。

 

执行机制：

1. 程序中所有任务分为同步任务和异步任务，同步任务都放在主线任务的执行栈中，先按顺序执行同步任务；
2. 当主线中出现了异步任务（回调函数），就将其放到任务队列（消息队列）中；
3. 当执行栈中的所有同步任务完成后，再依次读取任务队列中的异步任务，并将读取到的任务放到执行栈中去执行。

 

异步进程处理：

回调函数一般是要满足某个条件才触发事件处理程序，比如鼠标点击click，倒计时完成等，

所以主线中的异步任务会等到被触发之后，才把任务放到任务队列中去等待执行。

 

主线程不断地获得任务、执行任务，并重复这个过程，这种机制被称为事件循环（event loop）。

       

 

5、window 提供的对象

location 对象    

 window 对象提供了 location 属性，用于获取或设置窗体的 URL，也可用于解析 URL；

location 属性返回的是一个对象。

 

URL：

统一资源定位符（Uniform Resource Locator，URL）是互联网上标准资源的地址，包含文件的位置以及浏览器如何处理的信息；

语法格式为             protocol://host[:port]/path/[?query]#fragment

 

location 对象的属性和方法：

对象属性	说明
location.href	获取或者设置整个 URL，跳转页面
location.host	返回主机域名
location.port	返回端口号，若未写则返回空字符串
location.pathname	返回路径
location.search	返回参数 query
location.hash	返回片段 fragment

 

对象方法	说明
location.assign()	设置 URL 跳转页面，可记录历史并后退页面
location.replace()	替换当前页面的 URL，不能后退页面
location.reload()	重新加载页面，若括号里参数为true，则强制刷新

 

 

navigator 对象

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

常用 userAgent 属性，可以返回有客户机发送服务器的 user-agent 头部的值；

从而判断用户是在哪种终端打开页面的，然后跳转到相应样式的页面：

 

 

history 对象

history 对象包含用户在浏览器中访问过的URL，可以与浏览器的历史记录进行交互：

对象方法	说明
history.back()	后退页面
history.forward()	前进页面
history.go(参数)	前进后退功能，若参数为1则前进一个页面，若为-1则后退一个页面

 

11.07