浅谈IntersectionObserver API

开发过程中，不知道大家有没有遇到只有当图片进入视口(viewport)时需要对数据进行上报，从而统计展现问题，根据传统的技术，一般是通过监听scroll滚动条事件，对其进行判断。然而由于滚动条事件属于密集型事件，很消耗性能，从而给人一种不友好的体验，当网络情况差或浏览设备不好的情况，很容易造成客户丢失的情况，这里，就出现了IntersectionObserver API，它是通过异步监听的方式进行的，不需要时刻的去触发，随着互联网的发展，浏览器对其兼容性也是越来越好。

一、API

当然了，首先要看一下官方对其api的解释：提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。
从这句话不难理解，第一，需要一个监测目标，也就是监测范围，好比找一个人需要确定他在那个省或则市区。第二，需要一个监测的对象，也就是我具体要找的人是谁。第三，也就是监测的对象一定要在我监测的目标范围内。
既然知道它具体是做什么以及怎么做，后面就需要知道代码怎么实现，下面是官方定义代码：

var intersectionObserver = new IntersectionObserver(function(entries) {
 // If intersectionRatio is 0, the target is out of view
 // and we do not need to do anything.
 if (entries[0].intersectionRatio <= 0) return;

 loadItems(10);
 console.log('Loaded new items');
});
// start observing
intersectionObserver.observe(document.querySelector('.scrollerFooter'));

从上面代码不难看出，其实它就是一个构造函数，接受一个构造函数。首先需要我们对其进行实例化一个对象，实例化的对象对其进行observe方法的调用，传递一个dom节点(这就是我们要具体监听的对象)，有没有发现似曾相识的感觉，他就是和我们现在学习的react、vue等是一样的道理，挂载到一个dom对象上(当然了，这里不能说是挂载)。
通过官方说明，是否觉得缺了什么，对，就是其父亲顶级root怎么没有地方配置了，不着急，让我们看看其属性配置。

二、属性

其属性有很多，比如上面说的root（只读），rootMargin，thresholds，我在这里就不一一解释了，想具体看一下每一个可以去官方文档(https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver)。传值方式如下：

function callback(){}
new IntersectionObserve(callback, {
    root: dcoument.querySelector('body'), // 监听范围
    rootMargin: '0px 0px 0px 0px', // 监听范围的位置偏移量
    thresholds:[0] // 监测对象出现在视口的百分比位置口触发，取值范围是0-1
})

root即我们监听对象的父级视口，好比找一个人他所呆的市区一样。如果把中国比如一个网页，那么它默认的值就是中国整个范围。rootMargin也就是要对其范围进行一些范围的缩小。好比我们进行地毯式的搜索时候，最外面的一些海洋什么的进行排除。thresholds，也是最关键的参数，当我们监测一个对象时，想要它刚出现和出现一半到全部出现做一些动画的效果时，我们就可以就可以配置成[0,0.5,1]，当前监听就会触发三次，从而完成我们想要的效果。当然了，一般这些属性我们都是对其默认设置就好。

三、方法

observe(element)：监听某个元素，传入要监听的元素作为参数
unobserve(element)：停止监听某个元素，传入停止监听的元素作为参数
disconnect()：使监听器停止工作
takeRecords()：返回所有正在监听的元素的IntersectionObserverEntry对象数组
用的最多的就是observe、和unobserve方法。也就是监听和取消监听。

四、使用场景

上面说了这么多，最主要的当然是我们在项目中怎么用，而目前我所遇到的用的最多的场景就是两个地方，第一个便是实现监听对象的数据上报以及我们常用的懒加载方式，第一个方式正是我目前使用的，起到了很好的优化效果。这里我写了一个例子，也很简单，如下所示：

这里要说一句，在回调的参数数据对象中，有一个属性isIntersecting，也就是我们所找的对象是否在我们范围内，没有的化也就没必要做什么操作了。
第二个应用当然是懒加载了，从而达到一种很优的体验感，代码如下

 /*
*  添加img
*/
function addImgs() {
    let liDoms = document.createDocumentFragment();
    for(let i = 0; i < 2000; i++) {
        let liDom = document.createElement('li');
        let img = document.createElement('img');
        liDom.setAttribute('data-src', './imgs/1.jpeg');
        liDom.appendChild(img);
        liDoms.appendChild(liDom);
    }
    containerDom.appendChild(liDoms);
}

/*
*  添加监控
*/
function callback(entries) {
    (entries || []).forEach(entry => {
        if(!entry.isIntersecting) {
            return;
        }
        let target = entry.target;
        let srcUrl = target.getAttribute('data-src');
        let imgDom = target.querySelector('img');
        imgDom.setAttribute('src', srcUrl);
        imgDom.style.opacity = 1;
        this.unobserve(target);
    });
}
function addObserver() {
    let lis = document.querySelectorAll('li');
    lis.forEach(li => {
       intersectionObserver.observe(li);
    })
}

当然了，这里只是一部分代码，为了看见效果，我加了一些css样式的动画，在这里就不一一贴出来了，想看完整代码请看github(https://github.com/jiosers/intersection-observer)。如果对你有帮助记得start。

到这里就结束了，当然，还有很多使用的场景，我这里就不列出来了。同时，因为兼容性问题，手机端可能会出现不能正常运行的情况，请查看我的github，tools下面的interestion-observe.js文件，在代码中引入一下文件即可。