【前端基础】2 - 6 BOM

§2 - 6 BOM

§2 - 6 BOM

2-6.1 BOM 简述

浏览器对象模型（Browser Object Model, BOM），是 JavaScript 的一个组成部分。

上图介绍了一个 HTML 页面中的对象层次结构。

window 对象是全局对象，也是 JavaScript 中的顶级对象；
document, alert(), console.log() 都是属于 window 的属性，基本的 BOM 属性都属于 window；
所有通过 var 定义在全局作用域里的变量、函数都会变成 window 对象的属性和方法；
window 对象下的属性和方法在调用时，可省略 window；

2-6.2 定时器函数

在前面的文章中，我们介绍了函数 serInterval() 可用于设置周期性执行的任务。这里，我们再介绍一个设置一个单次执行的例行性任务的函数：setTimeout()。

setTimeout() 函数用于在至少经过指定超时时间后，执行回调函数所指定的任务。函数会返回一个代表该例行性任务的 ID。

// setTimeout(code, delay)
// 超时时间单位是毫秒
let task = setTimeout(() => {
    console.log('A delayed message.');
}, 1000);
// 至少在经过 1 秒后执行回调函数的代码

实际上，定时器里的回调函数可以通过递归调用自身或采用其他方法，从而实现与 setInterval 一样的周期性任务执行的效果。

// 周期性执行
let task;
const scheduled = function () {
    console.log("A scheduled message.");
    task = setTimeout(() => {
        scheduled();
    }, 1000);
}

// 即时启动任务，或使用定时器启动任务
scheduled();

若要取消某个定时器，可使用 clearTimeout() 清除计时器。

// 清除前文设置的定时器
clearTimeout(task);

2-6.3 并发模型与事件循环

现代计算机都是基于多核处理器运行，可以很好地处理并发任务。JavaScript 也具备一定的并发能力，通过并发模型与事件循环实现。

我们先来看两端示例代码。

示例一：

console.log('AAA');
setTimeout(() => {
    console.log('BBB');
}, 1000);
console.log('CCC');

毫无疑问，由于定时器时间较长，这段示例程序的执行结果为：

AAA
CCC
BBB

示例二：倘若我们将定时器的时间设置为 0，情况如何？

console.log('AAA');
setTimeout(() => {
    console.log('BBB');
}, 0);
console.log('CCC');

修改后的示例程序的执行结果会完全按照顺序结构执行，得到 AAA -> BBB -> CCC 吗？

结果是不会：

AAA
CCC
BBB

这看起来有些反直觉，毕竟定时器设置为 “立即触发“ 的情况下，怎么会出现意料之外的结果？这就涉及到 JavaScript 的事件循环机制。

在介绍事件循环前，我们先来看看 JavaScript 的运行时：

函数调用形成了一个由若干个帧（frame）组成的栈（stack）。栈帧存储了函数执行时的参数、局部变量。堆（heap）存储了对象。队列（queue）是一个 JavaScript 运行时存储待处理消息的消息队列。其中，每一个消息都关联着一个用以处理该消息的回调函数。

例如，当我们为 HTML 元素设置一个事件处理器时，一旦与之绑定的事件被触发，该事件就会连同其关联的回调函数（在这里，称为事件处理函数）作为一个消息存放到消息队列中以待处理。同样地，通过 setInterval 和 setTimeout 设置的例行性任务也会在计时器超时时作为消息存放到消息队列中以待处理。

那么，这些消息何时被处理？又是如何被处理的呢？

这就涉及到同步与异步的概念。栈中函数中的代码，会按照代码声明的顺序依次执行，不可被中断（不同于 C 与 Java），这样的任务称为同步任务。而存放到消息队列中待执行的代码，视为异步任务。同步任务的执行顺序一定，不会发生改变。而队列中的消息，考虑到入列时间、超时设置、在队列中的位置等因素，起执行顺序不一定。

以前文示例程序为例，无论是示例一或示例二，示例程序中的代码都会在执行栈（主线程）中执行。因而会优先在控制台中依次打印出 AAA 和 CCC。当遇到了定时器，定时器中的回调函数会被视作耗时的异步任务，从而作为事件被添加到消息队列中。当执行栈中的任务执行完毕，主线程才会从消息队列中抽取出一个任务，处理完毕后，再重复上述动作。

因此，JavaScript 的并发模型执行过程可简单看作如下过程：

正是由于异步任务的执行时间不确定，在介绍定时器时，我们称回调函数会在至少该时间段后执行。

此外，每一条消息只有在被完整执行后，下一条消息才能够被处理。因此，若一条消息的处理事件过长，应当将该消息拆分为若干个更小的消息，以缩短单个消息的处理时间。

2-6.4 `location` 属性

location 的数据类型是对象，是 window 对象的一个属性，它拆分并保存了 URL 地址的各个组成部分。

location 对象含有以下属性：

href：当前页面的 URL 地址，可修改该属性以重定向页面；
search：获取当前 URL 的查询字段，即 ? 后所带的参数；
hash：当前 URL 的哈希值，即 # 后部分，用于在不刷新页面的情况下显示不同页面（单页面应用）；
reload()：重新加载页面，传入参数 true 强制页面重载；
replace()：使用新的 URL 替换当前资源，但替换的新页面不会保存在会话历史中，用户不能使用后退按钮回退到先前的页面；

2-6.5 `navigator` 属性

navigator 的数据类型是对象，是 window 对象的一个属性，它记录了浏览器自身相关的信息。

该对象具备许多属性，这里列出部分属性：

cookieEnabled：布尔值，是否忽略 Cookie；
clipboard：Clipboard 对象，提供向系统剪贴板读写的方法；
geolocation：一个 Geolocation 对象，访问设备的地理位置信息；
language：DOMString 对象，表示用户的首选语言，通常是浏览器用户界面的语言，若未知则为 null；
languages：表示用户已知语言的 DOMString 数组，按优先顺序排列；
online：布尔值，表明浏览器是否联网；
userAgent：返回浏览器的用户代理；

以下是一个检测用户代理的自执行函数：

!(function () {
    const userAgent = navigator.userAgent;
    // 检查是否为 Android 或 iOS
    const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/);
    const ios = userAgent.match(/(iPhone\sOS)\s([\d_]+)/);
    // 判断是否满足跳转至移动端站点的条件
    if (android || ios) {
        location.href = '...';
    }
})();