JavaScript 系列笔记——BOM（叄）

JavaScript 系列笔记：

JavaScript 系列笔记——目录

点击上方链接可查看更多笔记

目录

BOM

1. BOM 概述

2. window 对象的常见事件

3. 定时器

4. JS 执行队列

5. location 对象

6. navigator 对象

7. history 对象

BOM

1. BOM 概述

1.1 什么是 BOM

BOM（Browser Object Model）被称为浏览器对象模型，在这一领域中它提供了一个与内容无关地与浏览器窗口进行交互的对象，并以其核心对象为 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏统一的标准，在 JavaScript 语法方面存在非官方的标准化组织（ECMA），而 DOM 标准则由 W3C 协调制定。此外，在 Netscape 浏览器开发的标准中包含 BOM 的最初元素。

1.2 BOM 的构成

BOM 比 DOM 更大，它包含 DOM。

window 对象是浏览器的顶级对象，它具有双重角色。

1. 该接口用于 JS 语言访问浏览器窗口的功能。
2. 此全局对象提供了多种功能或属性，在定义时即已明确其存在性与多样性。这些变量或函数会成为 window 对象的一部分，并提供相应的功能或属性。无需显式地引用 window 轴心对象即可使用这些功能或属性；例如，在之前的学习中我们接触过的对话框等都是通过 window 方法实现的。

注意： window下的一个特殊属性 window.name

2. window 对象的常见事件

2.1 窗口加载事件

 window.onload = function(){}

    
 window.addEventListener('load', function() {})

在浏览器运行时，在window.onload事件被触发时（表示窗口（页面）的加载事件发生），当文档内容全部成功加载时，该事件会被触发。此时系统会执行相应的处理函数（即调用的处理函数）。这个事件不仅涵盖了图片、JavaScript脚本文件以及CSS样式表文件等内容的正常载入情况，在某些情况下还可能包含外部资源如JavaScript库和样式表资源的正确导入过程。

注意：

可以在 window.onload 事件前将 JavaScript 代码插入到页面元素的顶部位置，在等待页面内容全部加载完毕后才执行处理函数。

window.onload 传统注册事件方式 仅能执行一次；若有多个，则最终采用最后一个 window.onload 执行。

3. 如果使用 addEventListener 则没有限制

    document.addEventListener('DOMContentLoaded', function() {})

DOMContentLoaded事件触发时，在只有在DOM加载完成后才会发生；不包含样式表文件、图片文件以及Flash文件等。

当页面包含大量图片时，在用户访问后执行onload操作可能需要较长时间会导致交互效果无法实现必然会影响用户体验此时建议采用DOMContentLoaded事件以提升用户体验

2.2 调整窗口大小事件

 window.onresize = function() {}

    
 windoe.addEventListener('resize', function() {})

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

注意：

1. 只要窗口大小发生像素变化，就会触发这个事件。

2. 我们常用这个事件来实现响应式布局。通过调用 window.innerWidth 获取当前屏幕的宽度值。

3. 定时器

3.1 两种定时器

window 对象给我们提供了 2 个非常好用的方法-定时器。

• setTimeout()
• setInterval()

3.2 setTimeout() 定时器

    window.setTimeout(调用函数，延迟毫秒数)

setTimeout() 方法用于启动一个定时器，在该定时器失效时执行调用函数。

这个调用函数我们也称为回调函数 callback

普通函数通常按照代码顺序直接执行操作。然而在某些特定场景中需要进行额外处理以确保正确性，在这种情况下我们将其定义为事件驱动型函数并命名为回调函数

简单来说：回调是指当一个函数完成执行后会立即执行另一个函数的行为。其本质是先完成当前任务后立即开始处理下一个任务。

注意：

1. window 可以省略。

该调用功能可以直接表示为一个完整的函数或者以名称的方式进行书写，在具体实现中还可以选择以字符串形式 '函数名()' 的方式来完成操作。其中将功能直接表示为字符串形式的方式不建议采用

3. 延迟的毫秒数省略默认是 0，如果写，必须是毫秒。

4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

3.3 停止 setTimeout() 定时器

    window.clearTimeout(timeoutID)

clearTimeout() 方法取消了先前通过调用 setTimeout() 建立的定时器。

注意：

1. window 可以省略。

2. 里面的参数就是定时器的标识符 。

3.4 setInterval() 定时器

    window.setInterval(回调函数, 间隔毫秒数)

每当setInterval()方法被激活时, 它会周期性地执行一个函数, 并在每个时间段内触发一个回调操作

