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

在上面的例子中能夠看到代理對象和實際對象都擁有相同的方法，這有利於後續若是不須要代理了，直接把實際對象換上去就能夠了，不須要作過多的修改。