前言
以下几个API，在web开发中可以简化我们一部分交互操作。
Fullscreen API
有时候我们想要全屏预览的效果，比如类似于图片预览、幻灯片播放等。全屏API是一个很好的选择。
基本用法
- 打开全屏
element.requestFullscreen().then(() => {
// 成功的处理
}).catch(err => {
// 失败的处理
})
- 退出全屏
element.exitFullscreen().then(() => {
// 成功的处理
}).catch(err => {
// 失败的处理
})
- 事件
fullscreenchange监听元素全屏、退出全屏的变化；fullscreenerror监听全屏请求失败。
注意事项
在iframe中，如果要手动调用fullscreen API，可能会遇到错误Document is not active，是因为没有给iframe元素赋予fullscreen的权限。此时应该给iframe增加属性allowfullscreen。
MutationObserver
MutationObserver目前是DOM变化监听神器。主要原因有二：
- 异步监听
DOM变化，不影响页面性能 - 可以细粒度的监听
DOM内容变化，元素、属性、文本的变化都能检测到，且能够比较出新旧值的差异
在一定程度上，使用它能够做到文档内容的撤销、重做。
基本用法
- 实例化
var observerInstance = new MutationObserver(function (mutations, observer) {
// mutations为变化内容描述
mutations.forEach(function(mutation) {
console.log(mutation);
});
});
每次DOM变化，都会触发实例化中的回调方法
- 方法
- 添加元素监听
// 监听body中元素的变化
observerInstance.observer(document.body, {
attributes: true, // 属性
characterData: true, // 文本
childList: true, // 子节点
subtree: true, // 后代节点
attributeOldValue: true, // 属性旧值
characterDataOldValue: true // 旧文本
})
- 移除元素监听
observerInstance.disconnect()
调用此方法后，将停止对已添加元素的监听
- 清楚变动记录
observerInstance.takeRecords()
因为监听是异步的，不是每次DOM变动都实时触发，此方法的调用，会使历史缓存的变化信息被清空。
IntersectionObserver
IntersectionObserver与MutationObserver使用方法比较类似，原理也有点类似，只是前者的主要作用是监测元素的可见性变化，后者主要是监测DOM的变化。两者都是异步操作，不会影响页面性能。
利用此API，实现上拉列表刷新，下拉加载更多将会变得非常简单。
基本用法
- 实例化
var observerInstance = new IntersectionObserver(function (entries) {
// intersectionRatio代表元素的可见比例，可见大于0，不可见小于等于0
if (entries[0].intersectionRatio <= 0) return;
loadItems(10);
}, {
threshold: [0, 0.25, 0.5, 0.75, 1] // 监听对象的交叉区域与边界区域的比率,默认是0
});
- 方法
- 添加元素监听
// 监听特定元素，每次调用都会重新添加一个元素的监听
observerInstance.observer(document.getElement('item1'))
- 移除元素监听
observerInstance.disconnect()
调用此方法后，将停止对已添加元素的监听
- 返回所有观察目标数组
let IntersectionObserverEntryList = observerInstance.takeRecords()
- 停止观察特定元素
observerInstance.unobserver()