懒加载和惰性加载的一种实现方式—

这是我参与更文挑战的第12天，活动详情查看：更文挑战

代理模式

代理模式是实现之前为对象提供一个代用品或占位符，以便控制对它的访问。

假设我们需要给一个心仪的姑娘送一朵花，普通情况下是自己清收送出去，而女孩也是我们送花的直接对象。

var Flower = function(){};

var jojo = {
    sendFlower: function(target) {
        var flower = new Flower();
        target.receiveFlower(flower);
    }
};

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

jojo.sendFlower(Girl)
复制代码

但是我们如果出于什么原因，不能把花送到女孩的手上，我们可以让女生的朋友代收，再转交给女孩。

var Flower = function(){};

var jojo = {
    sendFlower: function(target) {
        var flower = new Flower();
        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);
复制代码

女孩的朋友说，等她心情好的时候送给她，效果会很好，所以你就让朋友等女孩的心情好的时候再接受花朵。

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)
复制代码

这上面就解释了一个简单的代理模式，我们会遇到直接进行某些操作，并不是当时的最佳选择，在这之前需要提供一个合适的操作。这是我们使用代理模式比较多的场景。

图片懒加载

一般来说，图片过大的时候，我们页面加载的图片会比较慢，用户等待的时间也会很长。当页面出现大部分都是白色的时候，用户会觉得是不是卡住了，或者变得焦躁。我们需要给他一个反馈，说明当时正在加载图片，请稍等。

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')
复制代码

惰性加载

懒加载是因为网络等外界因素导致的功能响应不完善所需要的技巧。而惰性加载是根据当前用户需要再去进行的加载，这样可以加快我们第一次加载的时间。

这边给一个惰性加载的例子，主要是用户按了f12才会去加载开发者工具里面的内容，否则不加载这部分内容。

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(() => { return miniConsole.log(args)});
        }
    }
})();
复制代码