简化操作的api

具体操作去MDN

MDN

Fullscreen

全屏预览的效果，比如类似于图片预览、幻灯片播放等。全屏API是一个很好的选择.
打开全屏api

   element.requestFullscreen().then(() => {
       // 成功的处理
   }).catch(err => {
       // 失败的处理
   })

退出全屏

   element.exitFullscreen().then(() => {
       // 成功的处理
   }).catch(err => {
       // 失败的处理
   })

fullscreenchange监听元素全屏、退出全屏的变化；

fullscreenerror监听全屏请求失败。

MutationObserver

MutationObserver目前是DOM变化监听神器。
主要原因有二：

1. 异步监听DOM变化，不影响页面性能
2. 可以细粒度的监听DOM内容变化，元素、属性、文本的变化都能检测到，且能够比较出新旧值的差异。在一定程度上，使用它能够做到文档内容的撤销、重做。

实例化：
每次DOM变化，都会触发实例化中的回调方法

var observerInstance = new MutationObserver(function (mutations, observer) {
    // mutations为变化内容描述
    mutations.forEach(function(mutation) {
        console.log(mutation);
    });
});

方法1： 添加元素监听：

// 监听body中元素的变化
observerInstance.observer(document.body, {
    attributes: true, // 属性
    characterData: true, // 文本
    childList: true, // 子节点
    subtree: true, // 后代节点
    attributeOldValue: true, // 属性旧值
    characterDataOldValue: true // 旧文本
})

方法2： 移除元素监听

observerInstance.disconnect()

调用此方法后，将停止对已添加元素的监听

方法3： 清楚变动记录

observerInstance.takeRecords()

因为监听是异步的，不是每次DOM变动都实时触发，此方法的调用，会使历史缓存的变化信息被清空。

IntersectionObserver

主要作用是监测元素的可见性变化。
利用此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
  });

基本用法：
实例化：

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

1. 添加元素监听

// 监听特定元素，每次调用都会重新添加一个元素的监听
observerInstance.observer(document.getElement('item1'))

2. 移除元素监听

observerInstance.disconnect()

调用此方法后，将停止对已添加元素的监听

3. 返回所有观察目标数组

let IntersectionObserverEntryList = observerInstance.takeRecords()

4. 停止观察特定元素

observerInstance.unobserver()