JavaScript代理模式

代理模式是爲一個對象提供一個替代品或者佔位符，以便控制對他的訪問。

當客戶不方便直接訪問或者不滿足條件訪問一個對象的時候，提供一個替身對象來控制對這個對象的訪問。

客戶 ——>本體

客戶——>代理——>本體

保護代理

代理可以幫助本體過濾一些不滿足條件的訪問者，代理可以直接拒絕這些訪問者，以便保護本體

代理模式的用途

圖片預加載（虛擬代理）

let myImage = (function() {
    let imgNode = document.createElement('img')
    document.body.appendChild(imgNode)
    return {
        setSrc: function(src) {
            imgNode.src = src
        }
    }
})()
let proxyImage = (function() {
    let img = new Image
    img.onload = function() {
        myImage.setSrc(this.src)
    }
    return {
        setSrc: function(src) {
            myImage.setSrc('localimg')
            img.src = src
        }
    }
})()
proxyImage.setSrc('inter img')

在引入代理之後，可以在圖片加載完成之前設置預加載圖片。myImage負責給圖片設置src，proxyImage負責預加載圖片，這樣保證了函數的單一職責。降低了函數耦合。如果以後有需求發生變化我們不需要直接改動myImage中的代碼，不需要改動myImage的接口，只需要改變代理函數中的代碼，沒有違背開放——封閉原則。

虛擬代理合並HTTP請求

在web開發很多時候會和網絡打交道，最大的開銷也是網絡請求。比如當我們點擊按鈕後要向後臺提交文件，如果我們一直不停的點擊就會造成頻繁的網絡請求帶來巨大的開銷。爲了解決這個問題，我們引入一個代理函數來收集一段時間的請求，然後合併一起發送。

let send = (id) => {
    conslog.log(id)
}
let proxy = (function() {
    let cache = [] // 保存需要發送的文件
    let timer
    return function (id) {
        cache.push(id)
        if(timer) return
        timer = setTimout(function() {
            send(cache)
            clearTimout(timer)
            timer = null
            cache = []
        },2000)
    }
})

使用緩存代理

let mult = function(...arg) {
    let a = 1
    for(let i = 1; i < arg.length; i++) {
        a = a * arg[i]
    }
    return a
}
// 加入緩存代理函數
let proxyMult = (function() {
    let cache = {}
    return function() {
        
    }
})