IntersectionObserver 曝光埋点

/**
 * 该文件用于模块埋点曝光
 * 将曝光的埋点名存储到vuex store/modules/observePoint.js
 * @param {Array} domNode 需要监视的dom节点
 * @param {String} domName 曝光的节点名
 */
import { getStoreSession } from "@/store";

export function observePoint(domNode = [], path) {
    // console.log(domNode, "传入的节点名");
    //监视器配置
    let options = {
        root: null, //null默认浏览器窗口
        rootMargin: "0px 0px 0px 0px",
        threshold: 1.0, //0~1 1.0:代表完全显示
    };
    //实例
    let domName = "";
    let intersectionObserver = new IntersectionObserver((entries, observe) => {
        console.log(entries, "entries");
        entries.forEach((item) => {
            //放到异步队列，增加延迟执行(宏->微->宏...) - 处理页面有多个节点同时曝光
            setTimeout(() => {
                //完整显示再记录埋点
                if (item.intersectionRatio == 1) {
                    let dom = "." + item.target._prevClass;
                    if (domNode.includes(dom)) {
                        //曝光的节点名
                        domName = dom;
                        // console.log(domName, "domName");
                        // 将曝光的埋点名存储到vuex
                        getStoreSession().dispatch("oberserPoint/saveNodeName", domName);
                    }
                }
            }, 0);
        });
    }, options);
    //监视传入的元素
    for (let i = 0; i < domNode.length; i++) {
        let target = document.querySelector(domNode[i]);
        intersectionObserver.observe(target);
        // console.log(target, "监视的节点名");
    }
}

IntersectionObserver 介绍

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