JavaScript系列之Web API篇

Posted coderkey

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript系列之Web API篇相关的知识，希望对你有一定的参考价值。

三，BOM导读

1，BOM 概述

1.1，什么是 BOM

（1）含义：

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

1.2，BOM 的构成

（1）含义：

window 对象是浏览器的顶级对象，它具有双重角色。BOM 比 DOM 更大，它包括 DOM。
1，它是 JS 访问浏览器窗口的一个接口。
2，它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如alert()、prompt() 等。

（2）例如：

 <script>
      //全局变量下会变成 window 对象的属性
     var num = 10;
     console.log(num);  // 10
     console.log(window.num);  // 10
     //函数会变成 window 对象的方法
     function fn( ) {
       console.log(11);
     }
     fn( );  // 11
     window.fn( );  // 11
  </script>

2，window 对象的常见事件

2.1，页面加载事件

2.1.1，窗口加载事件

（1）含义：

window.onload 是窗口（页面）加载事件，当文档内容完全加载完成后会触发该事件（包括图像、脚本文件、CSS文件等）。

（2）语法：

window.onload = function( ) { }
或者
window.addEventListener('load',function( ) { } );

（3）注意：

1，window.onload 只能写一次，当写了很多个的时候，只有最后一个起作用， 所以推荐第
二种写法。
2，有了 window.onload 就可以把 JS 代码写到页面元素的任意位置，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。

2.1.2，DOM加载事件

（1）含义：

DOMContentLoaded 这个事件当 DOM 加载完成时触发，不包含 CSS、图片、flash 等。
IE9+ 支持。

（2）语法：

window.addEventListener('DOMContentLoaded',function( ) { } );

（3）注意：

1，load 等页面内容全部加载完毕，包含页面dom元素、图片、flash、css等。
2，DOMContentLoaded 是 DOM 加载完毕，不包含图片，flash，css等就可以执行，加载
速度比 load 快一些。

2.2，调整窗口大小事件

（1）语法：

window.onresize = function( ) { }
或者
window.addEventListener("resize",function( ) { } );

（2）例如：

  <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
  </style>
  </head>
  <body>
    <div></div>
    <script>
     var div = document.querySelector('div');
     window.addEventListener('resize',function() {
       if (window.innerWidth <= 600) {
         div.style.display = 'none';
       } else {
         div.style.display = 'block';
       }
     })

（2）注意：

1，这是调整窗口大小的时候的触发事件。包括窗口高度和宽度。
2，经常用来实现响应式布局。 window.innerWidth 当前屏幕的宽度。

3，计时器

3.1，两种定时器

（1）含义：

window 对象提供了2个好用的方法——定时器：
setTimeout( )
setInterval( )

3.2，setTimeout( ) 定时器

（1）含义：

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

（2）语法：

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

（3）例如：

  <script>
    // 方法一    直接写函数
    window.setTimeout(function( ) {    // window 在调用时候可以省略
    console.log('时间到了');
    }, 2000);
    // 方法二  写函数名
    function callback( ) {
      console.log('时间又到了');
    }
    setTimeout(callback,4000);
    // 方法三，不推荐
    setTimeout('callback( )',4000);
    </script>

（4）注意：

1，window 在调用的时候可以省略。
2，延时时间单位是毫秒，可以省略。如果省略默认是0。
3，这个调用函数可以直接写函数，还可以写函数名，函数名后面不写括号。
4，页面中可能有很多的定时器，我们经常给定时器加标识符。（名字）

3.3，停止 clearTimeout( ) 定时器

（1）含义：

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

（2）语法：

window.clearTimeout(timeoutID)

（3）例如：

  <button>清除定时器setTimeout</button>
   <script>
    var btn = document.querySelector('button');
    var timer = window.setTimeout(function( ) {    // window 在调用时候可以省略
    console.log('时间到了');
    }, 5000);
    btn.addEventListener('click',function( ) {
      clearTimeout(timer);
    })
    </script>

（4）注意：

1，window 可以省略。
2，里面的参数是定时器的标识符（自定义个名字）。

3.4，setInterval( ) 定时器

（1）含义：

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

（2）语法：

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

（3）例如：

 <script>
    window. setInterval(function( ) {    // window 在调用时候可以省略
    console.log('时间到了');
    }, 2000);     // 每隔两秒执行一次，重复执行
  </script>

