系统化学习前端之JavaScript（BOM）

前言

DOM 提供了 JavaScript 操作页面的 API，BOM 提供了 JavaScript 操作浏览器的 API。

BOM

BOM 浏览器对象模型，BOM 提供了很多对象，用于访问浏览器的功能，而 BOM 的核心是 window 对象。

Window

window 对象在 ECMAScript 中替代 Global 对象作为全局作用域，在浏览器中 window 对象对应浏览器的窗口，每个浏览器窗口有一个独立的 window 对象保存窗口信息以及操作窗口的 API。

Window 属性

outerWidth

浏览器窗口宽度。

注意：窗口 = 视口 + 边框 + 状态栏 + ...
outerHeight

浏览器窗口高度。
innerWidth

浏览器视口宽度。
innerHeight

浏览器视口高度。
scrollX

文档水平滚动的距离，即 body 元素距离视口的左边距。

scrollY

文档垂直滚动的距离，即 body 元素距离视口的上边距。

注意：文档区域内滚动距离计算，需要设置区域宽高以及 overflow: auto; 或 overflow: scroll;，借助 DOM 中事件对象中的 event.target.scrollLeft 和 event.target.scrollTop，滚动距离为区域文档宽高的左、上边距。

<style type="text/css">
    .wrapper {
        width: 500px;
        height: 500px;
        border: 1px solid #ccc;
        overflow: auto;
        margin-top: 100vh;
    }
</style>

<div class="wrapper" id="app" onscroll="handleScroll(event)"></div>

<script type="text/javascript">
    var app = document.getElementById('app')

    function createDom(n) {
        var dom = ''
        for(var i = 0; i < n; i ++) {
            dom += `<p>${i}</p>`
        }
        return dom
    }

    var innerDom = createDom(30)

    app.innerHTML = innerDom

    function handleScroll(event) {
        console.log(event.target.scrollTop)
        console.log(window.scrollY)
    }
</script>

Window 方法

alert

警告对话框，只有确定按钮的对话框。
confirm

问询对话框，包含确定按钮和取消按钮的对话框。

prompt

输入对话框，可以输入的对话框。

var input = window.prompt()

console.log(input) // input 为字符串类型

setTimeout

超时调用定时器，setTimeout() 接收两个参数，第一个参数为回调函数，第二个参数为超时时间，单位是毫秒 ms。如 setTimeout(function () {...}, 1000) 表示超过 1000ms 调用回调函数。

注意：超时调用定时器只会在超过设置时间时调用一次。此外，setTimeout 的时间颗粒度为 4ms，即设置超时时间小于 4ms，也会在 4ms以后调用回调函数。
clearTimeout

清除超时调用定时器，clearTimeout() 接收一个参数，参数为超时调用定时器句柄。
```
var timeBar = setTimeout(function () {
    console.log('1s 时间到再执行')
}, 1000)

clearTimeout(timeBar)
```
注意：所谓句柄是指一个表示定时器编号的整数，通过这个编号可以找到对应的定时器。
setInterval

间歇调用定时器，setInterval() 同 setTimeout() 接收同样的参数，但 setInterval() 第二个参数表示间歇时间，如 setInterval(function () {...}, 1000) 表示间隔 1000ms 调用一次回调函数。

注意：间歇调用定时器会在到达设置间隔时间时，多次调用回调函数。

clearInterval

清除间歇调用定时器，同样接受一个参数，参数为间歇调用定时器句柄。

var timeBar = setInterval(function () {
    console.log('每隔 1s 执行一次')
}, 1000)

clearInterval(timeBar)

requestAnimationFrame

JavaScript 动画一直以来都是依赖 setTimeout 和 setInterval 实现的，但对于动画渲染，多久渲染一次才能使得动画更加平滑呢？即如何设置超时时间和间歇时间呢？

多数电脑显示器屏幕刷新率（FPS）是 60 Hz，即屏幕每秒钟刷新60次，由此可以看出 (1000 / 60) = 17ms，即动画间歇时间设置为17ms，刚好与屏幕同时刷新，这样的动画会更加平滑。

