視覺化埋點平臺元素曝光采集intersectionObserver思路實踐

// 工具函數命名很清晰，含義不贅述
import { getEleByXpath, getXpathByEle, debounce } from 'utils'; 
class track {
    constructor() {
        /* 
        {
            xpath: '',
            id: ''id
        }
        */
        this.config = {} // 儲存遠端伺服器端返回的埋點 xpath 資訊
        /*
            [xpath]: el,
        */
        this.map = {} // 維護的 xpath -> el 對映
        this.observer = null; // intersectionObserver 範例
    }
    // 遠端獲取需要曝光點的元素
    getConfig() {
        return fetch('xxx').then(res => {
            this.config = res;
            this.config.forEach(item => {
                // 初始化 xpath -> el 對映
                this.map[item.xpath] = null;
            })
        });
    }
    // 監聽 dom 變更
    addDomtreeMutatorObserver() {
        // 不關心屬性變化
        const config = { attributes: false, childList: true, subtree: true };
        // 監聽dom變更，消個抖
        const observer = new MutationObserver(debounce(this.observe.bind(this), 200));
        observer.observe(document.body, config);
    }
    // 監聽元素曝光
    observe() {
        // 此處可以加個 requestIdleCallback 來增強效能
        this.config.forEach((item) => {
            const targetEl = getEleByXpath(item.xpath);
            // 新舊元素不一致才需要取消舊元素監聽，增加新元素監聽
            if (targetEl !== this.map[item.xpath]) {
                // 元素存在，就監聽
                if (targetEl) {
                    this.observer.observe(targetEl);
                }
                // 取消舊元素的監聽
                if (this.map[shadow.xpath]) {
                    this.observer.unobserve(this.map[shadow.xpath]);
                }
                // 更新map中的el
                this.map[shadow.xpath] = targetEl;
            }
            // 一致，則什麼都不做
        });
    }
    // 建立 intersectionObserver
    initObserver() {
        const callback = (entries) => {
            entries.forEach((entry) => {
                if (entry.intersectionRatio > 0.2) {
                    const targetXpath = getXpath(entry.target);
                    for (let i = 0; i < this.config.length; i++) {
                        if (this.config[i].xpath === targetXpath) {
                            // xpath一致
                            // 傳送曝光埋點
                        }
                    }
                }
            });
        };
        const observer = new IntersectionObserver(callback, {
            threshold: 0.2,
        });
        this.observer = observer;
    }
    init() {
        this.getConfig().then(() => {
            // 初始化 intersectionObserver
            this.initObserver();
            // 監聽元素
            this.observe();
            // 監聽 dom 元素變更
            this.addDomtreeMutatorObserver();
        });
    }
}