设计模式之代理模式

zr_hebo 发布于2019-08-21 17:45 / 2466人阅读

摘要：要解决的问题代理模式主要解决的问题是将复杂的操作逻辑隐藏起来，让方法的使用者只使用几个固定的和类方法就可以简单的实现一些功能。可以看出代理模式是将复杂的逻辑一步一步的封装到每个类中，而且每个类都有自己唯一的职责。

要解决的问题

代理模式主要解决的问题是将复杂的操作逻辑隐藏起来，让方法的使用者只使用几个固定的set和get类方法就可以简单的实现一些功能。而且代码还不失扩展性和维护性。

能解决的常见问题

图片预加载

一般网页上显示图片如果直接img标签中写上src，在用户访问网页时可能因为网速的原因，会显示一大片空白的区域，这样容易引起不明真相的用户的困惑。所以目前一般的网站都会有图片预加载机制，也就是在真正的图片在被加载完成之前用一张菊花图（转圈的gif图片）表示正在加载图片。


    这是一张图片标题

TS代码

/* 生成一张图片 */
class myImg{
    imgNode = document.createElement("img");
    constructor(where:HTMLElement){
        this.appendTo(where);
    };
    private appendTo(where:any){
        where.appendChild(this.imgNode);
    }
    setSrc( src:string ){
        this.imgNode.src = src;
    }
}
/* 封装一个类嗲用前一个类，等待网络图片加载完成之前先设置一张loading菊花图，加载完成后将图片换成该显示的图片 */
class PreloadImg extends myImg{
    img = new Image;
    constructor( where: HTMLElement){
        super(where);
    }
    setSrc(src:string){
        super.setSrc("loading.gif")
        this.img.src = src;
        this.img.onload = ()=>{
            super.setSrc(src);
        }
    }
}

/*循环调用前一个类，插入图片的显示列表*/
class LoadImgList extends PreloadImg{
    constructor(list:string[],place:HTMLElement){
        super(place);
        list.map((item)=>{
            super.setSrc(item);            
        })
    }
}

/*  Test  */
let place = document.getElementsByTagName("div")[0];
let list = [
    "图片链接1",
    "图片链接2",
    "图片链接3",
];
new LoadImgList(list,place); //插入显示图片列表

可以看出上面的代码实现的两层的代理，符合单一职责的原则
1.myImg类的作用是在指定的位置插入一张图片，并有setSrc的方法用来为图片设置路径。
2.PreloadImg类继承了myImg，作用是用来在加载图片的过程中先显示一张占位的loading菊花图，而在图片加载完毕后将占位菊花图换成加载下来的图片。
3.LoadImgList类继承了PreloadImg类，作用是用来将图片队数组中的图片链接自动的加载到图片要插入的地方。
4.可以看出代理模式是将复杂的逻辑一步一步的封装到每个类中，而且每个类都有自己唯一的职责。而用户只要使用最后的LoadImgList类不用理会背后的逻辑就可以使用图片预加载功能。同时代码也具有可扩展性和相对好的可维护性。

缓存计算结果

/* 用到了 单例模式 和 代理模式：用代理模式实现单例模式实现计算的缓存*/

/*负责计算相乘的结果*/
class Mult{
    protected getResult(...args){
        console.log("开始计算");
        return args.reduce((x,y)=>{
            return x*y;
        });
    }
}

/*代理Mult类，缓存计算的内容*/
class CacheMult extends Mult{
    cache:object = {};
    constructor(){
        super();
    }
    getResult(...args){
        let sorted_args = args.sort((n1,n2)=>n1-n2);
        let key = sorted_args.join(",")
        if ( key in this.cache ){  //如果结果已经计算过了，就返回缓存过的结果
            return this.cache[key];
        }else{
            let result = super.getResult(...args);  //调用父类得到计算结果
            this.cache[ key ] = result; //缓存结果到缓存中
            return result;
        }
    }
}