requestAnimationFrame() 是对 setTimeout 和 setInterval 的再封装，只接收一个回调函数的参数，时间参数根据屏幕 FPS 自动计算，如 60 Hz，则 17ms，120 HZ，则 8ms 等等。

模拟 setTimeout 单次调用
```
function printTime() {
    var now = new Date()
    console.log(new.toLocaleString())
}

window.requestAnimationFrame(printTime)
```
模拟 setInterval 多次调用
```
function printTime() {
    var now = new Date()
    console.log(new.toLocaleString())
    window.requestAnimationFrame(printTime)
}

printTime()
```
注意：页面中的动画尽量使用 CSS 动画，提高页面性能。
cancelAnimationFrame

清除 requestAnimationFrame，cancelAnimationFrame() 接收一个参数，参数为 requestAnimationFrame 的句柄。
```
var bar = window.requestAnimationFrame(printTime)

window.cancelAnimationFrame(bar)
```
requestIdleCallback

requestAnimationFrame 间歇时间是 17ms，即回调函数执行周期为 17ms。如果回调函数实际执行时间超过 17ms，则后续其他周期的回调函数进入宏队列（宏队列：具体可参考V8 中函数执行）；如果回调函数实际执行时间小于17ms，则存在空闲时间。

requestIdleCallback() 接收两个参数，一个参数为回调函数，另一个参数为超时时间，可以缺省。

若 requestAnimationFrame 存在空闲时间，则执行 requestIdleCallback 的第一个参数回调函数；若 requestAnimationFrame 不存在空闲时间，则根据 requestIdleCallback 的第二个参数超时时间，超过超时时间，则将回调函数添加至宏队列。

注意：
a. requestIdleCallback() 的回调函数接收一个参数，该参数可以判断是否超时，以及空间时间长短。

b. requestIdleCallback 是为了优化性能，提高执行效率，但如果设置超时时间未执行回调函数，则会为性能带来负反馈。

c. requestIdleCallback 多用于页面手机上报用户行为信息、加载 js 或者 css 文件等简单任务，不能做一些性能操作，如修改 DOM 等。
cancelIdleCallback

清除 requestIdleCallback，cancelIdleCallback() 接收一个参数，参数为 requestIdleCallback 的句柄。
```
var bar window.requestIdleCallback(function () {...})

cancelIdleCallback(bar)
```
open

open() 接收两个参数，第一个参数为 url，第二参数为窗口名称，表示以 url 为地址打开一个窗口。

每个窗口都有 name 属性，对应 window.name 属性，窗口名称的值有三种表示：

window.open(url, '_self') 表示当前窗口打开，可后退，即新开窗口的 name 等于当前窗口的 name。

window.open(url, '_blank') 表示新增一个窗口打开，可以打开多个，即新开多个窗口，且窗口的 name 都为 ''。

window.open(url, '自定义名称') 表示新增一个窗口打开，只能打开一个，即新开一个 name 为 自定义名称 的窗口。

注意：

浏览器规定，同一时刻，同名窗口只能打开一个，后打开的会覆盖先打开的，name 为空的窗口可以打开多个，互不影响。

<a href="" target=""></a> 等同于 window.open()，target 属性值用于命名窗口名称。
close

关闭当前窗口。
scrollBy

scrollBy(x, y) 按照指定像素滚动内容位置。
scrollTo

scrollTo(x, y) 将内容滚动至指定坐标。

fetch

异步请求方法，返回一个 promise 对象，可以通过 .then 的方式调用。

window.fetch(url, {
    method: ''，// get, post
    body: '',
    headers: {
        Content-Type: 'application/json'
    },
}).then(res => {
    // 处理响应
})

注意：也可以使用 async await 方式处理。

async function getInfo() {
    try {
        let res = await fetch(url, { options })
        // 处理响应
    } catch (err) {
        // 处理异常
    } finally {
        // 关闭 loading
    }
}

Document

Document 对象主要保存当前窗口网页的信息和操作窗口网页的方法，可以理解为 DOM 对象。

Document 属性

URL

当前页面的 url 路径。
fullscreen

页面是否全屏。
title

页面标题。
hidden

页面是否隐藏。
visibilityState

页面的可见状态，Chrome 浏览器有三个种状态以及对应值：隐藏 hidden，显示 visible，预渲染 prerender。

