前端小白菜学习之BOM（window、innerWidth、innerHeight、addEventListener等）

一、前言

BOM、DOM，DOM、BOM傻傻分不清楚。有哪些童鞋和我一样，不是特别清楚他们分别是干啥的，他们之间到底有什么关系？以及在使用过程中到底有哪些注意事项呢？

作为一名具备开发优良传统特性的开发，我搜了对于BOM、DOM的解释，由于两块内容偏多，我们本篇文章先写BOM相关，DOM相关下篇文章给出，会在文末给出一些信息预告。

内容较多较长，建议点赞、收藏后再慢慢查看👀。

二、什么是BOM

1.官方解释

在很多前辈的文章里以及某些官方文档里都有对BOM的解释，在这里主要贴出w3c和百度百科找到的相关解释。

1）w3c给出的解释如下：

2）百度百科给出的解释如下：

2.自己对BOM的理解

总结提炼一下就是：BOM（Browser Object Model）是JavaScriopt对浏览器进行链接的一种称呼，通过JavaScriopt对BOM进行操作从而操作浏览器，这些功能分别对应不同的对象、属性和方法，如浏览器窗口的打开关闭、窗口的尺寸、浏览器的历史记录、以及同一存储浏览器需要存储的某些信息的对象等，当然也可以自己依据项目的需要在window里添加该项目所需要的额外的属性、方法和对象。

⚠️注意：

BOM不像DOM有明确的统一的标准，因为每个浏览器都有自己的定义，所以某些属性和方法在使用的过程中，就需要做到兼容，特别是IE有比较多不太一样的地方。

三、BOM所包含的对象和属性-顶层对象window

浏览器通过一个个窗口呈现在用户眼前。该窗口为页面提供一个全局环境，对应的JavaScript语言也存在一个顶层对象，它提供全局环境（即全局作用域），所有代码都是在这个环境中运行。不过，顶层对象在各种实现里面是不统一的。浏览器里面，顶层对象是window，所以我们可以使用window.来对浏览器窗口进行一些操作，前文提到的浏览器窗口的打开关闭、窗口的尺寸、浏览器的历史记录、以及同一存储浏览器需要存储的某些信息的对象等就是由window对象统一管理的。

随便打开一个浏览器，打开该浏览器对应的JavaScript控制台，打印window看看window里面有些什么对象和属性。

我这里是Safari，便截个Safari的控制台打印的window的结果吧。

⚠️注意：

不同的浏览器，或者同一浏览器不同版本，打印出来的window对象可能不同。

四、比较常见或常用的window方法和对象有：

1. 窗口大小(尺寸):

innerWidth：浏览器窗口的内宽度
innerHeight：浏览器窗口的内高度

这两个属性在进行自适应设计/响应式布局时至关重要。不过mdn和w3c对innerWidth和innerHeight的解释有一点差异--对于是否包含滚动条存在不一样的说法，实践是检验真理的唯一标准，打开网页检查器对比看看就知道了。

从图上我们可以看到，Safari浏览器的innerHeight是包含左边滚动条的宽度的，这里不太清楚w3c具体想要表达的不包含滚动条是什么意思，最好的一个方法就是，当我们在书写代码时，手动在控制台打印打印看看你需要兼容的浏览器的innerHeight和innerWidth到底有多大，是否包含滚动条即可。

很多时候这些数据不需要我们记住，只要我们知道有这些需要注意⚠️的点其实也能帮助我们在解决和排查问题的时候提供方向和提高效率

👇小tips：

由于每个浏览器对于属性的定义存在一点差异，所以当我们需要使用浏览器窗口的内高度和内宽度时，需要进行一定的兼容处理，如：

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 

2. 弹出框：

alert()：警告框
confirm()：确认框
prompt()：提示框

在实际开发中，基本不用原生，大部分时候自己封装或者使用已经写好的组件（如antDesign）。

👉alert()的妙用：

有时候在调试过程中，不想看控制台的日志信息也不想用其他的调试方法，可以在你想要调试地方直接使用alert()。亲测非常有用，这个方法还是我的一个同事大佬给我讲的，实名表扬丁玮骑先生。

3. 事件监听：

addEventListener()：添加事件监听
removeEventListener()：移除事件的监听

如下单、支付等关键业务结点，需要监控是否正常运行，可以在这些关键节点添加使用addEventListener监听。addEventListener也可以用于页面自适应的实现，或者实现阻止事件冒泡等。

使用addEventListener()和stopPropagation()实现阻止事件冒泡和事件捕获。

//addEventListener()第三个参数为true处于事件捕获阶段，第三个参数不填或者为false表示处于事件冒泡阶段。
window.addEventListener('click', function(e){
//e.target.nodeName 当前点击的元素
//e.currentTarget.nodeName 绑定事件监听的元素
if(banned){
e.stopPropagation();
alert('你被封禁了');
return;
}
console.log('window 捕获', e.target.nodeName, e.currentTarget.nodeName)
}, true)

4. 代码异常监控：onerror()

代码异常主要是指：1）JS脚本里边存着语法错误；2）JS脚本在运行时发生错误。

window.onerror()可以拿到出错的信息以及文件名、行号、列号，还可以在window.onerror()最后return true让浏览器不输出错误信息到控制台。

onerror()相关的参数：

