WebAPIs④
1. BOM
1.1 什么是BOM
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。
1.2 BOM的构成
BOM 比 DOM 更大,它包含 DOM。
1.3 顶级对象window
- window对象是JS访问浏览器窗口的一个接口
- window对象是一个全局对象。定义在全局作用域中的变量、函数都会编程window对象的属性和方法。在调用的时候可以省略window,如alert()、prompt()等。
-(window下有一个特殊属性window.name,所以不可以用name做标识符)
1.4 window对象的常见事件
页面(窗口)加载事件(2种)
-
window.onload = function(){}
或者window.addEventListener('load',function(){});
window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。 -
docuemnt.addEventListener('DOMContentLoaded',function(){});
IE9以上支持
DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现,必然影响用户的体验,此时用 DOMContentLoaded 事件比较合适
调整窗口大小事件
window.onresize= function(){}
或者 window.addEventListener('resize',function(){});
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。window.innerWidth
当前屏幕的宽度
1.5 定时器
setTimeout() 炸弹定时器
-
开启定时器
window.setTimeout(回调函数,[延迟的毫秒数]);
(window可以省略;毫秒数默认为0) -
停止定时器
window.clearTimeout(timeoutID);
取消先前通过调用setTimeout()方法建立的定时器
(window可以省略;参数就是定时器的标识符)
setInterval() 闹钟定时器
-
开启定时器
window.serInterval(回调函数,[间隔的毫秒数]);
该方法重复调用一个函数,每隔一个时间段就执行一次回调函数
(window可以省略;间隔的毫秒数默认是0;第一次执行也是间隔一段时间之后) -
停止定时器
window.clearInterval(intervalID);
取消先前通过调用serInterval()方法建立的定时器
(window可以省略;参数就是定时器的标识符)
1.6 this指向问题
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象。
- 全局作用域或者普通函数中this指向全局对象window( 注意定时器里面的this指向window)
- 方法调用中谁调用this指向谁
- 构造函数中this指向构造函数的实例
1.7 location对象
window对象提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以也称这个属性为location对象。
URL
统一资源定位符(Uniform Resource Locator,URL) 是互联网上标准资源的地址。互联网上每一个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器该怎么处理它。
一般语法格式为:protocol://host[:port]/path/[?query]#fragment
组成 | 说明 |
---|---|
protocol | 通信协议 常用的http、ftp、maito等 |
host | 主机(域名) |
port | 端口号 可选,省略时使用方案的默认端口 如http的默认端口为80 |
path | 路径 由零或多个‘/’符号隔开的字符串,一般用来表示主机上的一个目录或文件地址 |
query | 参数 以键值对的形式,通过&符号分隔开 |
fragment | 片段 #后面的内容 常见于链接 锚点 |
location 对象的属性
location 对象属性 | 返回值 |
---|---|
location.href | 获取或者设置整个URL |
location.host | 返回主机(域名) |
location.port | 返回端口号 如果未写返回空字符串 |
location.pathname | 返回路径 |
location.search | 返回参数 |
location.hash | 返回片段 #后面内容 常见于链接 锚点 |
location对象的常见方法
location对象方法 | 返回值 |
---|---|
location.assign() | 可以跳转页面(重定向页面),记录历史 |
location.replace() | 替换当前页面,不记录历史 |
location.reload() | 重新加载页面 当参数为true时强制刷新 |
1.8 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 = ""; //电脑
}
1.9 history对象
window对象给我们提供了一个 history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。
history对象方法 | 作用 |
---|---|
back() | 后退功能 |
forward() | 前进功能 |
go(参数) | 前进后退功能 参数1时前进一个页面,参数为-1时后退一个页面 |
2. JS执行机制
2.1 JS 是单线程
JavaScript语言的一大特点就是单线程,也就是说,同一个事件只能做一件事。
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
2.2 同步任务和异步任务
单线程导致的问题就是后面的任务等待前面任务完成,如果前面任务很耗时(比如读取网络数据),后面任务不得不一直等待。为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制。于是,JS 中出现了同步任务和异步
同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。
异步:在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。
JS中所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。
同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;
异步任务:不进入主线程、而进入”任务队列”的任务,当主线程中的任务运行完了,才会从”任务队列”取出异步任务放入主线程执行。
2.3 JS执行机制(事件循环)
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event loop)