引言

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

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

将客户端 的 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，外边距）：盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出

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

小知识点：

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

II 客户端 API(浏览器 API)

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

  • ​​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按钮事件实现批量删除

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');

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

  1. 设置/获得标签体

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

var xx=标签.html();
标签.HTML("子标签")；
var xx=标签.text();
标签.text("文本");
  1. 其他操作: this 表示当前标签对象 ,它保证了当代码的上下文 (context) 改变时变量的值的正确性。

see also

公众号：iOS逆向