《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，还要复制预加载图片