一、 基本概念
1.1 概述
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM 缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
1.2 构成
BOM 比 DOM更大，它包含DOM。
window 对象是浏览器的顶级对象它具有双重角色。
1.它是 JS 访问浏览器窗口的一个接口。
2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法
在调用的时候可以省略 window，如 alert()、prompt()等
<html>
<body>
<script>
// 定义在全局作用域中的变量、函数都会变成window对象的属性和方法
var a = 'a'
console.log(a)
console.log(window.a)
function fn(){
}
fn()
window.fn()
</script>
</body>
</html>
注意: window下的一个特殊属性 window.name
二、 常见事件
2.1 窗口加载事件
window.onload 是窗口(页面)加载事件, 当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等), 就调用的处理函数。
window.onload =function(){}
或者
window.addEventListener("load" function(){});
<html>
<body>
<script>
// window.onload = function(){
// var btn = document.querySelector('button')
// btn.onclick = ()=>{
// console.log('hello')
// }
// }
// addEventListener 不存在绑定多个事件冲突问题
window.addEventListener('load',()=>{
var btn = document.querySelector('button')
btn.addEventListener('click',()=>{
console.log('hello')
})
})
window.addEventListener('load',()=>{
var btn = document.querySelector('button')
btn.addEventListener('click',()=>{
console.log('world')
})
})
</script>
<button>btn</button>
</body>
</html>
注意
有了 window.onload 就可以把JS 代码写到页面元素的上方,因为 onload 是等页面内容全部加载完毕再去执行处理函数。
window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准
如果使用 addEventListener 则没有限制
补充 document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括式表，图片，flash等等
ie9 以上才支持
如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间,交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适
2.2 调整窗口大小事件
window.onresize =function(){}
window.addEventListener("resize",function(){});
window.onresize 是调整窗口大小加载事件 当触发时就调用的处理函数
注意:
只要窗口大小发生像素变化，就会触发这个事件。
我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度。
2.3 定时器
window 对象给我们提供了2个非常好用的定时器方法
- setTimeout()
- setinterval()
2.3.1 setTimeout
window.setrimeout(调用函数，[延退的毫秒数]);
setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
<html>
<body>
<script>
// 1.这个window在调用的时候可以省略
// 2.这个延时时间单位是毫秒 但是可以省略，如果省略默认的是8
setTimeout(() => {
console.log('time out')
}, 1000);
function callback(){
console.log('callback')
}
// 3.这个调用函数可以直接写函数 还可以写 函数名
setTimeout(callback,1000)
// 不提倡这种写法
setTimeout('callback()',1000)
// 4. 页面中可能存在多个定时器，可以给定时器加标识符
var timer1 = setTimeout(callback,1000)
var timer2 = setTimeout(callback,1000)
</script>
</body>
</html>
2.3.2 clearrimeout
clearrimeout()方法取消了先前通过调用 setrimeout()建立的定时器
注意
window 可以省略
里面的参数就是定时器的标识符
<html>
<body>
<script>
function callback(index){
console.log('callback: ' + index)
}
var timer1 = setTimeout('callback(1)',2000)
setTimeout(()=>{
clearTimeout(timer1)
},1000)
var timer2 = setTimeout('callback(2)',3000)
</script>
</body>
</html>
2.3.3 setInterval
setlnterval0) 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
注意:
window 可以省略
这个调用函数可以直接写函数，或者写函数名或者采取字符串'函数名(0)'三种形式。
间隔的毫秒数省略默认是0,如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
2.3.4 clearInterval
clearInterval()方法取消了先前通过调用 setInterval()建立的定时器
<html>
<body>
<script>
var index = 1
var timer = setInterval(() => {
console.log(index++)
if(index==3){
clearInterval(timer)
}
}, 1000);
</script>
</body>
</html>
注意
window 可以省略
里面的参数就是定时器的标识符
2.3.5 this 指向问题
this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象
<html>
<body>
<script>
// this 指向问题 一般情况下this的最终指向的是那个调用它的对象
// 1. 全局作用域或者普通函数中 this 指向全局对象 window (注意定时器里面的this指向window)
console.log(this);
function fn(){
console.log(this)
};
window.fn()
window.setTimeout(()=>{
console.log(this)
})
// 2. this的最终指向的是那个调用它的对象
var o ={
hello : function(){
console.log(this)
}
}
o.hello()
// 3. 构造函数中的this指向
function fn (){
// this 指向的是实例对象
console.log(this)
}
var func = new fn()
</script>
</body>
</html>
三、 JS 执行队列
3.1 JS 是单线程
JavaScript语言的一大特点就是单线程,也就是说，同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致--JavaScript是为处理页面中用户的交互，以及操作DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是:如果JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
3.2 同步和异步任务执行过程
<html>
<body>
<script>
console.log(1)
setTimeout(() => {
console.log(3)
}, 0);
console.log(2)
</script>
</body>
</html>
同步任务都在主线程上执行，形成一个执行栈。
JS 的异步是通过
回调函数实现的。一般而言，异步任务有以下三种类型:
- 普通事件，如click、resize等
- 资源加载，如load、error等
- 定时器，包括setlnterval、setTimeout等
3.3 执行机制
-
先执行执行栈中的同步任务。
-
异步任务(回调函数)放入任务队列中。
-
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环(event loop)
四、 location 对象
4.1 location 介绍
window 对象给我们提供了一个location属性用于获取或设置窗体的URL, 并且可以用于解析 URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。
4.2 URL
统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式为:
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
4.3 location 对象的属性
4.4 location 对象的方法
<html>
<body>
<div>to baidu</div>
<div>refresh</div>
<script>
var divs = document.querySelectorAll('div')
divs[0].addEventListener('click',()=>{
// 记录历史记录，可以回退
// location.assign('http://www.baidu.com')
// 不记录历史记录
location.replace('http://www.baidu.com')
})
divs[1].addEventListener('click',()=>{
// 相当于刷新按钮, 参数为空或者false直接刷新
// location.reload()
// 强制刷新
location.reload(true)
})
</script>
</body>
</html>
五、 navigator 对象
navigator对象包含有关浏览器的信息,它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的 user-agent头部的值。
下面前端代码可以判断用户那个终端打开页面，实现跳转
六、 history 对象
window 对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中) 访问过的 URL。
