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);