WebAPI之BOM操作和JS执行机制

快来打我* 2023-02-12 14:29 22阅读 0赞

### WebAPI之BOM操作和JS执行机制 ###

*  WebAPI之BOM操作和JS执行机制
 *   *  1. BOM
     *   *  1.1 BOM介绍
         *  1.2 BOM的构成
         *   *  1.2.1 顶级对象window
             *  1.2.2 location对象
             *   *  1. url介绍：
                 *  2. location的对象属性值：
             *  1.2.3 navigator对象
             *  1.2.4 history对象
         *  1.3 顶级对象window
         *   *  1.3.1 页面（窗口）加载事件（2种）
             *  1.3.2 调整窗口大小事件
             *  1.3.3 定时器（两种）
             *   *  1. setTimeout()
                 *  2. setInterval() 闹钟定时器
                 *  3. 清除定时器
         *  1.4 this指向问题
     *  2. JS执行机制
     *   *  2.1 JS 是单线程
         *  2.2 同步任务和异步任务
         *  2.3 JS执行机制（事件循环）

# WebAPI之BOM操作和JS执行机制 #

## 1. BOM ##

BOM与DOM的区别：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]

### 1.1 BOM介绍 ###

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。  
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。  
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

### 1.2 BOM的构成 ###

BOM 比 DOM 更大，它包含 DOM。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]

#### 1.2.1 顶级对象window ####

#### 1.2.2 location对象 ####

Location 对象是浏览器当前显示的文档的 URL（或位置）。但是 Location 对象所能做的远远不止这些，它还能控制浏览器显示的文档的位置。

##### 1. url介绍： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]  
案例：获取URL参数

<div></div>
    	<script>
            console.log(location.search); // ?uname=andy
            // 1.先去掉？ substr('起始的位置'，截取几个字符);
            var params = location.search.substr(1); // uname=andy
            console.log(params);
            // 2. 利用=把字符串分割为数组 split('=');
            var arr = params.split('=');
            console.log(arr); // ["uname", "ANDY"]
            var div = document.querySelector('div');
            // 3.把数据写入div中
            div.innerHTML = arr[1] + '欢迎您';
        </script>

##### 2. location的对象属性值： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]  
location对象的常见方法:

<button>点击</button>
        <script>
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() { 
                // 记录浏览历史，所以可以实现后退功能
                // location.assign('http://www.itcast.cn');
                // 不记录浏览历史，所以不可以实现后退功能
                // location.replace('http://www.itcast.cn');
                location.reload(true);
            })
        </script>

#### 1.2.3 navigator对象 ####

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

**当移动端和pc端设备查看网页时，显示不同规格的页面：**

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { 
        window.location.href = "";     //手机
     } else { 
        window.location.href = "";     //电脑
     }

#### 1.2.4 history对象 ####

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

1.前进
    <a href="list.html">点击我去往列表页</a>
        <button>前进</button>
        <script> var btn = document.querySelector('button'); btn.addEventListener('click', function() { // history.forward(); history.go(1); }) </script>
       
    2.后退
    <a href="index.html">点击我去往首页</a>
        <button>后退</button>
        <script> var btn = document.querySelector('button'); btn.addEventListener('click', function() { // history.back(); history.go(-1); }) </script>

### 1.3 顶级对象window ###

#### 1.3.1 页面（窗口）加载事件（2种） ####

**第1种:**  
window.onload 是窗口 (页面）加载事件，**当文档内容完全加载完成**会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。  
**第2种:**  
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。  
**注意：**  
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

**代码如下：**

#### 1.3.2 调整窗口大小事件 ####

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

**注意：**

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

#### 1.3.3 定时器（两种） ####

window 对象给我们提供了 2 个非常好用的方法-定时器。

*  setTimeout()
 *  setInterval()

> 普通函数是按照代码顺序直接调用。  
> 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。例如：定时器中的调用函数，事件处理函数，也是回调函数。  
> 以前我们讲的 element.onclick = function()\{\} 或者 element.addEventListener(“click”, fn); 里面的 函数也是回调函数。

##### 1. setTimeout() #####

##### 2. setInterval() 闹钟定时器 #####

##### 3. 清除定时器 #####

1.清除setTimeout()定时器
    <button>点击停止定时器</button>
        <script> var btn = document.querySelector('button'); var timer = setTimeout(function() { console.log('爆炸了'); }, 5000); btn.addEventListener('click', function() { clearTimeout(timer); }) </script>
    2.清除setInterval()定时器
    	<script> var begin = document.querySelector('.begin'); var stop = document.querySelector('.stop'); var timer = null; // 全局变量 null是一个空对象 begin.addEventListener('click', function() { timer = setInterval(function() { console.log('ni hao ma'); }, 1000); }) stop.addEventListener('click', function() { clearInterval(timer); }) </script>

### 1.4 this指向问题 ###

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

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

<button>点击</button>
        <script>
            // this 指向问题 一般情况下this的最终指向的是那个调用它的对象
            // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
            console.log(this);
            function fn() { 
                console.log(this);
            }
            window.fn();
            window.setTimeout(function() { 
                console.log(this);
            }, 1000);
            // 2. 方法调用中谁调用this指向谁
            var o = { 
                sayHi: function() { 
                    console.log(this); // this指向的是 o 这个对象
                }
            }
            o.sayHi();
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() { 
                    console.log(this); // 事件处理函数中的this指向的是btn这个按钮对象
                })
            // 3. 构造函数中this指向构造函数的实例
            function Fun() { 
                console.log(this); // this 指向的是fun 实例对象
            }
            var fun = new Fun();
        </script>

## 2. JS执行机制 ##

### 2.1 JS 是单线程 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 4]

### 2.2 同步任务和异步任务 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 5]

### 2.3 JS执行机制（事件循环） ###

1.回调函数：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 6]  
2.异步执行：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 7]  
3.事件循环机制：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 8]

<!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(1); // setTimeout(function() { // console.log(3); // }, 1000); // console.log(2); // 2. 第二个问题 // console.log(1); // setTimeout(function() { // console.log(3); // }, 0); // console.log(2); // 3. 第三个问题 console.log(1); document.onclick = function() { console.log('click'); } console.log(2); setTimeout(function() { console.log(3) }, 3000) </script>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200526152207288.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200526152252702.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200526155153916.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20200526155126696.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20200526160630528.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20200526160718738.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20200526161038928.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 7]: https://img-blog.csdnimg.cn/20200526161118901.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 8]: https://img-blog.csdnimg.cn/20200526160814292.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center