第六章代理模式

---

代理模式是指一个对象提供一个代用品或者占位符，以便控制对它的访问。比如明星都有经纪人等。 在js中常用的代理模式有虚拟代理和缓存代理。

虚拟代理的基本思想是把一些开销很大的对象，延迟到真正需要的时候采取创建。举一个图片预加载的例子，来看一下虚拟代理的使用：

    // 最简单的图片加载方案
    var myImage = function(){
        var imgNode = document.createElement("img");
        document.appendChild(imgNode);
        
        return {
            setSrc: function(src){
                imgNode.src = src;
            }
        }
    }

上述实现方式，一个最简单的场景是：网速很慢时，图片空白的时间很长 ，为此我们引入一个占位默认图片，使用代理方式进行实现：

    // myImage采用上述定义..
    // 使用代理
    var proxyImage = funciton(){
        var img = new Image();
        img.onload = function(){
            myImage.setSrc(img.src);
        }
        return {
            setSrc: function( src ){
                myImage.setSrc("loading.gif");
                img.src = src;
            }
        }
    }
    proxyImage.setSrc("show.jpg");

为了对比，我们看下不进行代理的实现方式：

    // 不使用代理
    var myImage = (function(){
        var imgNode = document.createElement("img");
        document.body.appendChild(imgNode);
        var img = new Image();
        
        img.onload = function(){
            imgNode.src = img.src;
        }
        
        return {
            seteSrc: function( src ){
                myImage.setSrc("loading.gif");
                img.src = src;
            }
        }
    })();
    myImage.setSrc("show.jpg");

对比上面两个例子，一个不采用代理，一个采用代理模式；或许感觉使用代理模式有点自找麻烦。 我们给出一个假设，因为网络条件好，不采用预加载了（当然有点不现实），那么使用代理模式的情况，只需拿掉代理模式就ok了，但是不使用代理模式的情况，需要对其内部逻辑进行修改。

从程序开发设计的角度上来说，在面向对象的开发者，我们要遵循一个原则：“单一职责原则”。一个对象承载的职责过多，那就意味着把这些职责耦合在一起，从而造成高耦合低内聚的设计。

缓存代理的基本思想是空间换速度。如一个复杂的运算，我们把以前计算过的数值存下来，如果下次用到，那么就可以省去了复杂的计算而直接从缓存中获得到结果； 还有一些分页的设计，可以把打开过的页面数据存下来，下次进入就可以不要发送请求了。