JavaScript 设计模式之代理模式

JavaScript 设计模式之代理模式

references:
JavaScript设计模式——代理模式

  /**
     * 代理模式：虚拟代理
     * 比如实现图片的预加载，在图片请求回来之前显示一张loading图，请求完成后显示真正的图
     */
    let myImg=(function (){
        let imgNode=document.createElement('img');
        document.body.appendChild(imgNode);
        return function(src){
            imgNode.src=src;
        }
    })();
    let proxyImage=(function(){
        let img=new Image();
        img.onload=function(){
            myImg(this.src);
        };
        return function(url){
        	// 此处是一个 loading 的 GIF
            myImg('../../assets/loading.gif');
            img.src=url;
        }
    })();
    proxyImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568127103634&di=05af3c4d076721593647c8160e77523f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F08%2F20150908093108_QRmSh.jpeg');
    // myImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568127103634&di=05af3c4d076721593647c8160e77523f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F08%2F20150908093108_QRmSh.jpeg');
    /**
     * 整理一下操作的全流程：
     * 执行proxyImage后首先新创建了一个img对象并且开始加载它，与此同时调用myImg
     * 它的作用是创建dom节点并且展现我们的loading图片，当img加载完图片后执行onload回调显示网图（给dom节点设置图片地址）
     * 代理起到了一个转接装饰的作用，最终的请求还是转接给了本体myImg。
     * 如果某一天不想用代理，就可以直接用myImg即可
     */