JavaScript小技能: 应用程序接口​

引言

应用程序接口（API，Application Programming Interface）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。

I 应用程序接口（Application Programming Interfaces）

1. 有可识别的入口点: 例如Geolocation API 的入口点是 Navigator.geolocation 属性、文档对象模型 (DOM) API 的入口点是 Document 对象和 HTML 元素的实例、Canvas API 的上下文对象是通过获取要绘制的 <canvas> 元素的引用来创建的，然后调用它的HTMLCanvasElement.getContext()方法：

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

1. 使用事件来处理状态的变化: 调用 fetch() 将返回一个“响应”或抛出一个错误
2. 在适当的地方有额外的安全机制: 在代码中启用一些 WebAPI 请求权限,例如定位权限和通知权限

1.1 JavaScript、API和其他 JavaScript 工具的关系

• JavaScript ：内置于浏览器的高级脚本语言，您可以用来实现 Web 页面/应用中的功能。注意 JavaScript 也可用于其他的编程环境（Node）。
• 客户端 API ：内置于浏览器的结构程序，位于 JavaScript 语言顶部，使您可以更容易的实现功能。浏览器 API 内建于 web 浏览器中,比如DOM API。
• 第三方 API ：置于第三方普通的结构程序并没有默认嵌入浏览器中，一般要从网上取得它们的代码和信息来使用他们平台的某些功能，比如地图 API 可以在网站嵌入定制的地图、在您的 Web 页面显示最新的 Tweets。
• JavaScript 库 ：包含具有特定功能的一个或多个 JavaScript 文件，把这些文件关联到您的 Web 页以快速或授权编写常见的功能。例如包含 jQuery 和 Mootools
• JavaScript 框架 ：JavaScript 框架视图把 HTML、CSS、JavaScript 和其他安装的技术打包在一起，然后用来从头编写一个完整的 Web 应用。例如Vue.js

在这里插入图片描述

将客户端 的 Geolocation API 与第三方 API（Google Maps API）相结合， 在 Google 地图上绘制设备的当前位置

<script type="text/javascript" src="https://maps.google.com/maps/API/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>

navigator.geolocation.getCurrentPosition(function(position) {//返回设备的当前位置
//创建一个LatLng对象实例，设置为 myOptions对象的center属性的值。
  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true
  }
  //渲染地图的 <div> 元素的引用 (ID 为 map_canvas),
  var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);//创建一个对象实例来表示我们的地图
});

1.2 常见的客户端 API

• 文档对象模型 API（Document Object Model Application Programming Interfaces ） 能通过创建、移除和修改 HTML，为页面动态应用新样式等手段来操作 HTML 和 CSS。

//重载
document.querySelector('#reload').addEventListener('click', () => {
  document.location.reload();
});

• 从服务器获取数据的 API:使用 fetch() 发起 HTTP 请求，fetch()是基于 Promise 的、用于替代 XMLHttpRequest 的方法。

//使用 fetch() 发起 HTTP 请求，fetch()是基于 Promise 的、用于替代 XMLHttpRequest 的方法。
//使用 getUserMedia() 访问用户的摄像头和麦克风
//使用 showOpenFilePicker()  请求用户选择文件以供访问

• 用于绘制和操作图形的 API： 画布（Canvas） 和 WebGL API 可以创建生动的 2D 和 3D 图像。
• 音频和视频 API： HTMLMediaElement 、Web Audio API和 WebRTC
• 设备 API：访问设备位置数据的地理定位 API（Geolocation API） 、Notifications API允许浏览器发起系统通知、振动硬件（Vibration API）告诉用户 Web 应用程序有用的更新可用。
• 客户端存储 API：使用Web Storage API的简单的键 - 值存储、使用IndexedDB API的表格数据存储。
• 利用浏览器内建的 JSON进行转换数据

var myNotification = new Notification('Hello!');

1.3 盒子模型

每个盒子都有四个属性：

• 内容（content）：盒子里装的东西，网页中通常是指文字和图片
• 填充（padding，内边距）：怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料
• 边框（border）：盒子本身
• 边界（margin，外边距）：盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出

小知识点：

1） 行高 常用于设置“垂直居中” 2）块级标签（inline－block，block）才可以设置宽高，行级标签（inline）的宽高取决于内容 3）脱离标准流：float、绝对定位 4）如果想相对于父节点进行定位：最好设置父节点的position为relative， 原则“子绝父相”。

II 客户端 API(浏览器 API)

在这里插入图片描述

• window 是载入浏览器的标签，使用这个对象可返回窗口的大小（Window.innerWidth和Window.innerHeight），操作载入窗口的文档，存储客户端上文档的特殊数据（例如使用本地数据库或其他存储设备），为当前窗口绑定event handler。
• navigator 表示浏览器存在于 web 上的状态和标识。你可以用这个对象获取地理信息、用户偏爱的语言、多媒体流。