（4）注意：

1，window 在调用的时候可以省略。
2，延时时间单位是毫秒，可以省略。如果省略默认是0。
3，这个调用函数可以直接写函数，还可以写函数名，函数名后面不写括号。
4，页面中可能有很多的定时器，我们经常给定时器加标识符。（名字）

（5）区别：

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

3.5，停止 clearInterval( ) 定时器

（1）含义：

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

（2）语法：

window.clearInterval(intervalD)

（3）例如：

  <button class="begin">开始定时器 setInterval</button>
    <button class="stop">清除定时器 clearInterval</button>
    <script>
    var begin = document.querySelector('.begin');
    var stop = document.querySelector('.stop');
    begin.addEventListener('click',function( ) {
      timer =  setInterval(function( ) {    // 这里的timer没有声明变量，当全局变量使用
        console.log('hello world');
       },1000);
    })
    stop.addEventListener('click',function( ) {
      clearInterval(timer);       // 这里可以调用 全局变量timer
    })
    </script>

（4）注意：

1，window 可以省略。
2，里面的参数是定时器的标识符（自定义个名字）。

3.6，this 的指向问题

（1）含义：

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

4，JS 执行队列

4.1，JS 是单线程

（1）含义：

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

4.2，同步和异步

（1）含义：

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。同步和异步为了解决这个问题，利用多核 CPU 的计算能力，html5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了 同步 和 异步 。

（2）同步任务：

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。（同步任务都在主线程上执行，形成一个执行栈）

（3）异步任务：

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

（4）例如：

  <script>
        console.log(1);
        setTimeout(function ( ) {
            console.log(3);
        }, 1000);
        console.log(2);
    </script>
   // 运行结果是 1 2 3

4.3，JS 的执行机制

（1）含义：

1，先执行执行栈中的同步任务。
2，异步任务（回调函数）放入任务队列中。
3，一旦执行栈中所有同步任务完成，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
由于主线程不断地重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）。

5，location 对象

5.1，什么是 lacation 对象

（1）含义：

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

5.2，URL

（1）含义：

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

（2）URL 的一般语法结构为：

porotocol：//host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

（3）组成：

组成说明
protocol通信协议，常用的http、ftp、maito等
host主机（域名）
port端口号，可选，省略时使用默认断开，如http的默认端口80
path路径，由零或多个“/”格开的字符串，一般用来表示主机上的一个目录或者文件地址
query参数，以键值对的形式，通过符号 & 分割开来
fragment片段，# 后面的内容常见于链接，锚点

5.3，location 对象的属性

（1）属性：

location 对象属性 返回值
location.href 获取或者设置整个 URL
location.host 返回主机（域名）
location.port 返回端口号，如果未写返回空字符串
location.pathname 返回路径
location.search 返回参数 location.hash 返回片段，# 后面内容，常见于链接、锚点

（2）例如：

 <button>点击</button>
    <script>
      //点击按钮自动跳转页面
      var btn = document.querySelector('button');
      btn.addEventListener('click',function() {
        location.href = 'http://www.itcast.cn';
      })
    </script>

5.4，location 对象的方法

（1）方法：

location 对象方法 返回值
location.assign( ) 跟 href 一样，可以跳转页面。（记录历史，可以后退页面）
location.replace( ) 替换当前页面，因为不记录历史，所以不能后退页面
location.reload() 重新加载页面，相当于刷新按钮或者 F5，如果参数为true，强制刷新 ctrl + F5

6，navigator 对象

6.1，navigator 对象概述

（1）含义：

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

7，history 对象

7.1，history 对象概述

（1）含义：

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

（2）方法：

history 对象方法 作用
back() 后退功能
forward() 前进功能
go(参数) 前进后退功能，参数如果是1，前进一个页面，如果是-1，后退一个页面

（3）注意：

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

以上是关于JavaScript系列之Web API篇的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript系列之 Web API篇Dom,Bom

JavaScript系列之基础篇

WEB前端开发最佳实践系列JavaScript篇

[JavaScript从入门到放弃系列] 高级篇11.Vue.js之路由part2

JavaScript系列之基础篇

译ECMAScript 2016, 2017, 2018 新特性之必读篇