代理模式

2018-11-23  本文已影响0人  Ethan_lcm

核心

在业务代码中，由于不方便直接去访问一个对象的时候，写一个高阶函数简介的去调用这个本体方法。

场景说明

场景一

小明喜欢白富美A，有一天决定送一束花给A，但是这货怂，于是他找到了他们的共同好友B。让B帮忙把花送给A。

// 这是不用代理的情况，小明直接送花给A
var Flower = function(){}
var xiaoming = {
    sendFlower(target){
        var flower = new Flower();
        target.receiveFlower(flower);
    }
}
var A = {
    receiveFlower(flower){
        console.log("收到花",flower);
    }
}
xiaoming.sendFlower(A);

这种函数式编程真的挺。。。
解析成三部分：花，小明和白富美A
小明有一个动作就是送花sendFlower，送花的动作需要触发白富美A的收花的动作receiveFlower。两者的参数都是flower。
使用代理的操作

var Flower = function(){}
var xiaoming = {
    sendFlower(target){
        var flower = new Flower();
        target.receiveFlower(flower);
    }
}
var B = {
    receiveFlower(flower){
        A.receiveFlower(flower);
    }
}
var A = {
    receiveFlower(flower){
        console.log("收到花",flower);
    }
}
xiaoming.sendFlower(B);

场景二

使用图片延迟加载代理模式
不使用代理

var myImage = (function(){
    var imgNode = document.createElement('div');
    document.body.appendChild(imgNode);

    return {
        setSrc(src){
            imgNode.src = src;
        }
    }
})();
myImage.setSrc('https://www.baidu.com/images/1.jpg');

上述代码中直接load图片，在图片加载完毕之前。图片位置是一片空白部分。
使用代理模式

var myImage = (function(){
    var imgNode = document.createElement('div');
    document.body.appendChild(imgNode);
    return {
        setSrc(src){
            imgNode.src = src;
        }
    }
})();
var proxyImage = (function(){
    var img = new Image();
    img.onload = function(){
        myImage.setSrc(this.src);
    }
    return {
        setSrc(src){
            myImage.setSrc('../images/loading.gif');
            img.src = src;
        }
    }
})();
proxyImage.setSrc('https://www.baidu.com/images/1.jpg');

上述代码中在图片加载之前图片不在是空白部分，而是一张loading.gif的占位图，优化了用户体验。
使用proxyImage去执行真实的图片加载过程。在加载图片之前先使用一个加载图片占位。
感觉上面的代理模式好弱逼。
下面用非代理模式来讲解下：

var myImage = (function(){
    var imgNode = document.createElement('div');
    document.body.appendChild(imgNode);
    var img = new Image();
    img.onload = function(){
        imgNode.src = img.src;
    }
    return {
        setSrc(src){
            myImage.setSrc('../images/loading.gif');
            img.src = src;
        }
    }
})();
myImage.setSrc('https://www.baidu.com/images/1.jpg');

上述代码中myImage对象除了负责给img节点设置src外，还负责预加载图片。这就违反了面向对象设计的 单一职责原则。如果以后我不需要预加载的话，就需要重新改写myImage函数了。
而上面的proxyImage代理方式就不用了。直接将方法换成myImage使用就可以了。

代理和本体接口的一致性

通过上面两个图片预加载的代码中可以看出来，代理和本体都有一致的接口。使用代理还是使用本地都可以达到最终目的。

var myImage = (function(){
    var imgNode = document.createElement('div');
    document.body.appendChild(imgNode);
    return function(src){
        imgNode.src = src;
    }
})();
var proxyImage = (function(){
    var img = new Image();
    img.onload = function(){
        myImage.setSrc(this.src);
    }
    return function(src){
        myImage.setSrc('../images/loading.gif');
        img.src = src;
    }
})();
myImage('https://www.baidu.com/images/1.jpg');
proxyImage('https://www.baidu.com/images/1.jpg');
// 两个方法都可以被执行

虚拟代理合并HTTP请求

场景中需要频繁获取http请求的时候，一般会做函数节流。另外一种可以使用这种代理模式实现HTTP的请求合并。将一段时间内的请求合并之后一次性的发送给服务器。

<html>
<body>
    <label><input type="checkbox" id="1">1</label>
    <label><input type="checkbox" id="2">2</label>
    <label><input type="checkbox" id="3">3</label>
    <label><input type="checkbox" id="4">4</label>
    <label><input type="checkbox" id="5">5</label>
</body>
<script>
var synchronousFile = function(id){
    console.log('开始同步文件,id为：',id);
}
var proxySynchronousFile = (function(){
    var cache = []; //  保存一段时间内需要同步的ID
    var timer = null;  // 计时器
    return function(id){
        cache.push(id);
        if(timer) return;   // 计时器保证不会覆盖已经启动的定时器
        timer = setTimeout(function(){
            synchronousFile( cache.join(',') );
            clearTimeout(timer);
            timer = null;
            cache = [];
        },2000);
    }
})();
var checkboxs = document.getElementsByTagName("input");
for(var i=0,c;c=checkeboxs[i++]){
    c.onclick = function(){
        if(this.checked === true){
            proxySynchronousFile(this.id);
        }
    }
}
</script>
</html>

缓存代理

高阶函数动态创建代理

/************计算阶乘积*************/
var mult = function(){
    var a = 1;
    for(var i=0,l=arguments.length;i<l;i++){
        a = a*arguments[i];
    };
    return a;
}
/************计算加和*************/
var plus = function(){
    var a = 1;
    for(var i=0,l=arguments.length;i<l;i++){
        a = a+arguments[i];
    };
    return a;
}
/************创建缓存代理的加工厂*************/
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);
    }
}
var proxyMult = createProxyFactory(mult);
var proxyPlus = createProxyFactory(plus);
console.log(proxyMult(1,2,3,4));
console.log(proxyMult(1,2,3,4));
console.log(proxyPlus(1,2,3,4));
console.log(proxyPlus(1,2,3,4));

createProxyFactory这个函数接收一个函数作为参数，并在其内部定义了一个对象cache。并将接收的新函数的参数作为key挂载到cache对象上。从而实现缓存。
但是这样做有什么牛逼的地方呢？高阶函数？

小结

一般在写代码的时候，都不会直接考虑使用代理模式，都是在发现不方便直接操作和访问某个对象的时候，再去编写代理模式去操作。
感觉这个模式有点弱鸡，而且使用场景不多。

上一篇 下一篇

猜你喜欢

热点阅读