注意：页面的显示和隐藏切换会触发 visibilitychange 事件。

Document 方法

getElementById

根据 id 属性查询 DOM 元素
getElementByTagName

根据标签名查询 DOM 元素
getElementByClassName

根据 class 属性查询 DOM 元素
getElementByName

根据 name 属性查询 DOM 元素

History

History 对象保存用户浏览网页的历史记录，提供历史记录跳转的 API。History 对象即历史记录栈，可以通过栈指针的方式进行前进和后退操作。

History 方法

go

go() 接收一个参数 n，n 为整型。n 为正，表示前进，n 为负，表示后退。
```
history.go(0) // 刷新

history.go(-1) // 后退一页

history.go(1) // 前进一页
```
注意：可以通过 history.length 查看历史记录栈的长度。
forward

forward() 等同于 go(1)，表示前进一页。
back

back() 等同于 go(-1)，表示后退一页。
pushState

pushState() 接收三个参数，分别为数据对象，标题以及 url。其中数据对象一般为 null，标题为 ''，url 为推入历史记录栈的地址。

注意：pushState 推入 url 不会刷新页面，需要配合 history.go(0) 刷新才会显示 url 地址页面，替换后页面可回退。
replaceState

replaceState() 接收三个参数，分别为数据对象，标题以及 url。其中数据对象一般为 null，标题为 ''，url 替换历史记录栈栈顶的地址。

注意：pushState 替换 url 也不会刷新页面，需要配合 history.go(0) 刷新才会显示 url 地址页面，替换后页面不可回退。

Location

Location 对象保存当前窗口地址栏信息以及地址栏相关操作 API。

Location 属性

Location 属性保存着地址栏完整的 url 信息，以 https://test.ming.com/web/blogs?id=6&state=1#title=javascript&desc=bom 为例。

href

保存完整的 url 信息，如 https://test.ming.com/web/blogs?id=6&state=1#title=javascript&desc=bom。
origin

保存协议，域名，端口信息，如 https://test.ming.com。

注意：端口未显式定义，表示使用 https 的默认端口 443，即 https://test.ming.com:443。
protocol

保存协议信息，如 https:。
host

保存域名，端口信息，如 test.ming.com:443。
hostname

保存域名信息，如 test.ming.com。
port

保存端口信息，如 443。
pathname

保存 path 信息，如 /web/blogs。
search

保存 query 信息，如 ?id=6&state=1。

注意：多条 query 信息使用 &拼接。
hash

保存 hash 信息，如 #title=javascript&desc=bom。

注意：多条 hash 信息使用 &拼接。

Location 方法

assign

assign() 接收一个 url 参数，表示在当前窗口跳转至 url 地址，可后退。
replace

replace() 接收一个 url 参数，表示在当前窗口跳转至 url 地址，不可后退。
reload

reload() 接收一个 boolean 类型参数，默认 false，可缺省，表示普通刷新（资源有缓存，且缓存未过期，则使用缓存，反之则请求服务器）；设置 true，表示强制刷新（清空缓存，资源从服务器请求）。

注意：history.go() 属于普通刷新。

Navigator

Navigator 对象保存当前浏览器信息。

Navigator

language

当前浏览器系统语言，简体中文使用 zh-CN，英文使用 en。
userAgent

用户代理，一个特殊字符串，包含操作系统、浏览器等名称和版本信息。

注意：多浏览器适配需求的时候，需要使用 navigator.userAgent。

Screen

Screen 对象保存屏幕相关信息，多为只读属性，开发较少涉及。

后记

BOM 1 个核心，5 个基本点。1 个核心是 window 对象，window 对象又包含 5 个基本点：document，history，location，navigator，screen。其中 history，location 与页面的状态有关，其他三个对象，开发过程中较少涉及。

posted @ 2023-03-27 17:34 深巷酒阅读(7) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

深巷酒香

All the growth is a leap in the dark.

系统化学习前端之JavaScript（BOM）

前言

BOM

Window

Window 属性

Window 方法

Document

Document 属性

Document 方法

History

History 方法

Location

Location 属性

Location 方法

Navigator

Navigator

Screen

后记

公告