Biography of tadpole: 200 lines of code to achieve the front-end traceless buried point

Time:2020-8-7

Grey sky

Your face

The tone of breaking up

Tadpole: “can’t you walk?”

Goddess: “no”

Tadpole: “what’s good about that man”

Goddess: “he speaks well, looks handsome, and has money”

Tadpole: “I have no house, no car, no deposit, but I have a heart to love you”

Gao Fu Shuai appeared: “I have a house, a car and a deposit. I also have a heart to love her.”

Tadpole: “I can run ten kilometers to buy her a snack.”

Gao Fu Shuai: “I drive Lamborghini to buy her a snack”

Tadpole: “I can type 5000 lines of code a minute”

Gao fushai: “the boss of your company is my father”

Tadpole: “this

In front of the power of money, all the words seem so pale and powerless

Little tadpole kneels on the ground, looking at Gao Fu Shuai’s far away tail light, disappearing in the horizon

On the 30th day of lovelorn, the tadpole went to the mountain to worship Buddha

Tadpole: “Great Buddha, why do I fail in my feelings”

Buddha said: “because you are not enough slag, only love one person at a time, next time love 100 at the same time try?”

Little Tadpole

Tadpole: “Great Buddha, how can I become the No. 1 scum man in the lake and lake”

Buddha said: “if you want to be a top scum man, you have to go through three hurdles.”

Buddha: “the first level we call” rich woman

Buddha: “a top scum man, he needs a strong source of funds to roam the world, and the rich woman is the key to this capital flow.”

First level: rich woman

With the guidance of the Buddha, the tadpole comes to the international hotel

The rich woman’s 80th birthday party is being held on the roof

The rich woman sat in her wheelchair and looked at the sister paper on the dance floor

I look like I’m 18

Little tadpole appeared: “Hello, madam, my name is tadpole”

Rich woman: “what can I do for you”

Tadpole: “I want to get your care”

The rich woman’s denture almost came out of her mouth

Rich woman: “my foster care is not what you want, you can take it if you want it.”

The little tadpole performed a piece of broken stone on the spot

The rich woman suppressed her ecstasy and said, “it’s not enough. It’s not enough.”

Tadpole: “I can type 5000 lines of code in a minute. My hand is very fast.”

“You are my only true love ~!”

The second level is slag girl

After winning the rich woman successfully, we came to the second level

Buddha said: “you need to get to a top scum girl named ‘night devil’. Through her” peerless whore skill “, you can understand the legendary” slag man’s Heart Sutra. “

Night demons haunt nightclubs all year round

Mediating between the rich second generation

Night devil’s motto: “when you walk too much, you will understand the value of heart wandering”

“Dregs male harvester”, “king of nightclub”, “Chizha class slag emperor”

It’s all her nicknames

A rich second generation who was killed by her

Before he died, he left his last words:

Don’t fall in love with her, trust me

You’re just a lonely night

She wants to be romantic

Small toys

Nightmares top the annual list of slag girls

Tadpole’s mission: Hunt and kill night demons

One o’clock in the morning, nightclub

Little tadpole: “little sister, Hello, my name is tadpole”

The night devil loves to ignore it

Lu Xun once said: “in front of money, all scum women are paper tigers.”

Little tadpole shows the key of Lamborghini accidentally (presented by a rich woman on her 80th birthday)

“Brother, please have a seat

What would you like to drink

Tadpole: “want to drink some of your dimples”

In the face of chatting up, the night devil pretends to blush and pretend to be shy

Let you think that she is a pure and stray Little sister

Night Devil: “I think my brother is rich. What’s his occupation?”

Tadpole: “my occupation is professional scum man”

A low-end rich second generation shows off how rich they are and how powerful their father is

But a second generation of the top rich has always said that he is a slag man

Night Devil: “brother, do you have anyone you like”

Tadpole: “yes, she’s in someone else’s bed.”

Tadpoles began to play emotional cards, claiming that they had been hurt

Calling for maternal love and sympathy

Night Devil: “what’s the matter with my brother?”

Tadpole: “I want to use your beauty and charm to help me break a man”

Night Devil: “who?”

Tadpole: “I”

It’s a flirting routine

Face the scum girl, you have to behave worse than her

You slag as you slag, anyway, I am not slag

Tadpoles no longer circle, direct attack

Tadpole: “I want to marry you if you don’t speak in secret.”

Night devil is a well-known slag girl, men just want to have an affair with her

In the face of the sudden “marriage”, I began to feel helpless

Tadpoles seize the opportunity to enlarge their moves

A gold watch worth 1.8 million yuan (presented by a rich woman on her 80th birthday)

Night devil

Chrysanthemum tight, tiger body a shock

