javascript設計模式學習筆記之代理模式

代理模式

• 代理模式是爲一個對象提供一個代用品或者佔位符, 以便控制對它的訪問
• 引入代理模式，實際上是爲了實現單一職責的面向對象設計原則。

虛擬代理

• 將一些開銷很大的對象, 延遲到正真須要的時候執行

// 針對大圖 增長loading圖
        // 建立 img
        var myImage = (function () {
            var imgNode = document.createElement('img');

            document.body.appendChild(imgNode);

            return {
                // 直接設置 img 的src
                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.jpg');
                    img.src = src;
                }
            }
        })();

        proxyImage.setSrc('https://xxx.com/realImage.png')

緩存代理

• 能夠爲一些開銷大的運算結果提供暫時的存儲

// 體現了 單一職責原則,
    // 原函數
    var multi = function () {
        var a = 1;
        for (var i = 0, l = arguments.length; i < l; i++) {
            a = a * arguments[i];
        }
        console.log(a);
        return a;
    }

    // 代理函數
    var proxyMulti = (function () {
        var cache = {};
        return function () {
            var args = Array.prototype.join.call(arguments, ',');
            if (args in cache) {
                return cache[args];
            }
            return cache[args] = multi.apply(this, arguments);
        }
    })();

    proxyMulti(1, 2, 3, 4, 5);
    proxyMulti(1, 2, 3, 4, 5);