JavaScript API扩展了解(javascriptapi手册)
当我们编写前端JavaScript程序，会使用的API可以分为
浏览器提供API：已经安装在浏览器中，例如ES语法支持、DOM API、地理定位API、音像影像API。
第三方API：默认没有安装到浏览器中。例如推特API（允许做一些可以在网站上展示推送之类的）、谷歌地图API（嵌入定制的地图到网站）
本文主要围绕前者，注意有的还没有被浏览器完全支持
Web组件
元素重用和封装技术，这套API非常混乱，有各种版本实现，所以通常使用的时候会自己引入一个web组件库（比如polymer）。后面的介绍围绕最新版本展开，理解通用思想即可
影子DOM
解决dom树建立时能够实现维护自身边界，包括样式、子元素
视屏标签就是shadow DOM的封装，有默认的音量等按键，在源代码中根本没有一点痕迹
div.createShadowRoot().appendChild(内部); 复制代码
自定义元素
自定义元素有生命周期，引入了面向对象编程的风格，JavaScript框架中常见
HTML模板
<template>标签提供网页插入元素的位置标记 DocumentFragment 复制代码
Atomics ES2017
提供安全访问SharedArrayBuffer的能力
简化版的ISA,通过强制同一时刻只对缓冲区执行一个操作，可以让多个上下文安全读写一个SharedArrayBuffer
在尽量少但稳定的原子行为上，构建复杂的多线程JavaScript程序
任何全局上下文中都有Atomics对象，这个对象上暴露了用于执行线程安全操作的一套静态方法。
浏览器的JavaScript编译器和CPU架构本身有权限重排指令，Atomics API做到了
所有原子指令之间的顺序永远不会重排
保证所有指令相对原子读或者原子写指令的顺序不会变（前的在前面完成，后的）
Atomics.add() 将指定位置上的数组元素与给定的值相加，并返回相加前该元素的值。 Atomics.and() 将指定位置上的数组元素与给定的值相与，并返回与操作前该元素的值。 Atomics.compareExchange() 如果数组中指定的元素与给定的值相等，则将其更新为新的值，并返回该元素原先的值。 Atomics.exchange() 将数组中指定的元素更新为给定的值，并返回该元素更新前的值。 Atomics.isLockFree(size) 可以用来检测当前系统是否支持硬件级的原子操作。对于指定大小的数组，如果当前系统支持硬件级的原子操作，则返回 true；否则就意味着对于该数组，Atomics 对象中的各原子操作都只能用锁来实现。此函数面向的是技术专家。 Atomics.load() 返回数组中指定元素的值。 Atomics.notify() 唤醒等待队列中正在数组指定位置的元素上等待的线程。返回值为成功唤醒的线程数量。 Atomics.or() 将指定位置上的数组元素与给定的值相或，并返回或操作前该元素的值。 Atomics.store() 将数组中指定的元素设置为给定的值，并返回该值。 Atomics.sub() 将指定位置上的数组元素与给定的值相减，并返回相减前该元素的值。 Atomics.wait() 检测数组中某个指定位置上的值是否仍然是给定值，是则保持挂起直到被唤醒或超时。返回值为 "ok"、"not-equal" 或 "time-out"。调用时，如果当前线程不允许阻塞，则会抛出异常（大多数浏览器都不允许在主线程中调用 wait()）。 Atomics.xor() 将指定位置上的数组元素与给定的值相异或，并返回异或操作前该元素的值。 复制代码
跨上下文消息XDM
postMessage()方法允许来自不同执行上下文之间的脚本采用异步方式进行有限通信。
可以实现跨窗口、跨域、不同工作线程/源的页面的消息传递
核心：
// 目标接受源 * 不限制接收源 postMessage(消息，目标接受源，可选的工作者线程相关的Transferable 对象） window.postMessage() 复制代码
接收到XDM消息，触发message事件
window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { // For Chrome, the origin property is in the event.originalEvent // object. // 这里不准确，chrome没有这个属性 // var origin = event.origin || event.originalEvent.origin; var origin = event.origin if (origin !== "http://example.org:8080") return; // ... } 复制代码应用：解决iframe同源限制问题
同源： iframe中可以通过window.parent对父级进行任意操作（操作Dom、触发父级事件等） 不同源： 游览器会因跨源导致报错 // Uncaught DOMException: Blocked a frame from accessing a cross-origin frame 子界面(iframe)调用window.parent.postMessage()通知父 父监听子界面发送的信息，并对信息进行处理 复制代码
Encode API
字符串与缓冲区【定型数组存储编码信息】之间的无缝转换
定型数组是用于处理数值类型的(不是所有类型)的专用数组，定型数组不是数组类型。定型数组的长度是固定的，创建之后就不能改变。
字符串=>定型数组，编码器始终使用UTF-8
定型数组 =>字符串，编码器支持包括UTF-8在内的很多的字符串编码
批量编码【同步】、流编码【类似管道】
TexEncoder TextEncoderStream TexDecoder TextDecoderStream 复制代码
File、Blob API
2000年之前处理文件的唯一方式是放到表单里，通过设置input元素的
type=‘file’
input获取本地文件
File、Blob API以安全的方式访问客户端机器上的文件，发收、读取大型二进制对象的可靠工具
blob标识二进制对象
FileReader类型提供异步文件读取机制 FileReaderSync 复制代码
媒体元素
HTML5新增 audio 和 video 两个元素，提供浏览器嵌入音频和视频
两个元素有很多用于确定媒体当前状态的属性，还有很多事件监控媒体的变化
不是所有浏览器都支持两个元素的所有编解码器，这通常意味着必须提供多个媒体源。方法用来检测浏览器是否支持给定格式和编解码器。
play()、pause()方法手动控制媒体文件的播放。 canPlayType（）方法，接收一个格式/编解码器字符串 复制代码
拖放
可以跨窗格、浏览器容器、甚至可以跨应用程序
HTML5在所有元素上规定了一个draggable属性，表示元素是否可以拖动
默认图片、链接和文本可拖动
拖放事件event.dataTransfer对象实现拖动操作中的数据传输，和确定目标执行操作dropEffect、dropAllowed
跨放事件 在一个元素被拖动会依次触发：
dragstart
drag 还在被拖动就会持续触发该事件
dragend
在把元素拖动到一个有效的放置目标上，会一次触发以下事件：
dragenter 被拖动到放置目标上就会触发，类似mouseover
dragover元素在放置目标范围内被拖动期间此事件会持续触发
dragleave/drop当元素被拖动到放置目标之外触发
对于无效放置元素，可以通过上述事件监听后，在监听器内部使用event.preventDefault()方法覆盖其原本事件行为，将其转换为有效放置元素。 注意：不同的浏览器有不同的默认行为设置
Notifications API
向用户显示通知，在service worker中非常有用
页面使用全局对象Notification向用户请求通知权限，对象调用requestPemission()方法，该方法返回一个期约。
Notification.requestPermission() .then((permission)=>{ console.log('user respond:',permission);// granted/denied }); 复制代码构造函数实现创建并显示通知‘
const n=new Notification('title of notif',{ body:'body text', image:'path/im.png', vibrate:true }); setTimeout(()=>n.close(),1000);//关闭通知 复制代码通知也可以通过四个添加回调的生命周期方法来实现交互
n.onshow=()=>console.log('is onshow'); n.onclick n.onclose n.onerror 复制代码Page Visibility API
用户的使用页面行为、最小化、隐藏，为开发者提供页面对用户是否可见的信息
document.visibilityState的值:hidden、visible、prerender visibilitychange事件，隐藏<=>可见，时候触发 复制代码
Streams API
还在试验中，浏览器没有普遍支持
web如何消费有序的小信息块而不是大块信息?支持以全新的方式读取、写入和处理数据
大块数据可能不会一次性使用，例如网络请求的响应，网络负载是以连续信息包的形式交付的，流式处理可以让应用在数据一到达就能使用，而不是等到所有数据加载
大块数据需要划分处理。视频处理、数据压缩、图像编码、JSON解析
Timing API
度量数据进出浏览器时间的可靠工具，接口暴露在window.performance上
window.performance.now() 复制代码
浏览器运行性能信息关注performance
Web Cryptography API
密码学工具，JavaScript如何以安全和符合惯例的方式实现加密。生成、使用和应用加密密钥对、加密和解密消息、可靠生成随机数
作者：贾明恣
链接：https://juejin.cn/post/7032604806136987684