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

分解写：👇

const promise = createAudioFileAsync(audioSettings); 
promise.then(successCallback, failureCallback);

Vue.js插件vueresource就是用这个写法：

Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);

这称为异步函数调用。

Promise.then的优势

1. Guarantess (a formal promise that sth will be done)

（翻译成约定？）

在JavaScript事件队列的当前运行完成之前，回调函数永远不会被调用。
通过.then()添加的回调函数，都会被调用。
可以多次调用then()，按它们的插入顺序执行。

使用promises对象的最棒的事就是chaining链式链接。

2.Chaining

传统的需求是连续执行多个异步操作，每个后来的操作在前面的操作执行成功之后，带上上一步操作返回的结果开始执行。会导致回调地狱（回调金字塔），非常不方便编辑，写代码的视觉效果特差。

所以通过创造一个promise对象链来完成这种需求。

promise.then会返回一个新的promise。

doSomething().then(function(result) {
  return doSomethingElse(result);
})
.then(function(newResult) {
  return doThirdThing(newResult);
})
.then(function(finalResult) {
  console.log('Got the final result: ' + finalResult);
})
.catch(failureCallback);

catch()l类似then(null, failureCallback)，整个promise chain只要发生❌，就会调用catch().

例子见博客（Gorails）vuejs系列视频：http://www.cnblogs.com/chentianwei/p/9582419.html

catch()后还可以添加then().

3. error propagation 错误传播

一个promise chain遇到错误，就会停止并调用catch()

通过捕获所有的错误，甚至抛出异常和程序错误，promise解决了回调厄运金字塔的基本缺陷。这是异步操作的基本功能。

Client-side storage简介

由JavaScript APIs组成的，允许你在用户的机器上存储数据。

Personalizing site preferences。如客制化颜色，字体
保存之前的站点行为。（从session中获得购物车的信息, 记住用户是否登陆）
在本地保存数据和资源，当下载时可以更快。
保存web程序已经生成的文档，可以在离线时访问。

注意：使用客户端存储API可以存储的数据量仍然是有限的。参考浏览器存储限制和清理标准。

传统cookies

它过时、存在各种安全问题，而且无法存储复杂数据。

⚠️：之所以仍被使用是出于开发者习惯，老的库仍在用cookies，许多网站提供过时的参考和培训材料。

新学校： Web Storage, IndexedDB

Web Storage API提供简单的语法来存取小的，由name/value组成的数据item。
- 例子：用户名字，是否登陆，屏幕背景颜色等。
IndexedDB API：提供完全的数据库系统来存复杂的数据。（没有学习这个api）
- 例子：完全的客户记录，甚至复杂的数据类型，如audio, video文件。

未来： Cache API (没有学习)

一些现代浏览器支持新的 Cache API。这个API是为存储特定HTTP请求的响应文件而设计的，它对于像存储离线网站文件这样的事情非常有用。缓存通常与 Service Worker API 组合使用。

扩展：

Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API。

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

https://www.w3schools.com/html/html5_webworkers.asp

web Storage

存储大于5mb。

所有储存信息，放到了sessionStorage, localStorage。

sessionStorage: 数据存储时间，是直到浏览器tab关闭。

loacalStorage：存储在本地计算机里。

window.localStorage => Storage {length: 0}

⚠️： name/value存储的数据格式是string。

2个方法setItem('name', 'value'), getItem('name'):

localStorage.setItem('name', 'chenwei')
undefined
localStorage.getItem('name')
"chenwei"

⚠️，可以使用dot的方式set和get   (点击查看例子)
localStorage.name = 'chewwei'
localStorage.name 　　输出'chenwei'

移除removeItem('name')

localStorage
Storage {name: "chenwei", length: 1}

localStorage.removeItem("name");
var myName = localStorage.getItem('name');

localStorage
Storage {length: 0}

Mr-chen