代理模式

作者: bby365 | 来源:发表于2018-07-01 09:51 被阅读0次

设计模式
设计模式
kube-proxy的3种模式
第4章结构型模式-代理模式
理解代理模式
结构型代理模式（文末有项目连接）
设计模式－动态代理模式
代理模式
设计模式之代理模式（Proxy模式）
Java设计模式之代理模式

为一个对象A提供一个代用品或占位符P，以便控制对A的访问。
可以分为保护代理和虚拟代理。

虚拟代理

实现图片的预加载
如果网速比较慢，正常情况下会有很长的空白时间

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

改进方案：先用一张本地loading图片，真正图片加载好后，再替换

var proxyImage = (function(){
    var img = new Image;
    img.onload = function(){
        myImage.setSrc( this.src );
    }
    return {
        setSrc: function( src ){
            myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
            img.src = src;
        }
    }
})();
proxyImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.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 {
        setSrc: function( src ){
            imgNode.src = 'file:// /C:/Users/svenzeng/Desktop/loading.gif';
            img.src = src;
        }
    }
})();
MyImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

如果后期，不需要预加载功能了，那么要进入到MyIamge类中去修改。

代理和本体接口的一致性
比如上面本体和代理提供设置图片src 的方法都用的是setStr方法。
合并HTTP请求
场景：对于实时性要求不高的情况，可以将一段时间内（2s）的请求合并后，在一次性发送给服务器。

<body>
    <input type="checkbox" id="1"></input>1
    <input type="checkbox" id="2"></input>2
    <input type="checkbox" id="3"></input>3
    <input type="checkbox" id="4"></input>4
    <input type="checkbox" id="5"></input>5
    <input type="checkbox" id="6"></input>6
    <input type="checkbox" id="7"></input>7
    <input type="checkbox" id="8"></input>8
    <input type="checkbox" id="9"></input>9
</body>
var synchronousFile = function( id ){
    console.log( '开始同步文件，id 为: ' + id );
};

var proxySynchronousFile = (function(){
    var cache = [], // 保存一段时间内需要同步的ID
    timer; // 定时器
    return function( id ){
        cache.push( id );
        if ( timer ){ // 保证不会覆盖已经启动的定时器
            return;
        }
        timer = setTimeout(function(){
        synchronousFile( cache.join( ',' ) ); // 2 秒后向本体发送需要同步的ID 集合
        clearTimeout( timer ); // 清空定时器
        timer = null;
        cache.length = 0; // 清空ID 集合
    }, 2000 );
    }
})();

var checkbox = document.getElementsByTagName( 'input' );
for ( var i = 0, c; c = checkbox[ i++ ]; ){
    c.onclick = function(){
        if ( this.checked === true ){
            proxySynchronousFile( this.id );
        }
    }
};

cache 用来缓存请求；timer用来延迟批量执行；return返回对外的接口。

缓存代理
如果计算过程很复杂，可以将结果缓存下来；下次如果传递参数一样，可以直接返回前面的运算结果。

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 ); // 输出：6
mult( 2, 3, 4 ); // 输出：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 ); // 输出：24
proxyMult( 1, 2, 3, 4 ); // 输出：24

mult 函数用于计算乘积，proxyMult用于缓存，每个函数复杂各自独立的部分，可以单独使用。
另外，ProxyMult中的参数可以是函数，可以为这个函数创建缓存代理。

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