js實現元素曝光上報的示例

小編給大家分享一下js實現元素曝光上報的示例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

進行數據上報的時候，經常會遇到列表數據曝光上報的問題，只對在當前可視范圍內的數據內容進行曝光上報，而對于未在可視范圍內的數據不進行曝光上報，等待用戶滾動頁面或者區域使元素出現在可視范圍內時才進行曝光上報。

解決方案

目前針對此類問題，主要有兩種解決方案。

方案一：監聽頁面或者區域scroll事件，通過getBoundingClientRect接口取元素的位置與可視窗口進行判斷。

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();

  var width_st = rect.width / 2,
    height_st = rect.height / 2;

  var innerHeight = window.innerHeight,
    innerWidth = window.innerWidth;


  if (  rect.top <=0 && rect.height > innerHeight 
    || rect.left <= 0 && rect.width > innerWidth
  ) {
    return rect.left * rect.right <= 0
      || rect.top * rect.bottom <= 0
  }

  return (
      rect.height > 0 
    && rect.width > 0 
    && ( ( rect.top >= 0 && rect.top <= innerHeight - height_st )
      || ( rect.bottom >= height_st && rect.bottom <= innerHeight ) )
    && ( ( rect.left >= 0 && rect.left <= innerWidth - width_st )
      || ( rect.right >= width_st && rect.right <= innerWidth ) )
  );
}

var nodes = document.querySelectorAll(".item")
function report(node) {
  // 上報的邏輯
}
window.onscroll = function() {
  nodes.forEach(node => {
    if( isElementInViewport(node) ) {
      report(node)
    }
  })
  
}

優點：兼容性好

缺點：

• 需要關注頁面或者區域的scroll事件

• 頻繁的scroll事件，性能問題

方案二：通過 IntersectionObserver 監聽元素是否處于可視范圍

function report(node) {
  // 上報的邏輯
}
var intersectionObserver = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if( entry.intersectionRatio > 0 ) {
      report(entry.target)
    }
  })
})
var nodes = document.querySelectorAll(".item")
nodes.forEach(node => {
  intersectionObserver.observe(node)
})

優點：

• 無須關注 scroll

• 回調是異步觸發，不會頻繁觸發，性能好

缺點：兼容性不好？

實際上，針對兼容性問題，w3c 官方提供了對應 polyfill, 因此intersectionObserver用于生產是可行的。

總結

筆者在實際運用中，通過 IntersectionObserver 封裝了一個簡單的調用庫，應用于可視化埋點 sdk 中，用于解決元素曝光問題，如下

require('intersection-observer'); // polyfill

class Exposure {
  constructor(callback) {
    if (!callback || typeof callback !== 'function') {
      throw new Error("need callback or selector param")
      return
    }
    this.intersectionObserver = new IntersectionObserver((entries) => {
      entries.forEach(item => {
        if (item.intersectionRatio > 0) {
          if (item.target) {
            callback(item.target, item)
            this.intersectionObserver.unobserve(item.target)
          }
        }
      })
    });
  }

  observe(selector, ignoreExposured) {
    if (!this.intersectionObserver || !selector) {
      return
    }
    let nodes = []
    if( this.isDOM(selector) ) { // dom節點
      nodes = [selector]
    }else { // 選擇器
      nodes = document.querySelectorAll(selector)
    }
    if (!nodes.length) {
      return
    }
    nodes.forEach(node => {
      if (!ignoreExposured && node.__wg__tracker__exposured__) {
        return
      }
      node.__wg__tracker__exposured__ = true
      // 開始觀察
      this.intersectionObserver.observe(
        node
      );
    })
  }

  disconnect() {
    if (!this.intersectionObserver) {
      return
    }
    this.intersectionObserver.disconnect()
  }

  isDOM(obj) {
    if( !obj ) {
      return false
    }
    if( typeof HTMLElement === 'object' ) {
      return obj instanceof HTMLElement
    }
    if( typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string' ) {
      return true
    }
    return false
  }
}

export default Exposure

調用方法：

function report() {}
var exposurer = new Exposure((node) => {
  report(node)
})
exposurer.observe(".item)

看完了這篇文章，相信你對“js實現元素曝光上報的示例”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！