代理模式

定義

為一個對象提供一個代用品或佔位符，以便控制對它的訪問。

要點

• 代理模式的關鍵是，當客戶不方便直接訪問一個對象或者不滿足需要的時候，提供一個替身對象來控制對這個對象的訪問，客戶實際上訪問的是替身對象。替身對象對請求做出一些處理之後，再把請求轉交給本體對象。
• 代理模式包括許多小分類，在 JavaScript 開發中最常用的是虛擬代理和緩存代理。
• 虛擬代理：把一些開銷很大的對象，延遲到真正需要它的時候才去創建。使用場景包括圖片預加載等。
• 緩存代理：為一些開銷大的運算結果提供暫時的存儲，在下次運算時，如果傳遞進來的參數跟之前一致，則可以直接返回之前存儲的運算結果。
• 代理和本體接口的一致性：這樣代理接手請求的過程對於用戶來說是透明的，用戶並不清楚代理和本體的區別。任何使用本體的地方都可以替換成使用代理。
• 在JavaScript中，如果代理對象和本體對象都是一個函數，函數必然都能被執行，則可以認為它們也具有一致的接口。

核心代碼

var myImage = (function() {
    var imgNode = document.createElement('img');
    document.body.appendChild(imgNode);
    return {
        setSrc: function(src) {
            imgNode.src = src;
        }
    };
})();

var proxyImage = (function() {
    var img = new Image;
    img.onload = function() {
        myImage.setSrc(this.src);
    };
    return {
        setSrc: function(src) {
            myImage.setSrc('/loading.gif');
            img.src = src;
        }
    };
})(); 

proxyImage.setSrc('http://.../image.jpg');

\\ 代理對象和本體對象都是函數
var myImage = (function() {
    var imgNode = document.createElement('img');
    document.body.appendChild(imgNode);
    return function(src) {
        imgNode.src = src;
    };
})();

var proxyImage = (function() {
    var img = new Image;
    img.onload = function() {
        myImage(this.src);
    };
    return function(src) {
        myImage('/loading.gif');
        img.src = src;
    };
})(); 

proxyImage('http://.../image.jpg');

\\ 用高階函數創建緩存代理的工廠
var createProxyFactory = function(fn) {
    var cache = {};
    return function() {
        var args = Array.prototype.join.call(arguments, ',');
        if (args in cache) {
            return cache[args];
        }
        return cache[args] = fn.apply(this, arguments);
    };
};