从客户端WebAPI视角下解读前端学习

news2024/10/7 18:28:06

API

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

JavaScript VS 客户端 API VS 客户端 API VS JavaScript 库 VS JavaScript 库

JavaScript——一种内置于浏览器的高级脚本语言，你可以用来实现 Web 页面/应用中的功能。注意 JavaScript 也可用于其他像 Node 这样的编程环境。但现在你不必考虑这些。
客户端 API — 内置于浏览器的结构程序，位于 JavaScript 语言顶部，使你可以更容易的实现功能。
客户端 API — 置于第三方普通的结构程序（例如 Twitter，Facebook），使你可以在自己的 Web 页面中使用那些平台的某些功能（例如在你的 Web 页面显示最新的 Tweets）。
JavaScript 库 — 通常是包含具有特定功能的一个或多个 JavaScript 文件，把这些文件关联到你的 Web 页以快速或授权编写常见的功能。例如包含 jQuery 和 Mootools
JavaScript 库 — 从库开始的下一步，JavaScript 框架视图把 HTML、CSS、JavaScript 和其他安装的技术打包在一起，然后用来从头编写一个完整的 Web 应用。

常见浏览器API

操作文档的 API（控制浏览器视图图显示内容）内置于浏览器中。最明显的例子是DOM（文档对象模型）API，它允许你操作 HTML 和 CSS — 创建、移除以及修改 HTML，动态地将新样式应用到你的页面，等等。每当你看到一个弹出窗口出现在一个页面上，或者显示一些新的内容时，这都是 DOM 的行为。你可以在在Manipulating documents中找到关于这些类型的 API 的更多信息。
从服务器获取数据的 API (数据更新前后端交互)用于更新网页的一小部分是相当好用的。这个看似很小的细节能对网站的性能和行为产生巨大的影响 — 如果你只是更新一个股票列表或者一些可用的新故事而不需要从服务器重新加载整个页面将使网站或应用程序感觉更加敏感和“活泼”。使这成为可能的 API 包括XMLHttpRequest和Fetch API。你也可能会遇到描述这种技术的术语Ajax。你可以在Fetching data from the server找到关于类似的 API 的更多信息。

WebGIS下——焕新-CSDN博客

用于绘制和操作图形的 API（绘图Canvas->WebGL,2D 3D）【Three.js/Cesium.js/图形学】目前已被浏览器广泛支持 — 最流行的是允许你以编程方式更新包含在 HTML <canvas> 元素中的像素数据以创建 2D 和 3D 场景的Canvas和WebGL。例如，你可以绘制矩形或圆形等形状，将图像导入到画布上，然后使用 Canvas API 对其应用滤镜（如棕褐色滤镜或灰度滤镜），或使用 WebGL 创建具有光照和纹理的复杂 3D 场景。这些 API 经常与用于创建动画循环的 API（例如window.requestAnimationFrame()）和其他 API 一起不断更新诸如动画和游戏之类的场景。

WebGL入门前三节（附源码和学习建议）_webgl 入门代码-CSDN博客

现代计算机图形学学习思维导图（更新至12节Geometry）_-博客

http://t.csdnimg.cn/gshUp

音频和视频 API (视频GIS虚实融合【介入不多】)例如 HTMLMediaElement、Web Audio API 和 WebRTC 允许你使用多媒体来做一些非常有趣的事情，比如创建用于播放音频和视频的自定义 UI 控件，显示字幕字幕和你的视频，从网络摄像机抓取视频，通过画布操纵（见上），或在网络会议中显示在别人的电脑上，或者添加效果到音轨（如增益、失真、平移等）。
设备 API【介入不多】基本上是以对网络应用程序有用的方式操作和检索现代设备硬件中的数据的 API。我们已经讨论过访问设备位置数据的地理定位 API，因此你可以在地图上标注你的位置。其他示例还包括通过系统通知（参见Notifications API）或振动硬件（参见Vibration API）告诉用户 Web 应用程序有用的更新可用。
客户端存储 API【待学习】在 Web 浏览器中的使用变得越来越普遍 - 如果你想创建一个应用程序来保存页面加载之间的状态，甚至让设备在处于脱机状态时可用，那么在客户端存储数据将会是非常有用的。例如使用Web Storage API的简单的键 - 值存储以及使用IndexedDB API的更复杂的表格数据存储。

第三方API

地图相关：openlayer、leaflets、ArcGIS API for JS、高德、腾讯、百度...

API共性

可识别的入口点

文档对象模型 (DOM) API 有一个更简单的入口点 —它的功能往往被发现挂在 Document 对象，或任何你想影响的 HTML 元素的实例，例如：

var em = document.createElement("em"); // create a new em element
var para = document.querySelector("p"); // reference an existing p element
em.textContent = "Hello there!"; // give em some text content
para.appendChild(em); // embed em inside para

其他 API 具有稍微复杂的入口点，通常涉及为要编写的 API 代码创建特定的上下文。例如，Canvas API 的上下文对象是通过获取要绘制的 <canvas> 元素的引用来创建的，然后调用它的HTMLCanvasElement.getContext()方法：

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

然后，我们想通过调用内容对象 (它是CanvasRenderingContext2D的一个实例) 的属性和方法来实现我们想要对画布进行的任何操作，例如：

var requestURL =
  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
var request = new XMLHttpRequest();
request.open("GET", requestURL);
request.responseType = "json";
request.send();

request.onload = function () {
  var superHeroes = request.response;
  populateHeader(superHeroes);
  showHeroes(superHeroes);
};