BOM的一些笔记

因为这两天接触react router，对其route组件的history, location两个props有疑惑，不知道它们怎么来的，为什么需要它们。我只知道浏览器环境有个内置的history对象，也知道改变页面的url而不引起刷新就是通过这个history实现的，然后就来翻那本高程2，（话说高程3都要出了，高程2估计不少东西都要过时了吧？）然后了解到这个history在BOM这一章，同时发现BOM里也有个location对象，不晓得和上面的location是不是一回事，就系统的学习一下BOM相关的知识。
笔记主要内容：BOM定义，window, location, history三个对象的一些API

BOM定义

The Browser Object Model (BOM) is a browser-specific convention referring to all the objects exposed by the web browser.
---- wiki

BOM是一种浏览器特定的约定，指的是浏览器公开的所有对象。核心对象是window。JavaScript = ECMAScript + DOM + BOM。ECMAScript是JS的核心，但是在浏览器环境中，BOM才是真正的核心。BOM为我们提供了很多API，用于访问浏览器，注意是浏览器，而非浏览器装载的页面，这块是DOM的事情。那BOM可以为我们做那些东西？我们的知道浏览器上一般会有

image.png

这样的东西，分别是后退、前进、刷新，这些就可以通过BOM提供的history做到；还有浏览某网站时明明你什么都没点，然后它给你蹦出来个弹窗，这些也可以同过BOM做到。

window对象

• window对象是BOM的核心对象，是浏览器的一个实例，每个tab都有自己的window。同时window还是ECMAScript规定的Global对象，在全局环境下定义的变量、对象、函数自动成为window对象的属性或方法，即都可以通过window.来访问到。但是var a = 1与window.a不同的是后者可以通过delete删除，而前者这样操作的话会返回false

• window.innerHeight和window.outerHeight

  
  
  

  image.png

如图（chome浏览器），outer是指整个浏览器窗口的尺寸，这里也就是图片尺寸，而inner指的是页面区（调试区、工具栏、导航栏都不算）的尺寸，也就是图中红色框框的尺寸（包含滚动条）。图中的两个log，第一个是非全屏时各个尺寸的数据，第二个是全屏时各个尺寸的数据，前后对比可以发现非全屏下inner和outer差了16px的，起先我以为是滚动条的尺寸，后面发现全屏下不管有没有滚动条二者都相等，所以最终才发现是图中红色涂漆的部分，左右各8px，chorme浏览器在全屏下这8px的区域是没有的。所以如果你把调试区移到窗口的水平方向，innerWidth的尺寸会变更小。
高程2上说document.body.clientWidth也表示innerWidth相同的尺寸，但实际上好像并不是这样：首先高度明显不对。宽度方面，有垂直滚动条时，全屏下的body.clientWidth和innerWidth一致，这倒是符合高程2所说的（这和下面定义又有出入，应该是把滚动条的宽度算进去了）；可是在非全屏下滚动条的二者就差了个滚动条的距离。前面说的这些情况还都是在body的尺寸没有显示设置的情况，显示设置之后，显然对应的clientWidth或clientHeight就固定的。

image.png

The Element.clientWidth property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin. --MDN

• window.moveTo, window.moveBy, window.resizeTo, window.resizeBy只对通过window.open()生出来的窗口有效。
• window.open(urlString nameString, characteristicString)
  第三个参数为窗口特性参数，可以规定生成的窗口的尺寸，位置等等
  通过（也只有通过）此方法生成一个窗口时，window.name === nameString，否则window.name === ''
  
  

  image.png

location对象

image.png

location.assgin(url)与location = url与location.href = url`效果一样。
除了location.hash，其余的属性被赋值时都会引起浏览器的刷新，同时浏览器的历史记录会生成一个新的记录。如果不想如此，可以用replace代替assign。

history对象

• go(num|url)
• back()
• forward()
• length：返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。然后在此基础上每次装载一个新的页面length+1
• replaceState()：带有三个参数，一个状态对象，一个标题（现在被忽略了），以及一个可选的URL地址。
• pushState()：带有三个参数，一个状态对象，一个标题（现在被忽略了），以及一个可选的URL地址。
  push和replace的用法一致。通过他们改变地址栏的url并不会引起浏览器的刷新，不同的是前者是改变当前的页面，history.length不变；后者会生成一个新的history记录，history.length+1，而且通过back可以返回到执行pushState()操作前的页面。