《JavaScript设计模式与开发实践》读书笔记之代理模式

1.代理模式

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

1.1 一般的图片加载

var myImage=(function () {

        var imgNode=document.createElement('img');

        document.body.appendChild(imgNode);

        return {

            setSrc: function (src) {

                imgNode.src=src;

            }

        }

    }

)();

myImage.setSrc('http://xxx.com/xxx.jpg');

1.2 虚拟代理实现图片预加载

web开发中，图片预加载常见做法是先用一张loading图片占位，然后用异步的方式加载图片，图片加载完成再用它填充到img节点里

var myImage=(function () {

        var imgNode=document.createElement('img');

        document.body.appendChild(imgNode);

        return {

            setSrc: function (src) {

                imgNode.src=src;

            }

        }

    }

)();

var proxyImage=(function () {

    var img=new Image();

    img.onload= function () {

        myImage.setSrc(this.src);

    }

    return{

        setSrc: function (src) {

            myImage.setSrc('loading.gif');

            img.src=src;

        }

    }

})();

proxyImage.setSrc('http://xxx.com/xxx.jpg');

1.3 不用代理的预加载图片实现方式

var MyImage=(function () {

    var imgNode=document.createElement('img');

    document.body.appendChild(imgNode);

    var img=new Image();

    img.onload= function () {

        imgNode.src=img.src;

    };

    return  {

        setSrc: function (src) {

            imgNode.src='loading.gif';

            img.src=src;

        }

    }

})();

MyImage.setSrc('http://xxx.com/xxx.jpg');

上述代码不通过代理模式，也可以实现图片预加载
但是上述代码，违反了单一职责原则
代码中，MyImage对象除了复制给img节点设置src，还要复制预加载图片