// 1. 属性：  appName、   appVersion  、   History  历史记录对象
// 2. 函数：`go(url);`

• document（在浏览器中用 DOM 表示）是载入窗口的实际页面，可以用这个对象来返回和操作文档中 HTML 和 CSS 上的信息。
• Location：地址栏对象，属性href 可改变地址栏访问目标地址

2.1 BOM(Browser Object Model,浏览器对象模型)

整个浏览器窗口是一个顶层window对象

alert() 警告框 prompt() 对话框 confirm() 确认框 window.open("URL"); setTimeout(); 以一个回调函数和一个以毫秒为单位的延迟作为参数。当调用 setTimeout() 时，它将启动一个设置为给定延迟的计时器，当时间过期时，它就会调用给定的回调函数。 clearTimeout();超时之后清除目标函数 focus() 获得焦点setInterval(,) （以毫秒计）调用执行函数/表达式 setInterval(code,millisec[,"lang"])clearInterval() 取消对 code 的周期性执行,由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

//setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
//setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
window.setInterval(function() {}, 18000)//18S

前端小技能：利用action-type按钮事件实现批量删除 https://blog.csdn.net/z929118967/article/details/123222483

Window对象有一个称为 resize 的可用事件,每次窗口调整大小时都会触发该事件 。我们可以通过Window.onresize 事件处理程序来访问它，并返回每次改变大小的代码。

//不管窗口的大小是多少，确保应用程序和它所在的窗口视图一样大
window.onresize = function() {
  WIDTH = window.innerWidth;
  HEIGHT = window.innerHeight;
  div.style.width = WIDTH + 'px';
  div.style.height = HEIGHT + 'px';
}

2.2 DOM(Document Object Model,文档对象模型)

在浏览器标签中当前载入的文档用文档对象模型来表示。这是一个由浏览器生成的“树结构”，使编程语言可以很容易的访问 HTML 结构 ， 由W3C定义的一组规范一组API 用来操作HTML对象。

1. 直接获得标签对象

1） document.getElementById("id属性值") 通过ID来获得对应的标签对象

Document.querySelector()是推荐的主流方法，它允许你使用 CSS 选择器选择元素，使用很方便。

    <iframe id="ifr" width=400 height=500></iframe>

        document.getElementById("ifr").src = url[j];
var link = document.querySelector('a');//匹配它在文档中遇到的第一个<a>元素。
//Document.querySelectorAll()，这个方法匹配文档中每个匹配选择器的元素，并把它们的引用存储在一个array中

2） document.getElementsByTagName("标签名称") 根据标签名称来获得一组标签，返回数组对象 3） document.getElementsByName("name属性值");根据name属性值来获得一组标签，返回数组对象

1. 间接获得标签对象

1） 父标签.childNodes 获得当前标签的所有孩子节点，返回数组对象 2） 父标签.firstChild 获得第一个孩子节点 3） 父标签.lastChild 获得最后一个孩子节点 4） 标签.nextSibling 获得下一个兄弟节点 5） 标签.previousSibling 获得前一个兄弟节点

1. 创建节点对象

1） document.createElement("标签名称") 创建一个对应的标签对象 2） document.createTextNode("文本值"); 创建一个文本节点对象

var text = document.createTextNode(' — the premier source for web development knowledge.');

1. 操作标签

1） 父标签.appendChild(子节点); 将一个标签追加到父标签当中

var linkPara = document.querySelector('p');
linkPara.appendChild(text);

2） 父标签.removeChild(子节点); 删除子节点

sect.removeChild(linkPara);
linkPara.parentNode.removeChild(linkPara);//删除自己

3） 父标签.insertBefore(newElement,targetElement); 在目标元素之前插入一个新元素 4） 父标签.replaceChild(newElement,oldElement); 用新元素替换掉旧的元素

1. 操作样式 : 标签.style.样式属性 = 属性值;

//1. 内联样式
para.style.color = 'white';
para.style.backgroundColor = 'black';
para.style.padding = '10px';
para.style.width = '250px';
para.style.textAlign = 'center';

//2. 在 HTML 的<head>中添加下列代码 :
<style>
.highlight {
  color: white;
  background-color: black;
  padding: 10px;
  width: 250px;
  text-align: center;
}
</style>
//在段落中设置类名为 highlight：
para.setAttribute('class', 'highlight');

1. 设置/获得标签体

1） 标签.innerHTML 获得或者设置元素的标签体 2） 文本节点.nodeValue 获得文本节点值 3） 标签.parentNode 获得父节点

var xx=标签.html();
标签.HTML("子标签")；
var xx=标签.text();
标签.text("文本");

1. 其他操作: this 表示当前标签对象 ,它保证了当代码的上下文 (context) 改变时变量的值的正确性。