| Author | 王平安 |
|---|---|
| pingan8787@qq.com | |
| 博 客 | www.pingan8787.com |
| 微 信 | pingan8787 |
| 每日文章推荐 | https://github.com/pingan8787/Leo_Reading/issues |
本文是 重温基础 系列文章的第十七篇。
今日感受：挑战。
本章节复习的是JS中的关于WebAPI相关知识，介绍的API比较多。
前置知识：
需要了解 JS 对象 的相关知识。
1.WebAPI介绍
API：应用程序接口，是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。
客户端JavaScript提供很多可用的API，他们本身不是JavaScript语言的一部分，却建立在JavaScript语言核心的顶部，为使用JavaScript代码提供额外的超强能力。他们通常分为两类：
浏览器API：
内置于Web浏览器，可以从浏览器和电脑周围环境获取数据，并用于复杂的操作。例如Geolocation API提供了一些简单的JavaScript结构来获取位置数据，这种API通常抽象很多复杂逻辑，我们只要调用API即可。第三方API：
缺省情况下不会内置于浏览器，而必须在Wen中某个地方获取代码和信息，例如Twitter API可以推送最新推文给我们，它提供一系列第三方API让我们获取Twitter的服务和信息。
1.1 API如何工作
那么，这些API是如何工作的？
不同的JavaScript的API工作内容不同，但具有以下几个相同点：
- 都是基于对象
API通过使用一个或多个JavaScript对象与我们的代码交互，这些对象作为API使用的数据（包含在对象属性中）的容器，和API提供的功能（包含在对象的方法中）。
如Geolocation API则是由以下几个对象组成：
Geolocation, 包含三种控制地理数据检索的方法。Position, 表示在给定的时间的相关设备的位置。它包含一个当前位置的Coordinates对象。还包含了一个时间戳,这个时间戳表示获取到位置的时间。Coordinates,包含有关设备位置的大量有用数据，包括经纬度，高度，运动速度和运动方向等。
通常这么使用：
1 | navigator.geolocation.getCurrentPosition(function(options){ |
都有可识别的入口点
即API的入口位置，如Geolocation API的入口在Navigator.geolocation属性, 它返回浏览器的Geolocation对象，所有有用的地理定位方法都可用。
在**文档对象模型(DOM)**的API入口位置更简单，常常都挂载在Document对象上，或者HTML元素上：1
2
3
4
5let a = document.createElement('div');// 创建一个新的div元素
let b = document.querySelector('div');// 获取一个已经存在的div元素
a.textContent = "hi leo!"; // 给a元素设置文本
b.appendChild(a); // 将a元素添加到b元素下
// <div>hi leo!</div>详细的后面介绍。
都使用事件来处理状态的变化
有些特定的API会包含一些事件，当事件触发，我们便可以运行函数的处理属性，做一些不同的操作。例如XMLHttpRequest对象的实例，有很多的事件可以调用。1
2
3
4
5
6
7
8
9// 简单写
const url = "https://www.baidu.com";
const req = new XMLHttpRequest();
req.open('GET', url);
req.responseType = "json";
req.send();
req.onload = function(){
// ... do something
}都会在适当位置提供额外的安全机制
主要还是处于安全考虑，提供额外的安全机制，比如常见同源策略，一些特定页面只能在https协议的网页工作等。
接下来看看这些API都能实现什么作用。
2.文档API
我们在开发web页面和应用时，就会经常操作页面文档的结构，这里就会大量用到document对象，控制HTML和样式信息的文档对象模型（DOM）。
下面贴一张web页面视图中的浏览器的主要部分（来源MDN）：
介绍：
window：是载入浏览器的标签，JavaScript中用Window对象表示，可以实现很多操作：获取窗口大小，操作载入窗口的文档，存储文档数据等。navigator：浏览器存在web上的状态和表示（即用户代理），JavaScript中用Navigator对象表示，用于获取对象的一些信息，如：摄像头的地理信息，用户偏爱的语言等。document：是实际载入窗口的页面，JavaScript中用Document对象表示，可以实现很多文档操作：获取DOM元素，修改文本内容，设置新样式等。
2.1 文档对象模型(DOM)
在浏览器标签中当前载入的文档用文档对象模型(Document Object Model，简称DOM)表示。
这是一个由浏览器生成的“树结构”，使得编程语言可以很容易访问HTML结构，操作等。
下面是基本的DOM操作：
1 | let a = document.createElement('a');// 1. 创建一个新的a元素 |
这么一个简单的例子，实际可以看出DOM提供的方法很多，下面分类介绍下这些方法：
- DOM HTML操作
改变HTML输出流：
通过document.write()直接修改HTML输出流写内容。1
document.write("hello leo");
*注意：**千万不要在文档加载之后使用，否则覆盖文档。
改变HTML内容：
通过innerHTML属性来改变HTML元素的内容：1
2
3
4
5
6
7
8
9document.getElementById(id).innerHTML = new HTML;
// 通过ID获取 （getElementById）
// 通过name属性（getElementsByName）
// 通过标签名 （getElementsByTagName）
// 通过类名 （getElementsByClassName）
// 获取html的方法 （document.documentElement）
// 获取body的方法 （document.body）
// 通过选择器获取一个元素（querySelector）
// 通过选择器获取一组元素（querySelectorAll）例子：
1
document.getElementById("id1").innerHTML = "hello leo!"
改变HTML属性：
通过attribute属性来改变元素的属性：1
document.getElementById(id).attribute = new value
例子：
1
<img id = "id1" src ="a.jpg">
1
document.getElementById("id1").src = "leo.png";
详细的文档可以查看HTML DOM Document 对象
- DOM CSS操作
- 改变HTML样式
通过style.styleName属性修改元素的样式：例子：1
document.getElementById(id).style.property = new style;
注意：1
2document.getElementById("id1").style.color = "red";
document.getElementById("id1").style.backgroundColor = "green";style后面的样式的属性名只能使用命名小驼峰。
DOM 事件操作
如要对元素做点击事件的绑定，可以在HTML的onclick事件属性上绑定方法：1
2<div onclick="fun()"></div>
<div onclick="fun(prams)"></div>另外可以绑定的事件类型还有很多：
1
2
3
4<div onload="fun()"></div>
<div onchange="fun()"></div>
<div onmouseover="fun()"></div>
<div onmousedown="fun()"></div>详细的文档可以查看HTML DOM Event 对象
DOM 节点操作
创建新的HTML元素
需要先创建一个新元素节点，然后在使用appendChild方法，向一个已存在的元素上追加这个新元素：1
<div id = "id1"></div>
1
2
3
4
5
6
7
8
9
10// 创建新元素节点
let a = document.createElement('p');
let b = document.createTextNode('新的文本');
a.appendChild(b);
// 获取已存在元素
let div = document.getElementById('id1');
// 追加新元素
div.appendChild(a);删除已有的HTML元素
如果需要删除HTML元素，就必须先获得该元素的父元素，再使用removeChild方法删除：1
2
3<div id = "id1">
<p id = "id2">hello leo</p>
</div>1
2
3let a = document.getElementById("id1");
let b = document.getElementById("id2");
a.removeChild(b);
2.2 Window对象
Window 对象表示浏览器中打开的窗口。
Window 对象涉及到的属性和方法非常多，具体可以查看 Window 对象 比较详细。
这里一个简单的例子，实现获取视窗（显示文档的内部窗口）的宽高，并设置给指定的Div元素，并且当我们调整窗口时候，也会及时改变Div的宽高。
1 | let div = document.querySelector('div'); |
3.获取服务器数据API
这一部分主要复习Ajax（全称：Asynchronous JavaScript and XML）。Ajax主要要解决的问题是：避免重复加载刷新整个页面，因为有时候我们只是小部分数据更新，这时候我们这要刷新这部分的数据，而不是整个页面。Ajax不是新的编程语言，而是一种使用现有标准的新方法。
下面看一下Ajax模型图：
Ajax模型包括使用Web API作为代理来更智能地请求数据，而不仅仅是让浏览器重新加载整个页面。让我们来思考这个意义：
比如：我们逛淘宝，搜索或打开商品页面时，顶部导航来和页眉页脚等，都保持不变。
这样做的好处：
- 页面更新更快，减少等待刷新，体验更好，响应更快。
- 下载的数据更少，减少带宽的浪费。
另外为了提高加载速度，网站有时候也会将首次请求和数据存储在用户计算机中，下次再请求就直接先使用本地版本，如果内容有更新才会去服务器获取新数据，原理图：
3.1 Ajax基础使用
XMLHttpRequest 是 AJAX 的基础。
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
创建 XMLHttpRequest 对象的语法：
1 | variable=new XMLHttpRequest(); |
为了兼容所有浏览器（包括IE5 IE6），我们就必须检查浏览器是否支持XMLHttpRequest对象，若支持则创建XMLHttpRequest对象，否则创建ActiveXObject对象。
1 | let my_http; |
3.2 Ajax发送请求
向服务器发送请求时，我们可以使用 XMLHttpRequest 对象的 open() 和 send() 方法：
1 | my_http.open(method,url,async); |
参数解释：open(method,url,async)方法接收三个参数：
method：请求的类型；GET或POST。url：文件在服务器上的位置。async：true（异步）或false（同步）。
send(string)方法接收一个参数：
string：仅用于POST请求。
例子：
1 | // GET |
如果POST请求的话需要设置HTTP头：
1 | setRequestHeader(header,value) |
参数解释：setRequestHeader(header,value)方法接收两个参数：
header: 规定头的名称。value: 规定头的值。
3.3 Ajax服务器响应
接收服务器响应，我们可以使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText：获得字符串形式的响应数据。responseXML：获得XML形式的响应数据。responseText属性
当服务端的响应不是XML，使用responseText属性。
若是字符串的响应就可以直接使用。1
document.getElementById("id1").inndeHTML = my_http.responseText;
3.4 Ajax readyState
readyState保存着XMLHttpRequest对象的状态。
我们发送Ajax请求的整个过程中，XMLHttpRequest对象的readyState会改变，当readyState改变的时候会触发onreadystatechange事件。
XMLHttpRequest对象的三个重要属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0（请求未初始化），1（服务器连接已建立），2（请求已接收），3（请求处理中），4（请求已完成，且响应已就绪） |
| status | 200（”OK”），404（未找到页面） |
通常我们会在readyState等于4且status等于200时候表示响应已就绪，可以执行业务操作：
1 | if (xmlhttp.readyState==4 && xmlhttp.status==200){ |
4.图形绘制API
这里主要介绍的是HTML5新增的canvas元素，JavaScript为canvas添加了很多API，进一步增强canvas。canvas 元素可以通过JavaScript脚本，在网页上绘制图形。
比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内容将会在在旧的、不支持canvas元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。
详细完整的课程推荐：
下面复习一下canvas的一个使用流程：
4.1 简单绘制
- 创建画布，规定元素id、宽度和高度
要在网页中创建 2D 或者 3D 场景，必须在 HTML 文件中插入一个canvas元素，以界定网页中的绘图区域。
1 | <canvas id="id1" width="200" height="100"> |
在canvas标签内，写一些浏览器不支持画布功能时候的提示内容。
画布默认尺寸为 300 × 150 像素。
- 获取画布上下文，并完成设置
我们需要获得一个对绘画区域的特殊的引用（称为“上下文”）用来在画布上绘图。可通过 HTMLCanvasElement.getContext() 方法获得基础的绘画功能，需要提供一个字符串参数来表示所需上下文的类型。
下面创建一个2d画布：
1 | let ctx = canvas.getContext("2d"); |
ctx 变量包含一个 CanvasRenderingContext2D 对象，画布上所有绘画操作都会涉及到这个对象。
下面将画布背景涂黑：
1 | ctx.fillStyle = 'rgb(0, 0, 0)'; |
4.2 绘制基础
首先需要知道一些2D画布的知识，画布左上角的坐标是(0, 0)，横坐标（x）轴向右延伸，纵坐标（y）轴向下延伸。
绘制实线
1
2
3ctx.lineTo(100,50); // 绘制目标坐标
ctx.lineWidth = 5; // 线条宽度
ctx.stroke(); // 绘制实线绘制矩形
fillRect(x, y, width, height)绘制一个填充的矩形strokeRect(x, y, width, height)绘制一个矩形的边框clearRect(x, y, width, height)清除指定矩形区域，让清除部分完全透明。
x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。
width和height设置矩形的尺寸。1
2
3
4
5
6
7// 实心矩形
ctx.fillStyle = 'rgb(255, 0, 0)'; // 矩形颜色
ctx.fillRect(50, 50, 100, 150); // 矩形起止坐标
// 空心矩形
ctx.strokeStyle = 'rgb(255, 255, 255)';// 矩形边框颜色
ctx.strokeRect(25, 25, 175, 200);// 矩形起止坐标绘制路径
可以通过路径来实现复杂的图形，下面整理了一些常用到的方法：
beginPath()：在画笔当前所在位置开始绘制一条路径。在新的画布中，画笔起始位置为 (0, 0)。moveTo()：将画笔移动至另一个坐标点，不记录、不留痕迹，只将画笔“跳”至新位置。fill()：通过为当前所绘制路径的区域填充颜色来绘制一个新的填充形状。stroke()：通过为当前绘制路径的区域描边，来绘制一个只有边框的形状。- 路径也可和矩形一样使用
lineWidth和fillStyle/strokeStyle等功能。
1 | ctx.fillStyle = 'rgb(255, 0, 0)'; // 设置填充颜色 |
- 绘制圆形
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
arc方法，该方法有六个参数：
x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。anticlockwise是布尔值，为true时，是逆时针方向，否则顺时针方向。
这些都是以x轴为基准。
注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:
弧度=(Math.PI/180)*角度。
1 | cxt.fillStyle="#FF0000"; |
- 绘制文本
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.
1 | ctx.strokeStyle = 'white'; |
另外还有一些有样式的文本，可以使用这些属性：
font = value
当前绘制的文本字体.默认是 10px sans-serif。textAlign = value
文本对齐选项. 可选的值包括：start,end,left,rightorcenter. 默认值是 start。textBaseline = value
基线对齐选项. 可选的值包括：top,hanging,middle,alphabetic,ideographic,bottom。默认值是alphabetic。direction = value
文本方向。可能的值包括：ltr,rtl,inherit。默认值是inherit。1
2
3ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello leo ", 0, 100);
- 绘制图片
drawImage(image, x, y)
其中image是image或者canvas对象，x和y是其在目标canvas里的起始坐标。1
2
3
4
5let img = new Image();
img.src = "leo.png";
img.onload = function(){
ctx.drawImage(img, 50, 50);
};drawImage方法还有更多参数：1
ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);
- 第一个参数不变，为图片引用。
- 参数 2、3 表示裁切部分左上顶点的坐标，参考原点为原图片本身左上角的坐标。原图片在该坐标左、上的部分均不会绘制出来。
- 参数 4、5 表示裁切部分的长、宽。
- 参数 6、7 表示裁切部分左上顶点在画布中的位置坐标，参考原点为画布左上顶点。
- 参数 8、9 表示裁切部分在画布中绘制的长、宽。本例中绘制时与裁切时面积相同，你也可以定制绘制的尺寸。
详细完整的课程推荐：
5.视频音频API
HTML5提供了用于文档中嵌入富媒体的元素<video>和<audio>标签，通过元素自带的API来控制视频和音频的播放搜索等。
1 | <video> |
5.1 视频
当前，video 元素支持三种视频格式：Ogg/MPEG4和WebM。
简单使用：
1 | <video src="1.ogg" controls="controls"> </video> |
连接不同视频：
1 | <video width="320" height="240" controls="controls"> |
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。<video> 标签的属性：
| 属性 | 描述 |
|---|---|
autoplay |
视频在就绪后马上播放 |
controls |
向用户显示控件，比如播放按钮 |
height |
设置视频播放器的高度 |
width |
设置视频播放器的宽度 |
src |
要播放的视频的 URL |
preload |
视频在页面加载时进行加载，并预备播放，如果使用 “autoplay”，则忽略该属性 |
loop |
当媒介文件完成播放后再次开始播放 |
另外我们可以为视频创建简单的播放/暂停和调整尺寸的控件，这里需要使用play()和 pause() 还有两个属性：paused 和 width。
更多方法可以查看 HTML5 video - 方法、属性以及事件
5.2 音频
audio 元素能够播放声音文件或者音频流。
当前，audio 元素支持三种视频格式：Ogg Vorbis/MP3和Wav。
简单使用：
1 | <audio src="1.ogg" controls="controls"></audio> |
control 属性供添加播放、暂停和音量控件。<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。
连接不同音频：
1 | <audio controls="controls"> |
<audio> 标签的属性：
| 属性 | 描述 |
|---|---|
autoplay |
视频在就绪后马上播放 |
controls |
向用户显示控件，比如播放按钮 |
src |
要播放的视频的 URL |
preload |
视频在页面加载时进行加载，并预备播放，如果使用 “autoplay”，则忽略该属性 |
loop |
当媒介文件完成播放后再次开始播放 |
6.客户端存储API
现代web浏览器会提供一些在客户端存储用户数据的方法，只要用户允许，可以随时取出使用。
使用客户端存储API可以存储的数据量是优先的，具体取决于浏览器或者用户设置 。
存储的方式可以这样分类：
传统方法：cookies
cookie使用比较久了，过时，存在各种安全问题，而且无法存储复杂数据，可能唯一的优势就是对非常老旧浏览器支持，如果业务需要，也可以使用cookie新流派：Web Storage 和 IndexedDB
现代浏览器所提供的更加简单有效的客户端储存API。未来：Cache API
一些现代浏览器支持新的CacheAPI。这个API是为存储特定HTTP请求的响应文件而设计的，它对于像存储离线网站文件这样的事情非常有用，这样网站就可以在没有网络连接的情况下使用。缓存通常与Service WorkerAPI 组合使用，尽管不一定非要这么做。
6.1 WebStorage
web storageAPI只需存储简单的 键/值对的数据（限制为字符串、数字等类型），并在需要的时候检索其值。web storageAPI提供了两种在客户端存储数据的新方法：
localStorage: 一直保存数据，甚至到浏览器关闭又开启后也是这样sessionStorage: 只要浏览器开着，数据就会一直保存 (关闭浏览器时数据会丢失)
localStorage方法：
localStorage.setItem(key, value)：存储一个数据。localStorage.getItem(key)：读取一个数据。localStorage.removeItem(key)：删除一个数据。关闭浏览器以后数据还在。1
2
3
4localStorage.setItem('name','leo');
let leo = localStorage.getItem('name');
leo ; // "leo"
localStorage.removeItem('name');
sessionStorage方法：
sessionStorage.setItem(key, value)：存储一个数据。sessionStorage.getItem(key)：读取一个数据。sessionStorage.removeItem(key)：删除一个数据。关闭浏览器以后数据不在。1
2
3
4sessionStorage.setItem('name','leo');
let leo = sessionStorage.getItem('name');
leo ; // "leo"
sessionStorage.removeItem('name');
7.第三方API
并不是所有的API都是内置在浏览器中，有一些可能是其他网站（如谷歌，Facebook等）提供的API，让开发者调用，从而使用他们的服务和数据等。
API通过使用一个或多个JavaScript对象与我们的代码交互，这些对象作为API使用的数据（包含在对象属性中）的容器，和API提供的功能（包含在对象的方法中）。
例如我们调用谷歌地图的Google Maps APIs ，需要先引入他们开放的JavaScript库。
1 | <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script> |
如Geolocation API则是由以下几个对象组成：
Geolocation, 包含三种控制地理数据检索的方法。Position, 表示在给定的时间的相关设备的位置。它包含一个当前位置的Coordinates对象。还包含了一个时间戳,这个时间戳表示获取到位置的时间。Coordinates,包含有关设备位置的大量有用数据，包括经纬度，高度，运动速度和运动方向等。
本部分内容到这结束
参考文章：
| Author | 王平安 |
|---|---|
| pingan8787@qq.com | |
| 博 客 | www.pingan8787.com |
| 微 信 | pingan8787 |
| 每日文章推荐 | https://github.com/pingan8787/Leo_Reading/issues |
| JS小册 | js.pingan8787.com |