BOM
1.BOM概述
1.1-什么是BOM
BOM（Browser Object Model）即浏览器对象模型，它提供独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM缺乏标准，javascript语法的标准化组织是ECMA,BOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
| BOM | DOM |
|---|---|
| 浏览器对象模型 | 文档对象模型 |
| 把浏览器当做一个对象看待 | 把文档当做一个对象看待 |
| BOM的*对象是window | DOM的*对象是document |
| 浏览器窗口交互的一些对象 | 操作页面的元素 |
| 浏览器厂商各自浏览器定义的，兼容性较差 | W3C标准 |
1.2-BOM的构成
BOM比DOM大，它包含DOM
window对象是浏览器的*对象,它具有双重角色。
1.它是js访问浏览器的一个窗口。
2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window,alert()、prompt()都属于window的对象方法。
注意：window下的一个特殊属性window.name
不建议在全局下var name
2.window对象常见的事件
2.1-窗口加载事件
window.onload = function(){}
//或者
window.addEventListener("load",function(){});
window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图象、脚本文件、css文件等），就调用处理函数。
注意：window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。而window.addEventListener不存在冲突问题。
document.addEventListener('DOMcontentLoaded',function(){})
DOMcontentLoaded事件触发时，仅当DOM加载完成，不包括样式表、图片、flash等。(IE9以上才支持)
如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。
2.2-调整窗口大小事件
window.onresize = function (){}
//或者
window.addEventListener("resize",function(){});
1.只要窗口大小发生像素变化，就会触发这个事件。
2.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度。
3.定时器
3.1-两种定时器
setTimeout(function(){}，ms);
//和【ms为毫秒，毫秒数到了才调用函数，ms可以省略默认为0】
setInterval(function(){}，ms)
| setTimeout | setInterval |
|---|---|
| 调用一次 | 一直调用 |
3.2-回调函数
setTimeout()我们也称为回调函数callback
普通函数都是按代码顺序直接调用的。
3.3-清除定时器clearTimeout()
clearTimout(定时器名称)
3.4-清除定时器clearInterval()
<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<script>
var begin = document.querySelelctor(".begin");
var stop = document.querySelector(".stop");
var timer =null;
begin.addEvevtListener("click",function(){
timer = setInterval(function(){
consloe.log("你好吗");
},1000);
stop.addEventListener("click",function(){
clearInterval(timer);
})
});
</script>
案例：发送验证短信，60s后才可再次点击
手机号码<input type="number"><button>发送</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener("click",function(){
btn.disabled = ture;
var timer = setInterval(function(){
if(time == 0){//清除定时器
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time =60;
}else{
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
},1000);
})
</script>
3.5-this指向
一般情况下this的最终指向是调用它的对象
1.全局作用域或者普通函数中this指向全局对象window（注意定时器的this指向window）
console.log(this);
function fn(){ console.log(this); }
2.方法调用中，谁调用this指向谁
var o = {
sayHi:function(){
console.log(this);//指向o
}
}
o.sayHi();//o调用
3.构造函数中this指向构造函数的实例
function fun(){
console.log(this);//指向实例fun
}
var fun = new Fun();
4.JS执行机制
4.1-JS是单线程
js语言一大特点就是单线程 。就是说，同一个时间只能做一件事。如对某个DOM进行添加删除菜操作，不能同时进行，应该先添加后删除。
单线程就意味着，所有任务需要排队，前一个任务结束才会执行后一个任务。这样所导致的问题是:如果JS执行时间过长，会造成页面渲染不连贯，导致页面渲染加载堵塞的感觉。
4.2-同步和异步
为了解决这个问题，利用多核CPU的计算能力，HTML5提出web worker标准，允许javasript脚本创建多个线程。于是js出现了同步和异步。
同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务顺序是一致的、同步的。
比如做饭的同步做法：先烧水煮饭，等水开了，再去切菜，炒菜。
异步
在做一件事的同时还可以处理其他事情。
如在烧水的同时，切菜，炒菜。
console.log(1);
setTimeout(function(){
console.log(3);
},0);
console.log(2);
//代码执行结果是123
同步任务
同步任务都在主线程上执行，形成一个执行栈。
如上述代码console.log()、setTimeout()在执行栈上，而setTimeout内的function属于异步任务。
异步任务
js的异步是通过回调函数实现的
一般而言，异步任务有以下三种类型：
1.普通事件，如click、resize
2.资源加载，如load、error等
3.定时器，包括setInterval、setTimeout等
异步任务相关回调函数添加到任务队列中(任务队列也称消息队列）
js执行机制
1.先执行执行栈中的同步任务。
2.异步任务(回调函数）放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
5.location对象
| Location对象方法 | 返回值 |
|---|---|
| Location.assign() | 跟href一样，可以跳转页面（重定向），记录历史可以后退 |
| Location.replace() | 替换当前页面，因为不记录历史，所以不能后退页面 |
| location.raload | 刷新，重新加载页面 |
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="";//电脑
}
一般情况下，该功能是服务端做的
7.history对象
window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL
| history对象方法 | 作用 |
|---|---|
| back() | 可以后退功能 |
| forward() | 前进功能 |
| go(参数) | 1:前进，-1:后退 |
var btn = ducument.querySelector('button');
btn.addEventListener(click'',function(){
//history.forward();
history.go(1);
})