let mult = new CacheMult();
let r1 = mult.getResult(1,2,3,4);
let r2 = mult.getResult(1,2,3,4);
let r3 = mult.getResult(1,2,3);
console.log(r1);
console.log(r2);
console.log(r3);
/* 运行结果 */
// 开始计算
// 开始计算
// 24
// 24
// 6

从上面的代码中可以看出，CacheMult类代理了Mult类来事项缓存计算结果的功能，防止出现重复计算，这样可以再某一些计算密集型的场景下有效的节省计算资源，提高代码的性能。

云服务器 GPU云服务器 Java设计模式之（五）——代理模式代理模式静态代理模式 java代理模式用处

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89959.html

PHP设计模式之代理模式

摘要：虚拟代理如果需要创建一个资源消耗较大的对象，先创建一个消耗相对较小的对象来表示，真实对象只在需要时才会被真正创建。虚拟代理通过使用一个小对象来代表一个大对象，可以减少系统资源的消耗，对系统进行优化并提高运行速度。概念代理模式(Proxy Pattern) ：一种对象结构型模式。给某一个对象提供一个代理，并由代理对象控制对原对象的引用。 UML showImg(https://seg...

zhisheng 2019-06-27 14:52 评论0 收藏0
设计模式之代理模式

摘要：代理模式的定义来源于百度百科为其他对象提供一种代理以控制对这个对象的访问。二来源大话设计模式三例子实现现在根据上面购票代理的场景来实现例子接口，定义真实火车站，还有代理提供的服务。一、定义在网络不发达之前，我们买火车票，通常都需要跑到火车站去买。这对于我们来说可能有些麻烦，偶然有一天，你发现你楼下有一家便利店居然能买火车票，这就方便很多。其实啊，便利店并不提供火车服务，也没有权...

enda 2019-05-27 17:41 评论0 收藏0
Spring框架之我见（二）——代理模式

摘要：聊完了工厂模式，下面我们来说框架中的另一个核心设计模式代理模式。这里的外卖小哥就相当于是我们的代理。主要分为代理和代理。聊完了工厂模式，下面我们来说Spring框架中的另一个核心设计模式——代理模式（Proxy Pattern）。代理模式大家可以先不用看概念，先举个吃饭的例子：比如说我们想吃饭，我们可以选择自己做饭吃、去饭店吃、叫外卖吃。如果我们选择自己做着吃，我们就需要去买菜、...

oneasp 2019-08-15 13:35 评论0 收藏0
设计模式之代理模式

摘要：虚拟代理虚拟代理把一些开销很大的对象，延迟到真正需要它的时候才去创建。主要参考设计模式与开发实践设计模式在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。这是在《设计模式》一书中对设计模式的定义。在软件开发过程中，我们可能会遇到过这样的情况，我们现在发现一个问题，和以前的某个问题很相似，几乎可以用统一套解决方案，而且我们还发现，在某个条件下，这个解决方案几乎就是通用的，...

Gilbertat 2019-08-19 18:10 评论0 收藏0
Javascript设计模式之——代理模式

摘要：最近在读设计模式与开发实践，在这里把文中的各种设计模式写出来，以便加深记忆，也可以分享给初学者。经纪人可以全权代表明星和客户谈判，最后把谈判结果给明星，明星决定签约与否。这也违反了面向对象设计原则中的单一职责原则。最近在读《javascript设计模式与开发实践》，在这里把文中的各种设计模式写出来，以便加深记忆，也可以分享给初学者。如果你不了解设计模式，那么强烈推荐你阅读一下这本书，...

cuieney 2019-08-20 17:07 评论0 收藏0
JS设计模式之代理模式

摘要：什么是代理模式代理模式，类似于明星的经纪人，想要拜访明星，需要先通过经纪人的沟通。不同于装饰器，那种动态加载一个对象，可以说在代理模式当中，代理是早已既定的。又称单一功能原则，面向对象五个基本原则之一。什么是代理模式代理模式，类似于明星的经纪人，想要拜访明星，需要先通过经纪人的沟通。而在JS当中，如果想访问一个类，需要通过另一个类来间接访问。不同于装饰器，那种动态加载一个对象，可...

widuu 2019-08-22 11:04 评论0 收藏0