About title pop-up instructions

Time:2020-12-5

brief introduction

The purpose of writing this is to facilitate myself to sort out the knowledge points. First of all, I don’t know much about JS, so it makes me very sad to see this part. This person doesn’t want to see this one when he sees something he doesn’t know from top to bottom. Although the tutorial says Dafa five times, he still doesn’t know what this step is for. To be honest, I watched this part and dissuaded him. Today, I don’t know whether it’s the desire to learn or what it is. He’s very patient to watch it. There is not much more nonsense. Writing this part is to make complaints about it. )

Start to analyze the code

First of all, I’ll post a complete code (just take a look, don’t be dissuaded!)

/* jshint esversion: 6 */
//Show or hide a prompt box with title above the EL element
function showTitle(el, title) {
    const popover = getPopover();
    const popoverStyle = popover.style;


    if (title === undefined) {
        popoverStyle.display = 'none';
    } else {
        const elRect = el.getBoundingClientRect();
        const elComputedStyle = window.getComputedStyle(el, null);
        const rightOffset = parseInt(elComputedStyle.getPropertyValue('padding-right')) || 0;
        const topOffset = parseInt(elComputedStyle.getPropertyValue('padding-top')) || 0;

        popoverStyle.visibility = 'hidden';
        popoverStyle.display = 'block';
        popover.querySelector('.popover-content').textContent = title;
        popoverStyle.left = elRect.left - popover.offsetWidth / 2 + (el.offsetWidth - rightOffset) / 2 + 'px';
        popoverStyle.top = elRect.top - popover.offsetHeight + topOffset + 'px';
        popoverStyle.display = 'block';
        popoverStyle.visibility = 'visible';
    }
}
//Create or return a prompt box
function getPopover() {
    let popover = document.querySelector('.title-popover');

    if (!popover) {
        const tpl = `
      <div class="popover title-popover top fade in" style="position:fixed;">
        <div class="arrow"></div>
        <div class="popover-content"></div>
      </div>
    `;
        const fragment = document.createRange().createContextualFragment(tpl);
        document.body.appendChild(fragment);
        popover = document.querySelector('.title-popover');
    }

    return popover;
}

export default {
    bind(el, binding, vnode) {
        //Use const to declare a read-only constant whose value is a list of event types to listen to
        const events = ['mouseenter', 'mouseleave', 'click'];
        //Declare a processor to pass different parameters according to different event types
        const handler = (event) => {
            if (event.type === 'mouseenter') {
                //Display a prompt box
                showTitle(el, binding.value);
            } else {
                //Hide a prompt box
                showTitle();
            }
        }
        //Add event listening on EL element
        events.forEach((event) => {
            el.addEventListener(event, handler, false);
        })
        //To add a hook on the other element
        el.destroy = () => {
            //Remove event listening on EL elements
            events.forEach((event) => {
                el.removeEventListener(event, handler, false);
            })
            //Remove destroy on EL element
            el.destroy = null;
        }
    },
    unbind(el) {
        //Remove event listening and data binding
        el.destroy();
    }
}

Don’t panic when you see it (I don’t know anything except Chinese characters from top to bottom anyway)

First of all, we need to understand the viewing order (for the convenience of understanding, I made a little brief treatment for the following code)

export default {
    bind(el, binding, vnode) {
    //Bind: it is called only once. It is called when the instruction is bound to an element for the first time. Here, you can perform one-time initialization settings
    //Ignore some specific logic first
}
  },
  unbind(el){
        el.destroy (); // details are given below
  }
};

Destroy method

First of all, I want to talk about itdestroy()This method is self-defined
Quote the old man

What is El? It is not a vnode. How can we have the destroy method? El is just a DOM. DOM is not a Vue component. It is a native DOM node
—pigzzz

The specific logic is as follows

el.destroy = () => {
    //Remove event listening on EL elements
      events.forEach((event) => {
        el.removeEventListener(event, handler, false)
    })
    //Remove destroy on EL element  
    el.destroy = null

forEach()There is no need to explain here, this is just a simple array of data traversalevent

//Use const to declare a read-only constant whose value is a list of event types to listen to
        const events = ['mouseenter', 'mouseleave', 'click']
        //The event types are 
        //Mouseenter: triggered when the mouse pointer enters (passes through) an element
        //Mouseleave: triggered when the mouse pointer leaves
        //Click: triggered when clicking

[removeEventListener() I don’t know how to poke this method!!!!

This work adoptsCC agreementThe author and the link to this article must be indicated in the reprint

Recommended Today

The course of using Chinese software of poedit Pro

Poedit pro (formerly known as poedit) is a free (professional version charge), open source and cross platform gettext class (. Po format, gettext is used in the application program for program internationalization) International Translation editor. It is also one of the most widely used software of the same type. At present, it is available in […]