js-Client-side web APIs

APIs

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/

---

---

简介：

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

JavaScript，API和其他JavaScript工具之间的关系

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

APIs 能做什么

• 操作加载在浏览器中的documents的APIs：  DOM API。
• APIs that fetch data from the server: (无需刷新reload整个页面)，如XMLHttpRequest。 术语Ajax。Rails.ajax是用XMLHttpRequest写的。vueresource插件也用了XMLHttPRequest。
• APIs用于画画和操作图形：如 Canvas ，可以创建2D,3D场景。
• 音频视频API， HTMLMediaElement.
• 设备API.系统通知（参见Notifications API）或振动硬件（参见Vibration API）
• 客户端储存API： 让设备在处于脱机状态时可用。例如使用Web Storage API的简单的键／值存储以及使用IndexedDB API的更复杂的表格数据存储。

How do APIs work?

不同的Api通常有共同的特征和相似的主题。

基于对象

它们有可识别的入口点：

比如DOM api, 入口点是Document对象，或者一个HTML元素的实例，var em = document.getElementById('id')

它们使用event to handle changes in state

当事件触发，运行函数的处理程序属性。

---

---

Basic Document manipulation

我的codepen案例：https://codepen.io/chentianwei411/pen/EeJwxw?editors=0111

DOM需要基本理解。

现代框架Vue.js是使用数据驱动DOM树结构的。数据有index用于排列顺序结构。当改变数据的index, vue就会监测到data变化，从而自动对DOM树进行改变。

定位：

Document.querySelector()

创建和放置新节点

var sect = document.createElement('p')

sect.appendChild(para)

创建文本节点： document.createTextNode()

• 这是document对象的方法。
• textContent： 元素对象的方法，返回／设置 一个文本节点。

移动和删除

对节点移动，方法很多，如appendChild("xxx"), 把某个节点移动到父节点最后。

删除：  父节点.removeChild(子节点)

如果不知道父节点是谁，可以 子节点.parentNode.removeChild(子节点)

---

Active learning: Getting userful information from the Window object

从window对象获得有用信息

例子：根据浏览器窗口大小调节 网页内容的可用大小

知识点css#boxSizing

设置为border-box，让padding+border-size+width/height的总和等于最开始width/height的设置

目的：布景的调整。

个人理解，把content的宽／高缩减一点，留给padding+border，让总和等于width/height

例子：https://www.w3schools.com/CSSref/tryit.asp?filename=trycss3_js_box-sizing

知识点 HTML DOM event  resize()

when the browser window has been resized。

---

---

Fetching data from the server

取回数据 局部加载页面 。

Ajax: 使用XMLHttpRequest技术来请求JSON格式的数据。

现代javascript api都是基于promises的，使用Promise和Fetch代替传统的XHR.

Fetch API

提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

附加：

Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。

---

Promise

标签：异步， 扁平化.then

A Promise is an object representing the eventual completion or failure of an asynchronous operation.

promise本质上是一个绑定了回调的对象

假设一个函数，异步地生成一个声音文件给一个配置直接和2个回调函数。

//旧的写法
function successCallback(result) {
  console.log("Audio file ready at URL: " + result);
}

function failureCallback(error) {
  console.log("Error generating audio file: " + error);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

现代函数返回一个可以直接绑定回调函数的promise对象，新的写法：

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

分解写：