• message：错误消息（字符串）。
• source：引发错误的脚本的URL（字符串）
• lineno：发生错误的行号（数值）
• colno：发生错误的行的列号（数值）
• error：错误对象（对象）

短暂的一年开发过程中，暂时还未遇到使用onerror的地方，所以没有特别深的感触和干货给大家分享，以后遇到了一定第一时间更文，告诉大家。

5. 定时器

setInterval()：定时每隔多少秒执行一次, 
clearInterval()：解除该定时器, 
setTimeOut()：定时多少秒以后执行, 
clearTimeOut()：解除该定时器

其中setTimeOut()和setInterval()的区别在于和setInterval不管上次的执行结果如何，到时间就执行下一次。后续会出一篇使用setTimeOut实现轮播图及自己对一些关于setTimeOut面试题的思考相关的文章，嘻嘻嘻。

6. 窗口的打开与关闭

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口

在某些业务需求上需要在某个系统添加打开第三方系统软件的跳转按钮，这个时候就可以使用window.open()实现打开窗口跳转到第三方系统。

let win = window.open("about:blank") 
win.location.href="https://segmentfault.com"

注意⚠️：

**1）此处使用location是为了防止直接使用window.open()被浏览器拦截。
2）在实际的项目开发中，使用该方法进行页面跳转时，如果跳转不成功且路径后面是拼接了参数的，就要注意拼接参数后路径的总长度是否过长，对于IE浏览器有路径长度限制，路径过长会导致跳转不成功（本质原因是IE的get对参数长度有限制）。**

7. 数据存储

localStorage对象：持久化存储与跨页面传数据
sessionStorage对象：为会话存储数据。

同一个域名共享同一个 localStorage，无论你打开多少个同一域名的窗口，localStorage的值都是相同的。打开多个相同的URL的Tabs页面，会创建各自的sessionStorage，关闭对应浏览器窗口（Window）/ tab，会清除对应的sessionStorage，即使域名相同，但对应的sessionStorage不会共享，可独立进行增删改用。

⚠️注意：

localStorage 里面存储的数据没有过期时间设置，可以长期保留，即使保存的数据超出了浏览器规定的大小（localStorage和sessionStorage的内存可达5M或更大），也不会清除旧数据，除非人为清除。

// 移除localStorage存储的所有信息
localStorage.clear();

8. 常用的内置对象:location, history, navigator

- location对象

location中文翻译为地址，在浏览器中，它同样承担着地址的重任，不过浏览器中我们称之为网址（URL），location中包含了当前网页URL的信息。为了便于大家的理解，我们使用一个网址（我瞎编的一个）再辅以一个表格，将这个网址拆分开来，将 location 对象的主要属性进行一一陈述，

示例网址：https://chunqiechou.im:80/boo...

属性	含义	实例
hash	url后的hash，包含#的部分	#/q
host	服务器名称+端口（如果有端口号的话）	chunqiechou.im:80
hostname	只含服务器名称	chunqiechou.im
href	可以获取到当前加载页面的完整的url	https://chunqiechou.im:80/boo...
pathname	返回url的目录和（或）文件名	/book/5a7bffadkoejntir3467fjg56v
port	url的端口号，如果不存在则返回空	80
protocol	页面使用的协议，https: / http:	https:
search	返回url的查询字符串，以?开头，包含?	?name=aha&age=20

- history对象

现在我们一起来看看history对象，history 对象包含用户（在浏览器窗口中）访问过的 URL。vue路由的两种模式就利用history对象进行实现的。

保存着⽤⼾上⽹的历史记录，从窗⼝被打开的那⼀刻算起，history 对象是⽤窗⼝的浏览历史⽤⽂档和⽂档状态列表的形式表⽰。 
go()：跳转到指定页面 
back()：返回到上一个页面，
forword()：向前进一个页面， 
length：历史列表中的网址数。即当前页面到底有多少个栈/页面

注意⚠️：

go里面的参数可以为正数可以为负数，只要是整数就可以。
window.history.back() 等同于 window.history.go(-1)以及window.history.forword() 等同于 window.history.go(1)

- navigator对象

Navigator 对象包含有关浏览器的信息。如浏览器的名称、版本、浏览器CPU的登记等。可以使用这些属性进行平台专用的配置。

navigator最常用的属性为userAgent，
返回由客户机发送服务器的user-agent 头部的值
主要用于判断不同浏览器类型，用于不同浏览器页面的适配和兼容等或者不同机型打开不同的页面。

具体的不同浏览器的user-agent长啥样可以点此链接查看

9. 其他

还有两个可能会用到的window的方法，简单给大家介绍一下，具体如何使用，以及使用到的其他场景，欢迎大家评论区留言讨论。

dispatchEvent()：需要程序自主触发的事件，使用该方法
getComputedStyle()：当前元素计算后的样式，有的浏览器不是这个方法或者属性会不同

以上，便是蠢且丑本丑写的全部关于BOM的理解和心得啦，如果有写得不正确的地方，欢迎大佬批评指正，小妹感恩不尽，如果对大家有用的话，欢迎大家评论区留下“111”，如果还有其他你们的见解也记得评论区留下脚印👣。
如果你觉得本文章对你有帮助，你想让更多的人看到，也欢迎转发给你身边的朋友同事学弟学妹学长学姐✌️。
下期和大家分享DOM相关，想知道到底要写和DOM相关的什么内容？你猜我现在告不告诉你，哈哈哈～
see yah🌹