JavaScript 学习笔记 —— BOM（一）

幸运丫
272 阅读5分钟

笔记内容为 JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教学 教学课程的整理

BOM 的构成

  • BOM 比 DOM 更大，它包含 DOM

image.png

窗口加载事件

  • window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS 文件等），就调用的处理函数
  • load 等页面内容全部加载完毕，包含页面 dom 元素，图片，flash，css 等等
  • DOMContentLoaded 是 DOM 加载完毕，不包含图片，flash，css 等就可以执行，加载速度会比 load 更快一些

image.png

定时器

  • setTimeout 延时时间到了，就去调用这个回调函数，只调用一次，就结束了这个定时器
  • setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

清除定时器

  • 使用 clearTimeout
<button>点击停止定时器</button>

<script>
    var btn = document.querySelector('button');
    var timer = setTimeout(function() {
        console.log('爆炸了');
    }, 5000)
    btn.addEventListener('click', function() {
        clearTimeout(timer);
    })
</script>
  • 使用 clearInterval
<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>

<script>
    var begin = document.querySelector('.begin');
    var stop = document.querySelector('.stop');
    var timer = null; // 全局变量

    begin.addEventListener('click', function() {
        timer = setInterval(function() {
            console.log('Hello');
        }, 1000);
    })
    stop.addEventListener('click', function() {
        clearInterval(timer);
    })
</script>

this 的指向

  • this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定 this 到底指向谁，一般情况下 this 的最终指向的是那个调用它的对象
    1. 全局作用域或者普通函数中 this 指向全局对象 window (注意定时器里面的 this 指向 window)
    2. 方法调用中，谁调用 this 指向谁
    3. 构造函数中 this 指向构造函数的实例

JS 执行机制

  • JS 是单线程：JavaScript 语言的一大特点就是 单线程，也就是说，同一个时间只能做一件事
  • 这是因为 JavaScript 这门脚本语言诞生的使命所致 —— JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的
  • 比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除
  • 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务
  • 这样导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉
  • 为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个现成，于是，JS 中出现了 同步 和 异步

同步和异步

  • 同步任务：同步任务都在主线程上执行，形成一个 执行栈
  • 异步任务：
    • JS的异步是通过回调函数实现的，一般而言，异步任务有以下三种类型：
      1. 普通事件，如 click、resize 等
      2. 资源加载，如 load、error 等
      3. 定时器，包括 setInterval、setTimeout 等 异步任务相关 回调函数 添加到 任务队列 中（任务队列也称为消息队列）

JS 执行机制

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

image.png

JS 执行机制示例

console.log(1);
document.onclick = function() {
    console.log('click');
}
console.log(2);
setTimeout(function() {
    console.log(3);
}, 3000)

执行流程如下：

  1. console.log(1) 为同步任务，直接执行，控制台输出“1”
  2. document.onclick = fn 的回调函数为异步任务，将 fn 交给异步进程处理模块，在没有执行点击 click 的情况下，不会将 fn 函数放入任务队列
  3. console.log(2) 为同步任务，直接执行，控制台输出“2”
  4. setTimeout(fn, 3000) 的回调函数 fn 为异步任务，将 fn 交给 异步进程处理 模块，三秒之后，该模块将 fn 放入任务队列
  5. 事件循环模块在同步任务执行完之后，不断查看异步任务中是否有待执行的任务，如果有，则会放入主任务栈中
  6. 延时函数的 fn 就被从异步任务放到同步任务中，并且执行，控制台输出“3”
  7. 此时，如果发生了点击事件，异步进程处理模块会将第 2 步的 fn 放入任务队列
  8. 事件循环模块查看到任务队列中有未执行的任务，就会拿到主线程执行栈中
  9. 点击事件回调函数执行，控制台输出“click”

image.png

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

image.png

location 对象

  • 什么是 location 对象：window 对象给我们提供了一个 location 属性 用于 获取或设置窗体的 URL，并且可以用于 解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象
  • URL：统一资源定位符(Uniform Resource Loactor, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它
location 对象方法作用
location.assign()跟 href 一样，可以跳转页面（也称为重定向页面）
location.replace()替换当前页面，因为不记录历史，所以不能后退页面
location.reload()重新加载页面，相当于刷新按钮或者 f5，如果参数为 true，强制刷新 ctrl+f5

navigator 对象

  • navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值

history 对象

  • window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL
history 对象方法作用
back()可以后退功能
forward()前进功能
go(参数)前进后退功能，参数如果是 1 前进 1 个页面，如果是 -1 后退 1 个页面
avatar
文章
阅读
粉丝