Countless rays of light hit her

The night devil was full of tears

He nodded with satisfaction

Three rounds after drinking, when the mood is disordered and infatuated

Tadpole took her to her mother

Shen Zang Gong and Ming

The third level: Revenge

The last level

Buddha said: “the third pass, revenge. Revenge for throwing away your goddess and Gao Fu Shuai

“OK,” the tadpole smiles and calls out the night devil

8:00 p.m. in a fancy restaurant

Goddess and Gao Fu Shuai kiss me at the passion party

The night devil appeared and picked up the microphone

“Brother, please put down your girlfriend’s hand, you are surrounded by me.”

There was an uproar at the scene

Night Devil: “it’s not who I’m aiming at. On beauty, all of you here are rubbish.”

Everyone was stunned by the top match of the night devil

Night Devil: “I’ll randomly pick a man and wake up with me tomorrow.”

Lu Xun said: “I want to sleep with you, is playing rogue. I want to get up with you. It’s Xu Zhimo

Men cheered and knelt like mad dogs

Nocturnal target

Go straight to Gao Fu Shuai: “little brother, you look like my next boyfriend”

Gao Fu Shuai panicked: “I, I, I… Already

“Are you in love? “Two missing one”

Gao Fu Shuai covers his heart: “bad, it’s the feeling of the heart”

The goddess on one side was furious: “I xx, you XX, seduce my man”

“I just treat him as my brother”

The goddess continued: “I xx, you XX”

The night devil looked at Gao Fu Shuai innocently: “all blame me, make your girlfriend angry”

Gao Fu Shuai’s fall: “don’t pay attention to the eight old ladies”

Goddess: “I xx, you XX”

Night Devil: “she’s so fierce, I’m so scared”

Gao fushai: “don’t be afraid, my little heart, purple sweet potato is for you”

Lu Xun once said: “dregs women’s clothes are pure, invincible in the world”

Gao Fu Shuai becomes the ghost of night devil

The goddess knelt down, covered her face and wept

All these are carefully planned by tadpoles

Buddha appeared: “Congratulations, tadpole, you become a top scum man”

Little tadpole: “Buddha’s heart is empty, my monk’s thoughts are over”

Buddha said: “I now give you the name of slag Buddha.”

Buddha said: “I hope you will follow me to the nightclub to subdue demons and Demons and return a pure land to the world.”

Tadpole: “Oh, Amitabha”

Little tadpole finally became the first scum man in the lake

The means are cruel

But let’s not blame the scum

Because behind every slag man, there is an unforgettable sadism

Every slag man was once an angel with broken wings

The night I got rid of the goddess

The little tadpole leans on the rich woman’s shoulder

A song circulates in the car:

i lost myself again

I lost myself again

but i still remember you

You are still so deep in my mind

don’t come back

Don’t look back at me. Those wounds are not healed

our love is six feet under

Our love is buried

i can’t help but wonder

I want to know if I can’t do it myself

if our grave was watered by the rain

After the torrential rain, bury the place we love

would rose bloom

Will there be roses blooming quietly

————《six feet under》

finish

Author: the first tadpole

WeChat official account: front end grass root cock wire

github: https://github.com/airuikun/blog

Biography of tadpole: 200 lines of code to realize the front end traceless embedding point

background

After the last public speech, many of my friends were very interested in the traceless burying point

This time, we will talk about the principle and implementation of the front-end traceless embedding point.

Lu Xun once said: “all technical articles that do not put the source code are rogues.”

So no trace buried point source code: smart tracker

What is no trace buried point

In other words, when the library is introduced without trace

All user actions and actions in the browser are automatically recorded

And send the information to the back-end for statistics and analysis

The traditional form of buried point is manual

Binds an event on the specified element

Send the user behavior information to the server for statistics

Suppose that if there are 10000 points to be buried by the front dog, the surprise is not surprise, and the accident is not unexpected

Why do we have to do no trace burying point

Improve work efficiency and free hands

After the loser’s hands were liberated

More time to please yourself with your hands

Hee hee

Principle of no trace buried point

The principle is very simple. Here we only talk about Click’s no trace buried point principle

When a user clicks on an element on the page

We want to record the path of the entire DOM between the current element and the body as the unique identifier of this element, which we call dompath

This dompath is not only the unique identifier of this element

You can also go through document.querySelector (dompath) to uniquely select and locate this element

When the user clicks this element once, it will upload the buried point data to the server

Add one to the corresponding statistics of dompath on the server

Implementation of traceless buried point code

    document.body.addEventListener('click',  (event) => {
        const eventFix = getEvent(event);
        if (!eventFix) {
            return;
        }
        this._handleEvent(eventFix);
    }, false)

