JavaScript设计模式四（代理模式）

代理模式的定义：

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

代理模式的关键点在于，客户不关心请求的是代理还是本体，它只是想获得需要的东西。

我们还是通过例子来理解代理模式

代理模式例子

背景：小S需要最小L，但是小S很羞涩，刚好小C是小L和小S的朋友，小S委托小C送花给小L。

看看代码怎么实现吧，如果不经过小C，也就是不用代理模式

var Flower = function(){};

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

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

xiaoS.sendFlower(xiaoL);

如果小S勇敢一点，到这里也就结束了，大家也不用往下面继续看了，但是她怂了啊，还是需要小C来加把火

var Flower = function(){};

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

var xiaoC = {
    receiveFlower: function(flower) {
        xiaoL.receiveFlower(flower);
    }
}

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

xiaoS.sendFlower(xiaoC);

这里看起来本质上没啥区别，如果小L就是不喜欢小S，那么这里其实就是把简单的事情搞复杂了。但是小C真的就只有传递花的作用么？想想，小C是不是可以挑一下时间来送花呢？例如等小S心情好的时候再送花

var Flower = function(){};

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

var xiaoC = {
    receiveFlower: function(flower) {
        xiaoL.listenGoodMood(function(){
            xiaoL.receiveFlower(flower);
        });
    }
}

var xiaoL = {
    receiveFlower: function(flower){
        console.log('receive flower: ' + flower);
    },
    listenGoodMood: function(fn) {
        setTimeout(function(){
            fn();   
        }, 1000);
    }
}

xiaoS.sendFlower(xiaoC);

代理模式分类

我们知道代理小C其实还可以做一些其他的事情，比如小C可以帮小L拒绝一些事情，例如追小L的送花的人没有宝马的，或者不帅的，这种请求在小C那里就直接被拦截掉了，这种模式就叫做保护代理。

我们上面看到有一个new Flower()的动作，但是这是一个很昂贵的操作，这个动作其实可以让代理去实现，代理会选择在小L心情好的时候再去new Flower()，这样给小S也节约了成本，这种形式就叫做虚拟代理。虚拟代理把一些开销很大的对象，延迟到真正需要它的时候才去创建。

虚拟代理

虚拟代理可以实现图片的预加载、合并http请求、在惰性加载中也有应用

这里以图片预加载作为例子：

先看一下不在代理的情况

var myImage = (function(){
    var imgNode = document.createElement( 'img' );
    document.body.appendChild( imgNode );
    return { 
        setSrc: function( src ){ 
            imgNode.src = src; 
        } 
    } 
})();

myImage.setSrc( 'xxxxx.jpg' );

这个会有一个明显的问题，就是如果网络情况不好，在图片加载之前会有一段时间是空白的，

我们可以在图片加载前先弄一张loading.gif

var proxyImage = (function(){ 
    var img = new Image; 
    img.onload = function(){ 
        myImage.setSrc( this.src ); 
    };
    return { 
        setSrc: function( src ){ 
            myImage.setSrc( 'C://loading.gif' ); 
            img.src = src; 
        } 
    } 
})();

proxyImage.setSrc( 'XXXXX.jpg' );

如果大家多思考一下，可能会提出一个问题，这里的代理类，其实好像没什么必要，我不用代理也可以实现上面的需求

var MyImage = (function(){
    var imgNode = document.createElement('img');
    document.body.appChild(imgNode);
    var img = new Image;
    img.onload = function(){
        imgNode.src = img.src;
    };

    return {
        setSrc: function(src) {
            imgNode.src = 'c://loading.gif';
            img.src = src;
        }
    }
})();

MyImage.setSrc('xxx.jpg');

讲到这里就不得不说代理的意义了，先看我们上面提到的单一职责原则：

单一职责原则指的是，就一个类（通常也包括对象和函数等）而言，应该仅有一个引起它变化的原因

如果一个对象有多项责任，也就有多种导致它变换的原因，这也会导致程序的耦合。

我们利用代理，把给image设置节点和图片预加载两个功能分开了，他们的变换互相不影响，比如那一天我不需要图片预加载了，直接用以前设置节点的函数就可以了，不需要去重新修改函数，不是美滋滋么

缓存代理

缓存代理的应用也很多，例如计算乘积、ajax异步请求等

我们看一下计算乘积的例子

先看不加缓存代理：

var mult = function(){ 
    console.log( '开始计算乘积' ); 
    var a = 1; 
    for ( var i = 0, l = arguments.length; i < l; i++ ){
        a = a * arguments[i]; 
     } 
     return a; 
};

mult( 2, 3 ); 
mult( 2, 3, 4 );

// 输出：6 
// 输出：24

再看加了缓存代理：

var proxyMult = (function(){ 
    var cache = {}; 
    return function(){
        var args = Array.prototype.join.call( arguments, ',' ); 
        if ( args in cache ){ 
            return cache[ args ]; 
        } 
        return cache[ args ] = mult.apply( this, arguments ); 
    } 
})();

proxyMult( 1, 2, 3, 4 );
proxyMult( 1, 2, 3, 4 );

// 输出：24 // 输出：24