6. BOM 操作浏览器（1） - window 对象、延时函数、JS执行机制、location 对象

J_Tiffany
101 阅读4分钟

1. window 对象

BOM 全写 Browser Object Model ，是浏览器对象模型

image.png

  • window 是浏览器内置中的 全局对象 ，之前我们所学习的所有 Web APIs 的内容都是基于 window 对象实现的；
  • window 对象下包含了 navigator、location、document、history、screen 5 个属性，即所谓的 BOM （浏览器对象模型）
  • document 是实现 DOM 的基础，它其实是依附于 window 的属性
  • 依附于 window 对象的所有属性和方法，使用时可以省略 window

1.1 延时函数

JS 内置了一个让代码延迟执行的函数 setTimeout ，它只执行一次，所以可以理解为把一段代码延迟执行，通常省略 window

image.png

清除延时函数：

image.png

实例：5 秒之后，文字自动消失

  <body>
    <p>5秒之后自动消失</p>

    <script>
      let p = document.querySelector('p')
      let timer = setTimeout(() => {
        p.style.display = 'none'
      }, 5000)
    </script>
  </body>

递归函数 就是自己调用自己，需要注意的是，递归函数容易造成死递归，要加退出条件：

    <script>
      let num = 0
      function fun() {
        num++
        console.log(123)
        if (num > 5) {
          return
        }
        fun()
      }
      fun()
    </script>

image.png

结合递归函数，可以使用延时函数 setTimeout 实现间歇函数 setInterval 一样的功能：

    <script>
      let p = document.querySelector('p')

      let num = 6
      function fun() {
        num--
        p.innerHTML = `${num}秒之后自动消失`
        if (num < 0) {
          p.style.display = 'none'
          return
        }
        setTimeout(fun,1000)
      }
      fun()
    </script>

image.png

    <script>
      let p = document.querySelector('p')

      function fun() {
        let date = new Date()
        p.innerHTML = date.toLocaleString()
        setTimeout(fun, 1000)
      }
      fun()
    </script>

两种定时器比较：

  • setInterval 的特征是 重复 执行，首次执行会延时；
  • setTimeout 的特征是延时执行，只执行 一次 ；
  • clearTimeout 清除由 setTimeout 创建的定时任务

1.2 JS 执行机制

JS 语言的一大特点就是 单线程 ，也就是说，同一时间只能做一件事。

因为 JS 是为处理页面中用户的交互以及操作 DOM 而诞生的，比如我们对某个 DOM 元素进行添加和删除操作时，不能同时进行，应该先添加，之后再删除。

单线程就意味着所有的任务都需要 排队 ，等前一个任务结束，才会去执行后一个任务，这样所导致的问题就是：如果 JS 执行的时间过长，就会造成页面的渲染不连贯，给人一种页面渲染加载阻塞的感觉。

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

1.3 同步和异步

同步 ：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等 10 分钟水开了之后，再去切菜、炒菜。

异步 ：假设你在做一件耗时很长的事情，在做这件事情的同时，你还可以去处理其他事情。比如做饭的异步做法：我们可以在烧水的同时，利用这 10 分钟的时间去切菜、炒菜。

同步和异步的 本质区别 是，在这条流水线上各个流程的执行顺序不同。

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

image.png

JS 的异步是通过 回调函数 实现的，一般而言，异步任务 有以下三种类型：

  • （1）普通事件，如 click、resize 等；
  • （2）资源加载，如 load、error 等；
  • （3）定时器，包括 setInterval、setTimeout 等

异步任务相关添加到 任务队列 中，任务队列也称为 消息队列

image.png

JS 执行机制 ：

  • （1）先执行 执行栈 中的同步任务；
  • （2）异步任务放入 任务队列 中；
  • （3）一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入到执行栈，开始执行

image.png

image.png

由于主线程不断的重复获得任务 -》 执行任务 -》 再获取任务 -》 再执行，所以这种机制被称为 事件循环（event loop）

image.png

1.4 location 对象

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

属性和方法：

image.png

href 属性示例：

  <body>
    <button>按钮</button>
    <script>
      let btn = document.querySelector('button')

      console.log(location.href) // 获取当前地址

      btn.addEventListener('click', () => {
        location.href = 'https://www.baidu.com' // 地址跳转
      })
    </script>
  </body>

search 属性示例：

准备一个提交数据的页面：

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="index.html">
      <input type="text" name="username">
      <button>提交</button>
    </form>
  </body>
</html>

在跳转的页面 index.html 打印数据：

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script>
      console.log(location.search)
    </script>
  </body>
</html>

hash 属性示例：

image.png

  <body>
    <a href="#one">模拟页面1</a>
    <a href="#two">模拟页面2</a>

    <script>
      console.log(location.hash)
    </script>
  </body>

后期 vue 路由的铺垫，经常用于不刷新页面，显示不同页面

reload 方法：

强制刷新，类似于 Ctrl +F5

  <body>
    <button>刷新</button>

    <script>
      let btn = document.querySelector('button')
      btn.addEventListener('click', () => {
        location.reload(true)
      })
    </script>
  </body>

1.5 navigator 对象

navigator 的数据类型是 对象 ，该对象下记录了浏览器自身的相关信息，这对于网页开发者来说比较有用，它可以帮助开发者检测用户的浏览器环境，从而实现浏览器兼容性处理或者功能检测。

属性对象：

image.png

通过 userAgent 检测浏览器的版本及平台：

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function getExplorerInfo() {
        var explorer = window.navigator.userAgent.toLowerCase()
        if (explorer.indexOf('chrome') >= 0) {
          var ver = explorer.match(/chrome\/([\d.]+)/)[1]
          return { type: 'Chrome', version: ver }
        }
      }
      alert('type:' + getExplorerInfo().type + '\nversion:' + getExplorerInfo().version)
    </script>
  </body>
</html>

1.6 history 对象

history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等，一般在开发中用的比较少，在 OA 等办公系统中常用

image.png

avatar
文章
阅读
粉丝