Web API:https://developer.mozilla.org/zh-CN/docs/Web/API
首先回顾一下以前了解过的Web API(强确实强,但很少用到...)
Intersection Observer API
Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。
相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API
Fullscreen API
全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式,并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器,使得一个元素与其子元素,如果存在的话,可以占据整个屏幕,并在此期间,从屏幕上隐藏所有的浏览器用户界面以及其他应用。
相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API
Notifications API
Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外,因此即使用户已经切换标签页或移动到不同的应用程序,也可以显示。该API被设计成与不同平台上的现有通知系统兼容。
相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Notifications_API
Resize Observer API
Resize Observer API提供了一种高性能的机制,通过该机制,代码可以监视元素的大小更改,并且每次大小更改时都会向观察者传递通知。
相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Resize_Observer_API
Window.matchMedia
通过JS进行媒体查询,返回一个MediaQueryList对象,在页面满足指定的媒体查询规则时触发绑定的事件处理器;
代码语言:javascript复制mqList = window.matchMedia(mediaQueryString); //返回MediaQueryList对象
MediaQueryList.addListener(MediaQueryListListener listener);
MediaQueryList.removeListener(MediaQueryListListener listener);
相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia
MutationObserver
MutationObserver 接口提供了监视对 DOM 树所做更改的能力,它被设计为旧的 Mutation Events 功能的替代品,该功能是 DOM3 Events 规范的一部分。
相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
Broadcast Channel API
Broadcast Channel API 可以实现同 源 下浏览器不同窗口,Tab 页,frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。
代码语言:javascript复制// 连接到广播频道
var bc = new BroadcastChannel('test_channel');
// 发送简单消息的示例
bc.postMessage('This is a test message.');
// 简单示例,用于将事件打印到控制台
bc.onmessage = function (ev) { console.log(ev); }
// 断开频道连接
bc.close()
相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Broadcast_Channel_API
Encoding API
Encoding API 提供了一种机制来处理各种字符编码文本,包括传统的非 UTF-8 编码。实现对字符串和字节流互转。
代码语言:javascript复制//字符串转字节流
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)); //