This is the 12th day of my participation in Gwen Challenge

The proxy pattern

The proxy pattern is implemented by providing an object with a proxy or placeholder to control access to it.

Let’s say we need to send a flower to a girl we like. We usually pick it up and give it to her.

var Flower = function(){};

var jojo = {
    sendFlower: function(target) {
        var flower = newFlower(); target.receiveFlower(flower); }};var Girl = {
    receiveFlower: function(flower) {
        console.log('receive flower', flower)
    }
};

jojo.sendFlower(Girl)
Copy the code

But if for some reason, we can not send flowers to the girl’s hands, we can let the girl’s friends collect, and then forward to the girl.

var Flower = function(){};

var jojo = {
    sendFlower: function(target) {
        var flower = newFlower(); target.receiveFlower(flower); }};var Girl = {
    receiveFlower: function(flower) {
        console.log('girl receive flower', flower)
    }
};

var Friend = {
    receiveFlower: function(flower) {
        Girl.receiveFlower(flower)
    }
};

jojo.sendFlower(Friend);
Copy the code

The girl’s friend said, when she is in a good mood to give her, the effect will be very good, so you ask your friend to wait for the girl in a good mood to accept flowers.

var Flower = function(){};

var Michael = {
    sendFlower: function(target) { target.receiveFlower(); }};var Girl = {
    receiveFlower: function(flower) {
        console.log('girl receive flower', flower)
    },
    listenGoodMood: function(fn) {
        setTimeout(() = > {
            fn();
        }, 3000)}};var Friend = {
    receiveFlower: function() {
        Girl.listenGoodMood(function() {
            var flower = new Flower();
            Girl.receiveFlower(flower)
        })
    }
};

Michael.sendFlower(Friend)
Copy the code

This explains a simple proxy pattern, we will encounter some operations directly, is not the best choice at the time, before the need to provide a suitable operation. This is the scenario where we use the proxy pattern more.

Lazy loading of images

Generally speaking, when the picture is too large, our page will load the picture slowly, and the user will wait for a long time. When the page appears mostly white, users may feel stuck or irritated. We need to give him a feedback that the image is being loaded, please wait.

const myImage = (() = > {
    let imgNode = document.createElement('img');
    document.body.appendChild(imgNode);

    return {
        setSrc: (src) = > {
            imgNode.src = src
        }
    }
})();

const proxyImage = (() = > {
    let img = new Image;
    img.onload = function() {
        myImage.setSrc(this.src);
    }
    return {
        setSrc: (src) = > {
            myImage.setSrc('loadingUrl'); img.src = src; }}}) (); proxyImage.setSrc('picUrl')
Copy the code

Lazy loading

Lazy loading is due to the network and other external factors caused by the functional response is not perfect skills required. Lazy loading is based on the current user needs to load again, which can speed up our first load time.

Here is an example of lazy loading, mainly the user will press F12 to load the content of the developer tools, otherwise this part of the content will not load.

const miniConsole = (() = > {
    let cache = [];
    let handler = (event) = > {
        if(event.keyCode === 113) {
            let script = document.createElement('script');
            script.onload = function() {
                for(let i of cache) {
                    cache[i]();
                }
                script.src = 'miniConsole.js';
                document.getElementsByTagName('head') [0].appendChild(script);
                document.body.removeEventListener('keyDown', handler); }}}document.body.addEventListener('keydown', handler);

    return {
        log: () = > {
            let args = arguments;
            cache.push(() = > { returnminiConsole.log(args)}); }}}) ();Copy the code

MiniConsole is used as a proxy for the browser’s console method, which can be modified by referring to the console method. This will be applied in a lot of actual projects, there are many functions, users can not load the function when they do not use it.