JS设计模式——代理模式

1. 介绍

代理模式是一个非常有意义的模式，当客户不方便直接访问一个对象或不满足要求时，提供一个替身对象来控制对这请输入代码个对象的访问。

2. 定义

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

3. 意义

减少一个对象承担过多的职责，减少耦合。

4. 代理模式介绍

1. 保护代理

保护代理的作用就是过滤一些请求.在这个例子中很多人都送小红花，但是小红不是所有人的花都收，而是只收35岁以下的人的花，但每次都要去判断显得麻烦，就可以交给代理对象去判断，符合条件的才把花送给小红。

    var Flower=function(){}
    var xiaoming={
        age:23,
        sendFlower:function(target){
            var flower= new Flower()
            target.receiveFlower(flower,this.age)
        }
    }
    var xiaohua={
        age:60,
        sendFlower:function(target){
            var flower= new Flower()
            target.receiveFlower(flower,this.age)
        }
    }
    var proxy={
        receiveFlower(flower,age){
            if(age<=35){
                xiaohong.receiveFlower(flower)
            }
        }
    }
   var xiaohong={
       receiveFlower(flower){
           console.log('i receive a flower')
       }
   }
   xiaoming.sendFlower(proxy)
   xiaohua.sendFlower(proxy)

2. 虚拟代理（重点）

虚拟代理就是把一些开销很大的对象延迟到真正需要它的时候才去创建。在这个例子中虽然设置了src属性，但是会推迟到图片加载完才设置src属性。虚拟代理还可以应用于合并http请求，处理惰性加载应用。

var myImage=(function(){
    var imgNode=document.createElement("img")
    document.body.appendChild(imgNode)
    return{
        setSrc:function(src){
            imgNode.src=src
        }
    }
})()
var proxy=(function(){
    var img=new Image
    img.onload=function(){
        console.log(myImage)
        myImage.setSrc(this.src)
    }
    return{
        setSrc:function(src){
            myImage.setSrc("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528824410335&di=babef45d6ef1591c6b373f62af81de3b&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3Dbf193fc3f8f2b211e47b8d4affb0490e%2Fe824b899a9014c08c1277115097b02087bf4f466.jpg")
            img.src=src
        }
    }
})()
proxy.setSrc("http://img18.3lian.com/d/file/201704/13/3e6a1f173606db1d9041ecb6e492adcb.gif")

3. 缓存代理

缓存代理是把一些开销打的运算结果先储存起来，下次运算如果传递参数与之前一致则返回之前的运算结果，calculate函数只会调用一次。

var calculate=function(){
    var count=1
    for(var i=0,len=arguments.length;i<len;i++){
        count*=arguments[i]
    }
    console.log("result is:",count)
    return count
}
var proxy=(function(){
    var cache={}
    return function(){
        let arg = Array.prototype.join.call(arguments,",")
        if(arg in cache){
            return cache[arg]
        }
        cache[arg]=calculate.apply(this,arguments)
    }
    
})()
proxy(1,2,3,4)
proxy(1,2,3,4)
缓存代理除了可以用于大开销计算也可用于分页，请求过的页面存储起来。

5. 代理和接口一致性

在上面的例子中可以看到代理对象和实际对象都拥有相同的方法，这有利于后续如果不需要代理了，直接把实际对象换上去就可以了，不需要做过多的修改。