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

最新推荐文章于 2017-08-25 12:16:05 发布

mjzhang1993

最新推荐文章于 2017-08-25 12:16:05 发布

阅读量483

点赞数 1

分类专栏： javascript设计模式文章标签： javascript 设计模式代理模式对象

本文链接：https://blog.csdn.net/mjzhang1993/article/details/74966541

版权

javascript设计模式专栏收录该内容

20 篇文章 1 订阅

订阅专栏

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

简介

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

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

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

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

    // 创建用户类
    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

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

    // 创建图片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');

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

    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

文章列表

mjzhang1993

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Javascript设计模式-06-代理模式

Javascript设计模式 - 06 - 代理模式简介代理模式就是为其他对象提供一种代理（代用品或者占位符），以控制对这个对象的访问，代理对象角色内部含有对真实对象的引用，从而可以操作真实对象，同时代理对象提供与真实对象相同的接口，以便在任何时候都能代替真实的对象分类（保护代理、虚拟代理、缓存代理）保护代理：就是起到保护作用，一般用来过滤掉一些不必要的请求，将真正需要的递给本体
复制链接

扫一扫