注意：

1. window 可以省略。

该方法允许我们通过三种不同的方式调用函数：直接使用FunctionName类的实例、明确指定名称或以字符串形式传递'FunctionName()'。

3. 若省略，则默认为零；若指定，则必须使用‘毫秒’单位。
表示每隔指定的‘毫秒’数量就会自动触发该函数。

3. 若省略，则默认为零；若指定，则必须使用"毫秒"单位。
表示每隔指定的"毫秒"数量就会自动触发该函数。

4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

5. 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

3.5 停止 setInterval() 定时器

    window.clearInterval(intervalID)

clearInterval() 方法取消了先前通过调用 setInterval()建立的定时器。

注意：

1. window 可以省略。

2. 里面的参数就是定时器的标识符 。

4. JS 执行队列

4.1 JS 是单线程

单线程是 JavaScript 语言的一个显著特征。也就是说,在同一时间段内只能执行单一任务,这也是该语言的主要目标之一——即旨在处理网页中用户与页面之间的交互,以及操作 DOM 数据结构。例如,在对某个 DOM 元素执行增删操作时,必须先完成增操作后才能进行删操作

单线程意味着每个任务必须依次等待前一个完成。这将导致一个问题：如果JavaScript执行时间过长，则可能导致页面渲染出现断层现象，并给用户带来加载迟缓的感受。

4.2 同步和异步

为解决这一问题而言，在多核处理器的强大计算能力基础上，在该技术标准被HTML5接纳并提出Web Worker规范，并使JavaScript能够建立多个线程。进而导致了同步与异步两种不同的执行模式

同步

在完成前一任务后依次执行后续任务时需要注意的是,程序的执行流程与各任务的安排相互协调一致.例如,在烹饪过程中,我们通常会先烧水煮饭（大约10分钟后）,待水烧开后,则进行切菜、炒菜等后续操作.

异步

当你进行某项任务时, 由于这项任务通常需要较长时间完成, 在你专注完成当前任务的过程中, 可以同时进行其他工作. 例如, 在烹饪中采用分段操作的方法: 当烧水时, 腾出这段时间用于10分钟=\boxed{10}, 切菜、炒菜.

他们的本质区别： 这条流水线上各个流程的执行顺序不同。

4.3 同步和异步

同步任务

同步任务都在主线程上执行，形成一个执行栈 。

异步任务

JS 的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型:

1. 普通事件，如 click、resize 等

2. 资源加载，如 load、error 等

3. 定时器，包括 setInterval、setTimeout 等

异步任务相关回调函数添加到任务队列 中（任务队列也称为消息队列）。

4.4 JS 执行机制

1. 先执行执行栈中的同步任务。

2. 异步任务（回调函数）放入任务队列中。

当所有同步任务完成时（或者当同步 task 完全完成时），系统随后将按照顺序从 task queue 中取出相应的 async task；这些被取出的 async task 将终止其等待状态，并被加入到 stack 中以启动它们的任务处理流程。

因为主线程持续不断地从队列中获取新任务并立即执行当前的任务，在操作系统设计中就形成了一个反复进行的过程。因此这一机制被称为事件循环（event loop）。

5. location 对象

5.1 什么是 location 对象

window 对象包含了一个 location 属性用于获取或设置窗体的 URL 并且能够进行 URL 解析。 由于该属性返回的是一个对象 我们将其也称为 location 对象

5.2 URL

统一资源定位符（URL）是一种用于标识网络资源的标准地址格式。所有网络资源都分配了唯一的URL标识符，并且这种标识符包含了元数据以指示文件的位置和如何由浏览器解析该地址。

URL 的一般语法格式为：

 protocol://host[:port]/path/[?query]#fragment

    
 http://www.itcast.cn/index.html?name=FH&age=18#link

5.3 location 对象的属性

重点：href 和 search

5.4 location 对象的方法

6. navigator 对象

navigator对象包含了关于浏览器的各种信息，并拥有多个属性供使用。其中最常用的属性是userAgent，在此我们可以利用该属性来获取客户端向服务器发送的 user-agent 头部字段所包含的具体值。

下面前端代码可以判断用户那个终端打开页面，实现跳转

 if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS

    
 |Symbian|Windows Phone)/i))) {
    
      window.location.href = ""; //手机
    
 } else {
    
      window.location.href = ""; //电脑
    
 }

7. history 对象

window 支持了一个 history 对象用于与浏览器的历史记录进行交互管理。该对象包含了已访问的 URL 地址。