08 | 读JavaScript 高程

2020-06-07 本文已影响0人 cemcoe

这一篇呢是第8章，主要涉及 BOM 的相关知识。

先来看BOM，即和浏览器相关地一些东西。

知识点：
1.BOM 中常用的 API 对象有哪些？这些对象都是用来干什么的?
2.窗口的尺寸问题？
3.history 对象？vue router

1.BOM 中常用的 API 对象有哪些？这些对象都是用来干什么的?

主要有这么些个对象：window location navigator screen history

先来看 window 对象，作为对象应该具有属性和方法，然而现实是，为了安全很多方法被浏览器禁用了，现在主要获取一些信息，即获取属性。

window 中有哪些我可能会用到的属性呢？

1.1 窗口的位置
想不想移动浏览器的窗口，出于安全考虑书中的 window.moveTo() 等已经被现代浏览器禁用。

那改变大小总行把，讲真，这部分真乱

1.2 窗口的大小

[window.innerWidth, window.innerHeight, window.outerWidth, window.outerHeight]

，你以为就完了？

在书中有句话是这样说的。

在 Chrome 中，outerWidth、outerHeight 与
innerWidth、innerHeight 返回相同的值，即视口（viewport）大小而非浏览器窗口大小。

但你试试就会发现，这四个值没有一样的。

时代的车轮

时代的车轮滚滚向前。

这么乱我不获取不行吗，还真不行，很多功能可能需要知道浏览器的宽度和高度，比如上拉加载更多的功能，不知道总高度，如何确定用户是否滑倒了底部？在做响应式布局时也需要这部分的信息。

书中还提到两个属性

document.documentElement.clientWidth, document.documentElement.clientHeight

和上面的放在一起看一下：

尺寸

这6个尺寸都代表什么？这些 API 用起来真难受，这里有篇 2009 年关于各种尺寸的文章。 JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度，这个东西用到时再查。

如果考虑到移动端可能情况更加的复杂。

1.3 打开窗口
好嘞，到目前为止，书中提到的方法均被浏览器禁止了，下面来试试打开窗口。

window.open

这个东西有什么应用场景呢？在用户登录时有的网站会 open 一个新窗口，在用户输入密钥后网站会将该输入用户信息的窗口直接关闭。无需用户的确认。

1.4 对话框
可以使用alert confirm() prompt() 但这些默认的对话框有点丑，用的场景不是很多。大家对美都是由追求的。

下面来看第二个对象 location，该对象存储当前窗口中加载文档的信息。

location

这里由和window.open()类似功能的代码。

location.assign('https://cemcoe.com')
location.href = 'https://cemcoe.com'

有些网站喜欢使用这些方法搞劫持。

下面是 navigator 和 screen 对象，略。

下面是 history 对象，这个对象可有点东西。在使用 Vue Router 中时，你一定会遇到它。在Vue Router mode history github 404 问题
这里已经提到过 history 了，这里不再重复。

小结：一个对象拥有属性和方法，但在BOM中的对象，因为早期的滥用，浏览器为了安全，禁止了一些方法，现在多是用来收集信息为其他编码活动做准备。

第9章是客户端检测，浏览器的兼容问题。略。

第10到12章是关于DOM的内容。下面来看一波。