记录一些在此之前不知道的Web API

友人a丶
前端笔记
2022-11-09
1020热度
0评论

Web API：https://developer.mozilla.org/zh-CN/docs/Web/API

首先回顾一下以前了解过的Web API（强确实强，但很少用到...）

Intersection Observer API

Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。

Fullscreen API

全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。

Notifications API

Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该API被设计成与不同平台上的现有通知系统兼容。

Resize Observer API

Resize Observer API提供了一种高性能的机制，通过该机制，代码可以监视元素的大小更改，并且每次大小更改时都会向观察者传递通知。

Window.matchMedia

通过JS进行媒体查询，返回一个MediaQueryList对象，在页面满足指定的媒体查询规则时触发绑定的事件处理器；

mqList = window.matchMedia(mediaQueryString); //返回MediaQueryList对象
MediaQueryList.addListener(MediaQueryListListener listener);
MediaQueryList.removeListener(MediaQueryListListener listener);

MutationObserver

MutationObserver 接口提供了监视对 DOM 树所做更改的能力，它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。

Broadcast Channel API

Broadcast Channel API 可以实现同源下浏览器不同窗口，Tab 页，frame 或者 iframe 下的浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。

// 连接到广播频道
var bc = new BroadcastChannel('test_channel');
// 发送简单消息的示例
bc.postMessage('This is a test message.');
// 简单示例，用于将事件打印到控制台
bc.onmessage = function (ev) { console.log(ev); }
// 断开频道连接
bc.close()

Encoding API

Encoding API 提供了一种机制来处理各种字符编码文本，包括传统的非 UTF-8 编码。实现对字符串和字节流互转。

//字符串转字节流
const encoder = new TextEncoder()
const view = encoder.encode('€')
console.log(view); // Uint8Array(3) [226, 130, 172]

//字节转字符串
let utf8decoder = new TextDecoder(); // default 'utf-8' or 'utf8'

let u8arr = new Uint8Array([240, 160, 174, 183]);
let i8arr = new Int8Array([-16, -96, -82, -73]);
let u16arr = new Uint16Array([41200, 47022]);
let i16arr = new Int16Array([-24336, -18514]);
let i32arr = new Int32Array([-1213292304]);

console.log(utf8decoder.decode(u8arr)); // 𠮷
console.log(utf8decoder.decode(i8arr)); // 𠮷
console.log(utf8decoder.decode(u16arr)); // 𠮷
console.log(utf8decoder.decode(i16arr)); // 𠮷
console.log(utf8decoder.decode(i32arr)); // 𠮷

EyeDropper API

EyeDropper API提供了一种创建吸管工具的机制。使用这个工具，用户可以从他们的屏幕上采样颜色，包括浏览器窗口之外的颜色，该API目前只有Chrome浏览器支持。

Web Animations API

web 动画 API 可以让我们用 JavaScript 写动画并且控制动画。通过 Web 动画 API，我们可以将交互式动画从样式表移动到 JavaScript，将表现与行为分开。

1.创建帧动画

//创建帧对象
var aliceTumbling = [
  { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
  { color: '#431236', offset: 0.3},
  { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
];

每个对象代表原始 CSS 中的一个键。与 CSS 不同，Web 动画 API 不需要明确地告知每个键出现的动画的百分比。它将根据您给出的按键数量自动将动画划分为相等的部分。当想要明确地设置一个键与其他键的偏移量时，可以直接在对象中指定一个偏移量，并与逗号分隔。

必须至少指定两个关键帧（表示动画序列的开始和结束状态）.如果您的关键帧列表只有一个条目，Element.animate() 将抛出不支持的异常报错。

Web Animations API 允许同步和定时更改网页的呈现，即 DOM 元素的动画。它通过组合两个模型来实现：时序模型和动画模型。

2.时间属性

//描述动画的时间
var aliceTiming = {
  duration: 3000,
  iterations: Infinity
}

3.播放动画

//指定dom对象，播放动画
//返回Animation对象
document.getElementById("alice").animate(
  aliceTumbling,
  aliceTiming
)

4.动画控制

Animation.cancel()，清除此动画的所有keyframeEffects ，并中止播放。
Animation.finish()，设置动画中止播放。
Animation.pause() ，暂停播放动画。.
Animation.play()，开始或恢复播放动画，或者如果之前完成，则重新开始动画。
Animation.reverse() ，反转播放动画，直到播放到动画开始时停止。如果动画完成或未播放，它将从头到尾播放。

EventSource

服务端推送：https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource