6代理模式

来源：JavaScript设计模式与开发实践

代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。

虚拟代理：对于一些加载时间较长或占用系统资源较多的对象，可以对这些对象提供一个虚拟代理，在真实对象创建成功之前虚拟代理扮演真实对象的替身，在真实的对象创建之后，虚拟代理将用户请求转发给真实对象。
通常一下两种情况可以考虑使用虚拟代理：
1由于对象本身复杂性或网络等原因导致一个对象需要较长的加载时间，此时可以用一个加载时间相对较短的对象来代表真实对象。通常在实现时可以结合多线程技术，一个线程用于显示代理，其他线程用于加载真实对象，这种虚拟代理模式可以应用在程序启动的时候，由于创建代理在时间和复杂度上要小于创建真实对象，因此在程序启动时可以用代理对象代替真实对象初始化，大大加速系统启动时间，当需要使用真实对象时再通过代理对象引用，而此时真实对象已经加载完毕，可以缩短用户等待时间。
2当一个对象的加载十分耗费系统资源的时候。虚拟代理可以让那些占用大量内存或处理起来非常复杂的对象延迟到使用它们时再创建，在此之前用一个相对占用资源较少的代理对象来代表真实对象，在通过代理来引用真实对象。

6.3虚拟代理实现图片预加载

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

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

6.4代理的意义

单一职责原则：就一个类（通常也包括对象和函数）而言，应该仅有一个引起它变化的原因。如果一个对象承担了多项职责，就意味着它将变得巨大，引起它变化的原因可能有多个。面向对象设计鼓励将行为分布到细粒度的对象之中，如果一个对象职责过多，则相当于把这些职责都耦合到了一起，会导致脆弱和低内聚的设计。当变化发生时，设计可能遭到意外的破坏。职责被定义为引起变化的原因。且在面向对象的程序设计中，大多数情况下，若违反其他任何原则，同时将违反开放-封闭原则。

6.5代理和本体接口的一致性

好处：

• 用户可以放心的请求代理，他只关心能否得到想要的结果。
• 在任何使用本体的地方都可以替换成代理。

在JAVA等语言中，代理和本体都需要显性地实现同一个接口，一方面接口保证了他们会拥有同样的方法，另一方面，面向接口编程迎合依赖倒置原则，通过接口进行向上转型，从而避开编译器的类型检查，代理和本体将来可以替换使用。

而在JS这种动态类型语言中，我们有时候通过鸭子类型来检测代理和本体是否都实现了同一个接口（如setStr方法），另外大多时候甚至根本不做检测，全部依赖程序员的自觉性。另：如果代理和本体全部都为一个函数。函数必然度能被执行，则可认为它们也具有“一致”的接口。

6.6虚拟代理合并HTTP请求

//未合并请求代码    
synchronousFile = function(id) {
        console.log('synchronous' + id);
    }
    var checkList = document.getElementsByTagName('input');
    for (var i = 0, c; c = checkList[i++];) {
        c.onclick = function() {
            if(this.checked == true) {
                synchronousFile(this.id);
            }
        }
    }

当我们选中 3 个 checkbox 的时候，依次往服务器发送了 3 次同步文件的请求。而频繁的网络请求将会带来相当大的开销。
解决方案是通过一个代理函数来收集一段时间内的请求，最后一次性打包给服务器。比如等待2秒之后才把这 2 秒之内需要同步的文件ID打包发给 服务器，如果不是对实时性要求非常高的系统，2 秒的延迟不会带来太大副作用，却能大大减轻服务器的压力。

    synchronousFile = function(id) {
        console.log('synchronous' + id);
    }
    var checkList = document.getElementsByTagName('input');
    for (var i = 0, c; c = checkList[i++];) {
        c.onclick = function() {
            if(this.checked == true) {
                proxySynchronous(this.id);
            }
        }
    }
    proxySynchronous = (function() {

6.7虚拟代理在惰性加载中的应用

  //未执行真正的miniConsole.js之前的代码
    var cache = [];
    var miniConsole ={
        log: function() {
            cache.push(function() {
                miniConsole.log.apply(miniConsole, arguments);
            });
            // 将打印Log的请求都包装在一个函数里，这些函数全部放在缓存队列里。
        }
    };
    miniConsole.log(1);
    //当按下F12时，开始加载真正的miniConsole.js
    var handler = function(ev) {
        if (ev.keyCode === 113) {
            //要注意在F12被重复按下的时候，miniConsole.js只被加载一次
            var script = document.createElement('script');
            script.onload = function() {
                for (var i = 0, fn; fn = cache[i++];) {
                    fn();
                }
            }
            script.src = 'miniConsole.js';
            document.getElementsByTagName('head')[0].appendChild(script);
        }
    };
    document.body.addEventListener('keydown', handler, false);

整理代码使代理对象成为一个标准的虚拟代理。

   var miniConsole = (function() {
        var cache = [];
        var handler = function(ev) {
            if (ev.keyCode === 113) {
                var script = document.createElement('script');
                script.onload = function() {
                    for( var i = 0, fn; fn = cache[i++];) {
                        fn();
                    }
                };
                script.src = 'miniConsole.js';
                document.getElementsByTagName('head')[0].appendChild(script);
                document.body.removeEventListener('keydown', handler);
                //确保miniConsole.js只加载一次
            }
        }
        document.body.addEventListener('keydown',handler, false);

        return {
            log: function() {
                cache.push(function() {
                    miniConsole.log.apply(miniConsole, arguments);
                })
            }
        }
    })();
    miniConsole.log(1);

6.8缓存代理

缓存代理 缓存代理可以为一些花销较大的运算结果提供暂时储存，下次运算时，如果传递进来的参数与之前一致，则可以直接返回之前的运算结果。

6.8.1缓存计算乘积

    var mult = function() {
        var a = 1;
        for (let i = 0; i < arguments.length; i++) {
            a = a * arguments[i];
        }
        return a;
    };
    var proxyMult = (function() {
        var cache = {};
        return function() {
            var arg = Array.prototype.join.call(arguments, ',');
            if (arg in cache) {
                return cache[arg];
            }
            return cache[arg] = mult.apply(this, arguments);
        }
    })();
    console.log(proxyMult(1,2,3));

6.8.2缓存代理用于Ajax异步请求数据

6.9用高阶函数动态创建代理

    var mult = function() {
        var a = 1;
        for (let i = 0; i < arguments.length; i++) {
            a = a * arguments[i];
        }
        return a;
    };
    // 创建缓存代理工厂
    var creatProxyFactory = 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);
        }
    };
    var multProxy = creatProxyFactory(mult);
    multProxy(1,2,3);

6.10其他代理模式

• 防火墙代理：控制网络资源的访问，
• 远程代理：为一个对象在不同的地址空间提供局部代表。
• 保护代理：用于对象应该有不同访问权限的情况。
• 智能引用代理：取代简单的指针，它在访问对象时执行一些附加操作，比如计算一个对象被引用的次数。
• 写时复制代理：通常用于复制一个庞大对象的情况。