BOM知识梳理

学过前端开发的地球人应该都了解，JavaScript分为三个部分：ECMAScript(JS语言本身基础语法)，DOM(文档对象模型，应用程序编程接口)，BOM(浏览器对象模型)。

BOM，实际上与浏览器有关系。因此浏览器厂商可以按照各自的想法随意去扩展(基于window对象的扩展)。不过，扩展归扩展，每个浏览器之间都遵循着一套标准。学习BOM对于理解JS这门语言仍然是很重要的，因此不能忽视。以下是我的一些总结，给出一些常用方法。并不会细说每个方法如何使用，这篇文章的主要目的，就是希望BOM在我们脑子里形成一个简单的框架。知道一些常用的方法，在遇到问题的时候可以追本溯源。

BOM中存在五个对象：

1. window对象(核心对象)
2. location对象(即是window对象的属性，又是document对象的属性)
3. navigator对象
4. history对象：浏览器前进后退
5. screen对象：可以通过此对象获取移动端理想视口的宽度

其他四个对象都是window对象下的属性，每个对象下都存在一些属性和方法，下面列出几种常见和常使用的方法，同时给出简单的说明。

• window对象(核心对象)的常见方法
  • 异步：XMLHttpRequest构造函数
  • Number数据类型：Number, parseInt, parseFloat, isNaN, isFinite
  • 定时器：setTimeout, setInterval。这里想说明一下的是，setTimeout中回调函数中的this会指向window对象，原因其实很简单。在回调函数作为参数传递给了setTimout, 此时发生this的隐式赋值丢失。还有一个需要注意的是setTimeout的执行顺序问题。
  • url加密：encodeURI, encodeURIComponent方法
  • url解密：decodeURI, decodeURIComponent方法
  • 窗口尺寸：(innerWidth, innerHeight) (outerWidth, outerHeight)，这里要与DOM中的client dimension和offset dimension区分开来，也就是clientWidth(Height) 和 offsetWidth(Height)
  • 窗口位置：(screenLeft, screenTop) (screenX, screenY)
  • 打开新窗口: open方法，此方法可接收三个参数
  • 系统对话框：alert, confirm, prompt方法
• location对象
  • href属性：获取url地址, (也可以通过此属性设置url地址)
  • protocal属性：返回页面使用的协议, (也可以通过此属性设置protocal)
  • host属性：返回服务器名称和端口号，既包括hostname + port. (也可以通过此属性设置host)
  • hostname属性：返回不带端口号的服务器名称, (也可以通过此属性设置hostname)
  • port属性：返回端口号, (也可以通过此属性设置port)
  • pathname属性：返回url目录或文件名, (也可以通过此属性设置pathname)
  • hash属性：返回url中的hash(#content), (也可以通过此属性设置hash)
  • search属性：query string(如?name=keith&height=180), (也可以通过此属性设置search)
  • reload方法：页面以最有效的方式加载。也就是说，如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中加载。如果要强制从浏览器重新加载，可以传递一个true的布尔值。
• navigator对象
  • userAgent：用户代理，查询用户使用的浏览器信息。在移动端上可用于判断用户使用的是哪种类型的移动设备或浏览器