Javascript设计模式-06-代理模式

Javascript设计模式 - 06 - 代理模式

简介

代理模式就是为其他对象提供一种代理（代用品或者占位符），以控制对这个对象的访问，代理对象角色内部含有对真实对象的引用，从而可以操作真实对象，同时代理对象提供与真实对象相同的接口，以便在任何时候都能代替真实的对象

代理模式的关键是，当客户不方便直接访问一个对象或者不满足需求时 ，提供一个替身对象来控制这个对象的访问，客户实际上访问的是替身对象，替身对象对请求做一些处理之后，把请求转发给本体对象

分类（保护代理、虚拟代理、缓存代理）

1. 保护代理：就是起到保护作用，一般用来过滤掉一些不必要的请求，将真正需要的递给本体，一般用来控制不通权限的对象对目标对象的访问

    // 创建用户类
    function User(name, role) {
        this.name = name;
        this.role = role;
    }

    User.prototype = {
        getName: function () {
            return this.name;
        },
        getRole: function () {
            return this.role;
        },
        accessHomePage: function () {
            console.log('in home page');
        },
        accessContractPage: function () {
            console.log('in contract page');
        },
        accessLogPage: function () {
            console.log('in log page');
        }
    };

    // 创建代理访问类
    function Proxy(user) {
        this.user = user;
    }
    Proxy.prototype = {
        getUser: function () {
            return this.user;
        },
        accessHomePage: function () {
            return this.user.accessHomePage();
        },
        accessContractPage: function () {
            if (this.user.getRole() === 'developer') {
                console.log('Have no legal power');
                return;
            }
            return this.user.accessContractPage();
        },
        accessLogPage: function () {
            if (this.user.getRole() === 'sales') {
                console.log('Have no legal power');
                return;
            }
            return this.user.accessLogPage();
        }
    }

    // 创建用户
    var sales = new User('xiaoming', 'sales');
    var developer = new User('xiaolan', 'developer');

    // 访问
    var proxySales = new Proxy(sales);
    var proxyDeveloper = new Proxy(developer);

    proxySales.accessContractPage(); // in contract page
    proxyDeveloper.accessContractPage(); // Have no legal power

1. 虚拟代理：可以把开销很大的对象，延迟到真正需要他的时候创建，下边是借用这里的例子

    // 创建图片DOM
    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('../imgs/loading.gif');     // loading
        // 开始缓存比较大的图片，缓存完成后会自动执行 onload 函数
        img.src = src;
      }
    };
    })();

    proxyImage.setSrc('../imgs/xxx.jpg');

1. 缓存代理：为一些开销大的运算结果，或者请求服务器的数据，提供暂时的存储，如果传入的参数一致，则返回存储的数据

    function fb(num) {
        if (num < 1) {
            return 1;
        }
        return num * fb(--num);
    }
    // 缓存代理
    var proxy = (function () {
        var cache = {};
        return function (num) {
            if (cache[num]) {
                console.log(`number ${num} has cached ${cache[num]}`);
                return cache[num];
            }
            cache[num] = fb(num);
            console.log(`new cache ${cache[num]}`);

            return cache[num];
        }
    }())

    proxy(10); // new cache 3628800
    proxy(15); // new cache 1307674368000
    proxy(10); // number 10 has cached 3628800

文章列表

1. javascript设计模式 – 设计原则
2. JavaScript设计模式–高阶函数
3. Javascript 设计模式 - 01 - 原型模式
4. Javascript 设计模式 - 02 - 单例模式
5. Javascript 设计模式 - 03 - 建造者模式
6. Javascript 设计模式 - 04 - 工厂模式
7. Javascript 设计模式 - 05 - 外观模式
8. Javascript 设计模式 - 06 - 代理模式
9. Javascript 设计模式 - 07 - 观察者模式（发布订阅模式）
10. Javascript 设计模式 - 08 - 策略模式
11. Javascript 设计模式 - 09 - 命令模式
12. Javascript 设计模式 - 10 - 迭代器模式
13. Javascript 设计模式 - 11 - 职责链模式
14. Javascript 设计模式 - 12 - 适配器模式
15. Javascript 设计模式 - 13 - 模板方法
16. Javascript 设计模式 - 14 - 组合模式
17. Javascript 设计模式 - 15 - 享元模式
18. Javascript 设计模式 - 16 - 中介者模式
19. Javascript 设计模式 - 17 - 装饰者模式
20. Javascript 设计模式 - 18 - 状态模式