Web API之BOM

系统管理员 2022-12-04 07:40 87阅读 0赞

# BOM游览器对象模型 #

--------------------

### 文章目录 ###

*  BOM游览器对象模型
 *   *  一、BOM的概述
     *  二、window对象的常见事件
     *   *  2-1. 窗口加载事件
         *  2-2. 调整窗口大小事件
         *  2-3. 定时器
         *  2-4. this
     *  三、JS的执行机制
     *   *  3-1. JS 是单线程
         *  3-2. 同步和异步
         *  3-3. JS的执行机制
     *  四、location 对象
     *   *  4-1. 什么是location对象
         *  4-2. location 对象的属性
         *  4-3. location 的方法
         *  4-4. navigator 对象
         *  4-5. history对象

--------------------

## 一、BOM的概述 ##

什么是BOM？：

*  BOM即游览器对象模型，它提供了独立于内容而与游览器窗口进行交互的对象，其核心对象是window
 *  BOM由一系列相关的对象构成，并且每个对象都提供里很多方法与属性
 *  BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM的标准化组织是W3C，BOM最初是Netscape游览器标准的一部分

BOM的构成：

*  window对象是游览器的顶级对象，它具有双重角色
 *  它是JS访问游览器窗口的一个接口
 *  它是一个全局对象，定义在全局作用域中的变量、函数都会变window对象的属性和方法，在调用的时候可以省略window，例如：alert()、prompt()等，这些都属于window对象方法
 *  ！window下的一个特殊属性：window.name

## 二、window对象的常见事件 ##

### 2-1. 窗口加载事件 ###

*  window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件，CSS文件等）就调用的处理函数

window.onload = function() { 
    	console.log("文档内容完全加载后，我才会执行")
    }

*  当DOM加载完成，不包括样式，图片，flash等等；DOMContentLoaded 事件触发

document.addEventListener('DOMContentLoaded', function(){ 
    	console.log("DOMContentLoaded 事件触发时，我才会执行")
    })

注意！：

*  有了window.onload 就可以把JS代码写到页面元素上方（引入的JS文件也可以放在body页面元素上方）
 *  window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
 *  addEventListener 则没有限制
 *  如果页面的图片很多的话，从用户访问到onload触发可能需要的较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适

### 2-2. 调整窗口大小事件 ###

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数

*  只要窗口大小发生像素变化，就会触发这个事件
 *  可以利用这个事件完成响应式布局；window.innerWidth 当前屏幕的宽度

--------------------

### 2-3. 定时器 ###

window对象提供了2个非常好用的方法：定时器

**两种定时器**

*  setTimeout()
 *  setInteval()

**清除定时器**

*  clearTimeout()
 *  clearInteval()

### 2-4. this ###

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象

## 三、JS的执行机制 ##

### 3-1. JS 是单线程 ###

JavaScript语言的一大特点就是单线程，也就是说，同一时间只能做一件事，这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM 而诞生的，比如我们对某一个DOM元素进行添加和删除操作，不能同时进行应该先进行添加，之后再删除

### 3-2. 同步和异步 ###

为了解决这个问题，利用多核CPU 的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，于是JS出现了同步和异步

*  同步任务：它的任务都在主线程上执行，形成一个执行线
 *  异步任务：（JS的异步是通过回调函数实现的，一般而言，异步任务有以下三种类型，）；1，普通事件，如click，resize等；2，资源加载，如load，error等；3，定时器异步任务相关回调函数添加到任务队列中（任务队列也称消息队列）

### 3-3. JS的执行机制 ###

1.  先执行执行栈中的同步任务
2.  异步任务（回调函数）放入任务队列中
3.  一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行；由于主线程不断的重复获取任务，执行任务，再获取再执行，所以这种机制被称为事件循环（event loop）

## 四、location 对象 ##

### 4-1. 什么是location对象 ###

window对象给我们提供了一个location属性由于获取或设置窗体URL，并且可以用于解析URL，因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象

### 4-2. location 对象的属性 ###

*  href: 获取或者设置整个URL
 *  host：返回主机(域名)
 *  port：返回端口号，如果没写返回空字符串
 *  pathname：返回路径
 *  search：返回参数
 *  hash：返回片段（\#后面内容常见于链接锚点）

### 4-3. location 的方法 ###

*  location.assign() 跟href一样，可以跳转页面（也称为重定向页面）
 *  location.replace() 替换当前页面，因为不记录历史，所以不能后退页面
 *  location.reload() 重新加载页面，相当于刷新按钮或者F5，如果参数为true强制刷新ctrl+f5

### 4-4. navigator 对象 ###

navigator 对象包含有关游览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值

### 4-5. history对象 ###

window对象给我们提供了一个history对象，与游览器历史记录进行交互，该对象包含用户（在游览器窗口中）访问过的URL

**history对象的方法：**

*  back()可以后退
 *  forward()前进功能
 *  go(参数)前进后退功能，参数如果是1前进一个页面，-1后退一个页面

小怪留言：有些知识点比较少用到，忘记了不可怕，有空回来看看吖