js代理模式理解和應用場景

代理模式的理解

Proxy（代理模式）：為其他物件提供一種代理以控制這個物件的訪問

• 使用者無權訪問目標物件
• 中間加代理，通過哦代理做授權和控制

比方：比如買火車票這件小事：黃牛相當於是我們本人的的代理，我們可以通過黃牛買票。通過黃牛買票，我們可以避免與火車站的直接互動，可以省很多事，並且還能享受到黃牛更好的服務(如果錢給夠的話)

類圖

傳統類圖

頂層有一個Image介面，下面分別有，RealImage類和ProxyImage類，後者是前者的代理，而且都實現Image介面，有一點是需要特別注意的是：ProxyImage類的display()方法需要和RealImage的display()方法完全一樣。

簡化js類圖

代理的方法要和被代理的完全一樣

js程式碼

class Realimg{
    constructor(fileName){
        this.fileName = fileName
        this.load()
    }
    display(){
        console.log(`this is ${this.fileName}`);
    }
    loda(){
        console.log(`loading...${this.fileName}`);
    }
}

class ProxyImg{
    constructor(fileName){
        this.proxy = new Realimg(fileName)
    }
    display(){
        this.proxy.display()
    }
}

const proxyImg = new ProxyImg('libi.jpg')

proxyImg.display()

代理模式在前端的使用場景

網頁事件代理

這裡用到了事件冒泡的機制，將多個子元素的方法用父元素代理，這樣可以大量的減少程式碼冗餘

注意這裡的target,nodeName得到的標籤名是大寫表示的

jQuery的$.proxy

在沒有ES6的箭頭函式之前，上面setTimeout裡面是獲取不到外層的的this物件的，一般常用的是如下解決方法，

但除上面的解決方法之外，還有更好的解決方法用$.proxy如下，可以少定義一個變數。

$.proxy()裡面傳入的是一個函式

ES6的Proxy語法

點選下面連結快速理解Proxy
ES6的Proxy的理解和運用

下面用此語法模擬了一個場景，想要找明星出演，不能直接要到明星的電話，只能要到經濟人的電話，出演的報價也是經紀人所決定的，

const actor = {
    name:'JkChen',
    phone:'12312312333',
}

const agent = new Proxy(actor,{
    get(target,key){
        if(key === 'phone'){
            return 'agent 111111111111'
        }
        if(key === 'price'){
            return 2
        }
        return target[key]
    },
    set(target,key,value){
        if(key === 'setPrice' && value < 2){   
            console.log('請不起');
        }else{
            console.log('錢夠了，明星來了');
            target[key] = value
            return true
        }
    }
   
})



console.log(agent.name);
console.log(agent.phone);
console.log(agent.price);
agent.setPrice = 1

總結

• 當代理類和目標類的分離，隔離開目標類和使用者，需要解決解決一些代理和授權問題時
• 此設計模式符合開放封閉原則，隔離解耦