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

前言

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

BOM

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

Window

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

Window 属性

  1. outerWidth

    浏览器窗口宽度。

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

  2. outerHeight

    浏览器窗口高度。

  3. innerWidth

    浏览器视口宽度。

  4. innerHeight

    浏览器视口高度。

  5. scrollX

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

  6. 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 方法

  1. alert

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

  2. confirm

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

  3. prompt

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

    var input = window.prompt()

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

  4. setTimeout

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

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

  5. clearTimeout

    清除超时调用定时器，clearTimeout() 接收一个参数，参数为超时调用定时器句柄。

    var timeBar = setTimeout(function () {
    console.log('1s 时间到再执行')
}, 1000)

clearTimeout(timeBar)

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

  6. setInterval

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

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

  7. clearInterval

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

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

clearInterval(timeBar)

  8. 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 动画，提高页面性能。

  9. cancelAnimationFrame

    清除 requestAnimationFrame，cancelAnimationFrame() 接收一个参数，参数为 requestAnimationFrame 的句柄。

    var bar = window.requestAnimationFrame(printTime)

window.cancelAnimationFrame(bar)

  10. requestIdleCallback

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

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

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

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

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

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

  11. cancelIdleCallback

    清除 requestIdleCallback，cancelIdleCallback() 接收一个参数，参数为 requestIdleCallback 的句柄。

    var bar window.requestIdleCallback(function () {...})

cancelIdleCallback(bar)

  12. 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 属性值用于命名窗口名称。

  13. close

    关闭当前窗口。

  14. scrollBy

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

  15. scrollTo

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

  16. 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 属性

  1. URL

    当前页面的 url 路径。

  2. fullscreen

    页面是否全屏。

  3. title

    页面标题。

  4. hidden

    页面是否隐藏。

  5. visibilityState

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

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

Document 方法

  1. getElementById

    根据 id 属性查询 DOM 元素

  2. getElementByTagName

    根据标签名查询 DOM 元素

  3. getElementByClassName

    根据 class 属性查询 DOM 元素

  4. getElementByName

    根据 name 属性查询 DOM 元素

History

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

History 方法

  1. go

    go() 接收一个参数 n，n 为整型。n 为正，表示前进，n 为负，表示后退。

    history.go(0) // 刷新

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

history.go(1) // 前进一页

    注意：可以通过 history.length 查看历史记录栈的长度。

  2. forward

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

  3. back

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

  4. pushState

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

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

  5. 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 为例。

  1. href

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

  2. origin

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

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

  3. protocol

    保存协议信息，如 https:。

  4. host

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

  5. hostname

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

  6. port

    保存端口信息，如 443。

  7. pathname

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

  8. search

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

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

  9. hash

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

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

Location 方法

  1. assign

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

  2. replace

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

  3. reload

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

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

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

  1. language

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

  2. 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  深巷酒  阅读(15)  评论(0)  编辑  收藏  举报