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. 代理和接口一致性

在上面的例子中能够看到代理对象和实际对象都拥有相同的方法，这有利于后续若是不须要代理了，直接把实际对象换上去就能够了，不须要作过多的修改。