First, the global click event is monitored and bound on the document body to capture all the user click events.

const getDomPath = (element, useClass = false) => {
    if (!(element instanceof HTMLElement)) {
        console.warn('input is not a HTML element!');
        return '';
    }
    let domPath = [];
    let elem = element;
    while (elem) {
        let domDesc = getDomDesc(elem, useClass);
        if (!domDesc) {
            break;
        }
        domPath.unshift(domDesc);
        if (querySelector(domPath.join('>')) === element || domDesc.indexOf('body') >= 0) {
            break;
        }
        domPath.shift();
        const children = elem.parentNode.children;
        if (children.length > 1) {
            for (let i = 0; i < children.length; i++) {
                if (children[i] === elem) {
                    domDesc += `:nth-child(${i + 1})`;
                    break;
                }
            }
        }
        domPath.unshift(domDesc);
        if (querySelector(domPath.join('>')) === element) {
            break;
        }
        elem = elem.parentNode;
    }
    return domPath.join('>');
}

This code is the key to get the unique ID dompath of the element

The getdompath function passes in the target object of the user click event: getdompath( event.target )。

The main idea is to find the current elements event.target

And then it goes through a loop to find its parent node, parentnode

Take the tagName of the parent node as the node on the dompath path

If the current element has an ID, the loop of all paths is cancelled and the ID is assigned to dompath directly

    const children = elem.parentNode.children;
    if (children.length > 1) {
        for (let i = 0; i < children.length; i++) {
            if (children[i] === elem) {
                domDesc += `:nth-child(${i + 1})`;
                break;
            }
        }
    }
    domPath.unshift(domDesc);

The code in the getdompath function

This means that multiple identical tagName elements appear at the same level

So we need to locate this event.target How many of the elements are in this level

If this div is the third in the same level, it returns div:nth-child (3)

So that you can document.querySelector (dompath) to locate this element only

    _handleEvent(event) {
        const domPath = getDomPath(event.target);
        const rect = getBoundingClientRect(event.target);
        if (rect.width == 0 || rect.height == 0) {
            return;
        }
        let t = document.documentElement || document.body.parentNode;
        const scrollX = (t && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft;
        const scrollY = (t && typeof t.scrollTop == 'number' ? t : document.body).scrollTop;
        const pageX = event.pageX || event.clientX + scrollX;
        const pageY = event.pageY || event.clientY + scrollY;
        const data = {
            domPath: encodeURIComponent(domPath),
            trackingType: event.type,
            offsetX: ((pageX - rect.left - scrollX) / rect.width).toFixed(6),
            offsetY: ((pageY - rect.top - scrollY) / rect.height).toFixed(6),
        };
        this.send(data);
    }

This code is to get the horizontal position and vertical position ratio of the relative position of the user clicking on an element

If we get the value of this location, we can get the specific location of the user click element from the embedded point data

Because it is a proportional value, it can also adapt to the change of page size in the reverse derivation

    send(data = {}) {
        const image = new Image(1, 1);
        image.onload = function () {
            image = null;
        };
        image.src = `/?${stringify(data)}`;
    }

The location information and the unique ID dompath of the user are obtained

You can send the data to the server for statistics

The SRC of image is used to transmit the data

The advantage of SRC with image is that it is lightweight and supports cross domain

Basically, this method is used to send data

ending

I haven’t written an article for more than two months because I’m busy with promotion

The biggest feeling of this promotion is that if you only focus on the business, it is difficult to succeed in promotion

Need to do some technical requirements in daily work

And no trace buried point, is a good choice

However, this paper is only a simple implementation of traceless embedding point

These are just the tip of the iceberg for the whole traceless buried point system

The real traceless buried point also needs to do statistics, analysis, difference prediction, marking strategy, intelligent noise reduction, visual traceless, traceless bucket, reverse derivation of thermal diagram, big data middle platform, etc
It involves front end, back end, operation and maintenance, DBA and algorithm

Work together, then you are the top front-end scum man in the lake

The above is all the article, thank you for reading it all

Finally, I wish you a happy life

Author: the first tadpole

WeChat official account: front end grass root cock wire

github: https://github.com/airuikun/blog

Previous articles

  • Biography of tadpole: port forwarding — nightclub legend
  • Biography of tadpole: git time shuttle
  • Biography of tadpole: PNG image compression principle — diaosi’s tears

Recommended Today

How to share queues with hypertools 2.5

Share queue with swote To realize asynchronous IO between processes, the general idea is to use redis queue. Based on the development of swote, the queue can also be realized through high-performance shared memory table. Copy the code from the HTTP tutorial on swoole’s official website, and configure four worker processes to simulate multiple producers […]