VueencapsulationDOMElement exposure and custom instructions for reporting buried points

One, foreword

In the project, will report some exposure and click on the point, if need to report the buried point at each time to write a report to logic, the code is redundant, if is the vue program, you can pass the custom instructions, all buried point report logic encapsulated inside the custom command, use, you just need to upload data to complete submission.

Two, the realization of exposure buried point report

1. Define the exposure class

Vue does not provide a method to listen for the exposure of a DOM element, so you need to wrap your own class to listen for the exposure of an element, using an API: IntersectionObserver API can automatically “observe” whether an element is visible. If you do not know, you can read this article, which will not be detailed here.

// Declare the dom element exposure class
class DomExposure {
  constructor(callback) {
    // If a function is not passed, throw an error
    if(! callback ||typeof(callback) ! = ='function') {
      throw new Error("need callback or selector param")}// IntersectionObserver is a constructor provided native to the browser
    this.intersectionObserver = new IntersectionObserver((entries) = > {
      entries.forEach(item= > {
        // intersectionRatio is the visible ratio of target elements, and greater than 0 represents visible
        if (item.intersectionRatio > 0) {
          if (item.target) {
            callback()
            // Stop listening after one exposure to see the requirements
            // this.unobserve(item.target)}}})})}// Stop observing
  unobserve(exposureHTMLElement) {
    this.intersectionObserver.unobserve(exposureHTMLElement)
  }

  // Start observing
  observe(exposureHTMLElement) {
    this.intersectionObserver.observe(exposureHTMLElement);
  }

  // Close the observer
  disconnect() {
    if (!this.intersectionObserver) {
      return
    }
    this.intersectionObserver.disconnect()
  }
}
Copy the code
2. Declare the exposure buried point reporting function
// Observe the dom element exposure and complete the exposure buried point report
function bindExposureObserver(el, reportData) {
  const exposure = new DomExposure(() = > {
    // Expose the buried point to report
   	// The encapsulation of the buried point report method
    reportMethod(reportData)
  })
  // Look at the current DOM element
  exposure.observe(el)
}
Copy the code

This function instantiates a DomExposure class, passing in a post-exposure callback. When a DOM element exposure is observed, the callback is performed to complete the reporting of the buried point.

3. Declare click buried point report function
// Bind the click event to the DOM element to complete the click buried point report
function bindClick(el, reportData) {
  el.addEventListener('click'.() = > {
		// Click the buried point to report
		// The encapsulation of the buried point report method
    reportMethod(reportData)
  }, 'false')}Copy the code

This function binds a click event to the DOM element, and when the click event is triggered, the click buried point is automatically reported

4. Registerv-reportCustom instruction
const report = {
  inserted(el, binding) {
    const expReportData = binding.value.expReportData
    const clickReportData = binding.value.clickReportData

    // If expReportData exists, it indicates that the exposure buried point needs to be reported
    if(expReportData) {
      bindExposureObserver(el, expReportData)
    }
    // If clickReportData exists, it indicates that the click-buried point should be reported
    if(clickReportData) {
      bindClick(el, clickReportData)
    }
  }
}
// Register the report directive
Vue.directive('report', report)
Copy the code
5. Use of custom instructions
Vue.component('my-button', {
  data() {
    return {
      pageId: 1.pageName: 'My page'}},computed: {
    reportData() {
      const commonData = {
        page_id: this.pageId,
        page_name: this.pageName
      }
      return {
        expReportData: {
          ...commonData,
          test: 'Exposed'
        },
        clickReportData: {
          ...commonData,
          test: 'I clicked'}}}},template: ReportData ` < div v - report = "" > < p > click on the report of the complete buried < / p > < / div > `
})
Copy the code

The report of the buried site can be completed by adding the V-Report directive where needed and passing in the specified data format.