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

来源：互联网发布：手机魔术卡软件编辑：程序博客网时间：2024/05/20 22:00

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

文章列表

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

阅读全文

0 0