0
点赞
收藏
分享

微信扫一扫

WebAPIs——BOM


文章目录

  • ​​一. BOM 概述​​
  • ​​1. 什么是 BOM​​
  • ​​2. BOM 的构成​​
  • ​​二. window 对象的常见事件​​
  • ​​1. 窗口加载事件​​
  • ​​2. 调整窗口大小事件​​
  • ​​三. 定时器​​
  • ​​1. 两种定时器​​
  • ​​2. setTimeout() 定时器​​
  • ​​3. 停止 setTimeout() 定时器​​
  • ​​4. setInterval() 定时器​​
  • ​​5. 停止 setInterval() 定时器​​
  • ​​6. this​​
  • ​​四. JS 执行机制​​
  • ​​1. JS 是单线程​​
  • ​​2. 同步和异步​​
  • ​​2.1 同步​​
  • ​​2.2 异步​​
  • ​​2.3 同步任务​​
  • ​​2.4 异步任务​​
  • ​​3. JS 执行机制​​
  • ​​五. location 对象​​
  • ​​1. 什么是 location 对象​​
  • ​​2. URL​​
  • ​​3. location 对象的属性​​
  • ​​4. location 对象的方法​​
  • ​​六. navigator 对象​​
  • ​​七. history 对象​​

一. BOM 概述

1. 什么是 BOM

WebAPIs——BOM_单线程


BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。

BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分

WebAPIs——BOM_窗口大小_02

2. BOM 的构成

BOM 比 DOM 更大,它包含 DOM。

WebAPIs——BOM_窗口大小_03


WebAPIs——BOM_窗口大小_04


注意:window下的一个特殊属性 window.name

二. window 对象的常见事件

1. 窗口加载事件

WebAPIs——BOM_窗口大小_05


window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等), 就调用的处理函数

注意:

  1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方,因为 onload 是等页面内容全部加载完毕,再去执行处理函数。
  2. window.onload 传统注册事件方式 只能写一次,如果有多个,会以最后一个 window.onload 为准。
  3. 如果使用 addEventListener 则没有限制

WebAPIs——BOM_javascript_06


DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等

2. 调整窗口大小事件

WebAPIs——BOM_窗口大小_07


window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

注意:

  1. 只要窗口大小发生像素变化,就会触发这个事件。
  2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

三. 定时器

1. 两种定时器

WebAPIs——BOM_单线程_08

2. setTimeout() 定时器

WebAPIs——BOM_窗口大小_09


setTimeout() 方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。

注意:

  1. window 可以省略。
  2. 这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
  3. 延迟的毫秒数省略默认是 0,如果写,必须是毫秒。
  4. 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。

WebAPIs——BOM_javascript_10

3. 停止 setTimeout() 定时器

WebAPIs——BOM_窗口大小_11


clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。

注意:

  1. window 可以省略。
  2. 里面的参数就是定时器的标识符

4. setInterval() 定时器

WebAPIs——BOM_加载_12


setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数

注意:

  1. window 可以省略。
  2. 这个调用函数可以直接写函数,或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
  3. 间隔的毫秒数省略默认是 0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。
  4. 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
  5. 第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次。

5. 停止 setInterval() 定时器

WebAPIs——BOM_加载_13


clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

注意:

  1. window 可以省略。
  2. 里面的参数就是定时器的标识符

6. this

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象

现阶段,我们先了解一下几个this指向

  1. 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
  2. 方法调用中谁调用this指向谁
  3. 构造函数中this指向构造函数的实例

四. JS 执行机制

1. JS 是单线程

JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后再删除

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

2. 同步和异步

为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程。于是,JS 中出现了同步和异步

2.1 同步

前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。

  • 比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。

2.2 异步

你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。

  • 比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。

2.3 同步任务

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

WebAPIs——BOM_窗口大小_14

2.4 异步任务

WebAPIs——BOM_javascript_15


WebAPIs——BOM_javascript_16

3. JS 执行机制

WebAPIs——BOM_单线程_17


WebAPIs——BOM_javascript_18

五. location 对象

1. 什么是 location 对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL 。 因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象

2. URL

WebAPIs——BOM_加载_19

WebAPIs——BOM_窗口大小_20

3. location 对象的属性

WebAPIs——BOM_加载_21

4. location 对象的方法

WebAPIs——BOM_javascript_22

六. navigator 对象

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

下面前端代码可以判断用户那个终端打开页面,实现跳转

WebAPIs——BOM_javascript_23

七. history 对象

window 对象给我们提供了一个 history 对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的 URL。

WebAPIs——BOM_窗口大小_24


history 对象一般在实际开发中比较少用,但是会在一些 OA 办公系统中见到

WebAPIs——BOM_加载_25


举报

相关推荐

0 条评论