JavaScript学习手册（24）

Posted 2021-05-14 designbyly

BOM

• 浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

• BOM、缺乏标准，javascript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

DOM和BOM的对比

1. DOM：

   文档对象模型

   把文档当做一个对象来看待

   顶级对象是document

   操作页面元素

   W3C标准

2. BOM：

   浏览器对象模型

   把浏览器当做一个对象来看待

   顶级对象是window

   浏览器窗口交互的一些对象

   浏览器产商在各自浏览器上定义的，兼容性较差。

BOM构成

​ window

document location navigation screen history

顶级对象window

window对象是浏览器的顶级对象，它具有双重角色。

1. 是JS访问浏览器窗口的一个接口。
2. 是一个全局对象。定义在全局作用域中的变量，函数都会变成window对象的属性和方法。

window对象的常见事件

1. window . onload = function(){}或者window.addEventListener(“load”,function())

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

   注意：

   ​ 1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。

   ​ 2.window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。

   ​ 3.如果使用addEventListener则没有限制。

2. document .addEventListener(‘DOMContentLoaded’,function(){})

   DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图表，flash等。IE9以上支持。

   **注意：**如果页面图片很多，用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时使用DOMContentLoaded事件比较合适。

3. window.οnresize=function(){}或者windom.addEventListener(“resize”,function(){})

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

   注意：

   ​ 1.只要窗口大小像素变化，就会触发这个事件。

   ​ 2.利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度

定时器

1. setTimeout()

   window.setTimeout(调用函数，[延迟的毫秒数])；

   ​ setTimeout（）方法用于设置一个定时器，该定时器在定时器在定时器到期后执行调用函数。

                 1.  这个window在调用时时候可以省略。回调函数只调用一次。
                    2.  这个延时时间单位是毫秒，但是可以省略，如果省略默认的是0.
                    3.  这个调用函数可以直接写函数。还可以写函数名。
                    4.  另一种写法：函数名（），不提倡的写法
                    5.  多个定时器，给定时器写标识符
   

   setTimeout()也称为回调函数callback

2. 停止setTimeout（）计时器

   window.clearTimeout(timeoutID)

   ​ 此方法取消了先前通过调用setTimeout（）建立的定时器。

   **注意：**1.window可以省略

   ​ 2.里面的参数就是定时器的标识符

3. setInterval()

   window.setInterval(回调函数，[间隔的毫秒数])；

   setInterval（）方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

   **注意：**1.window可以省略

   ​ 2.这个调用函数可以直接写函数 ，或者 写函数名 或者 采取字符串’ 函数名（）‘三种形式。

4. 停滞setInterval（）定时器

   window.clearInterval(timeoutID)；

   ​ 此方法取消了先前通过调用setInterval（）建立的定时器

   **注意:**1.window可以省略

   ​ 2.里面的参数就是定时器的标识符。

   var timer=null;//全局变量   null是一个空对象
   

this

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

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

JS执行机制

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

JS单线程

JavaScript语言特点之一：单线程，同一个时间只能做一件事。

同步和异步

利用多核CPU的计算能力，html5提出Web Worker标准，允许JavaScript脚本创建多个线程。

1. 同步

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

2. 异步

   同时处理很多事情。

3. 同步任务

   都是在主线程上执行，形成一个执行线。

4. 异步任务

   JS的异步是通过回调函数实现的。

   一般而言：异步任务有以下三种类型

   ​ 1.普通事件，如click，resize等

   ​ 2.资源加载，如load，error等

   ​ 3.定时器，包括setInterval，setTimeout

   异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

   主线程不断的重复获得任务，执行任务，再获取任务，再执行，这种机制被称为事件循环。

location对象

window对象提供的location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象

1. url（统一资源定位符）

   是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理。

   语法格式 protocol: // host [ :port ] / path / [? query ] #fragment

   ​ protocol:通信协议，常用的http，ftp，maito等。

   ​ host： 主机（域名）www.itheima.com

   ​ port: 端口号，可选。省略时使用默认端口号80

   ​ path： 路径，由零或多个 ‘/’符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

   ​ query： 参数 ，以键值对的形式，通过&符号分割开来。

   ​ fragment片段，#后面内容，常见于链接锚点。

2. location对象的属性

3. location.href 获取或者设置整个URL

4. llocation.host 返回主机（域名）

5. location.port 返回端口号，如果没有写，返回空字符串

6. location.pathname 返回路径

7. location.search 返回参数

8. location.hash 返回片段 #后面内容，常见于链接锚点、

3.location对象的方法

1. location.assign() 跟href一样，可以跳转页面（也称为重定向页面），纪录历史。
2. location.replace() 替换当前页面，因为不记录历史，所以不能后退页面。
3. location.reload() 重新加载页面，相当于刷新按钮或者f5，如果参数为true，强制刷新ctrl+f5；

navigator对象

包含有关浏览器的信息，具有很多属性，常用userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。

history对象

与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

back() 可以后退功能

forward() 前进功能

go(参数) 前进后退功能，参数是1，前进一个页面，如果是-1，后退一个页面。

每日一句
我对他再没有感觉，我不再爱她了。为甚么会这样？原来我们的爱情败给了岁月。