Javascript设计模式之——代理模式

cuieney 发布于2019-08-20 17:07 / 852人阅读

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

最近在读《javascript设计模式与开发实践》，在这里把文中的各种设计模式写出来，以便加深记忆，也可以分享给初学者。如果你不了解设计模式，那么强烈推荐你阅读一下这本书，相信它可以颠覆你的编程思维，助你打通任督二脉。

假设有对象A和对象B,代理模式相当于对象C，对对象A进行封装，对象B只需要与对象C进行交流。对象C就是一个替身。简而言之就是用一个对象代表另外一个对象，对应现实生活中的场景就是明星王宝强和经纪人宋喆之间的关系。经纪人可以全权代表明星和客户谈判，最后把谈判结果给明星，明星决定签约与否。

代理模式可以用在图片延迟加载，延迟加载的原理是：先用loading图片替代图片的真实src，创建一个img元素(代理)加载图片的真实src。加载完之后，图片的src替换掉loading。下面就看看代码怎么实现：

myImage = (function(){
    var img = document.createElement("img");
    document.body.appendChild(img);
    return {
        setSrc:function(src){
            img.src = src;
        }
    }
})()
proxyImage = (function(){
    var img = new Image;
    img.onload = function(){
        myImage .setSrc(this.src)
    }
    return {
        setSrc:function(src){
            myImage.setSrc("load.gif");
            img.src = src;
        }
    }
})()
proxyImage.setSrc("http://test.jpg");

代理的意义

也许你会觉得一个小小的延迟加载何必要用到设计模式？不用代理模式的确也可以做到。那么引入代理模式有什么好处呢？下面我们抛开代理模式，用常用的方式实现图片延迟加载：

myImage = (function(){
    var img = document.createElement("img");
    document.body.appendChild(img);
    var imgNode = new Image;
    imgNode.onload = function(){
        img.setSrc(this.src)
    }
    return {
        setSrc:function(src){
            img.setSrc("load.gif");
            imgNode.src = src;
        }
    }
})()
myImage.setSrc("http://test.jpg");

上面的myImage除了负责加载图片以外，还负责延迟加载。将来网速越来越快，如果有一天不需要延迟加载，那么就需要修改myImage函数。这也违反了面向对象设计原则中的——单一职责原则。单一职责原则要求对象只有一个职责(功能)，引起对象变化的原因也只能有一个，如果对象有多个职责，那么这个对象会变得非常大，引起对象变化的原因有多个。单一职责也是为了程序低耦合高内聚。

反观代理模式，myImage只负责加载图片，proxyImage只负责延迟加载，如果以后不需要延迟加载只需要修改调用方式即可。

idc机房托管专线服务 Java设计模式之（五）——代理模式代理模式静态代理模式 javascript设计模式

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

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

100行代码让您学会JavaScript原生的Proxy设计模式

摘要：面向对象设计里的设计模式之代理模式，相信很多朋友已经很熟悉了。代表当前执行方法的实例，即方法调用者。代表具体的方法名称。现在我们再次调用，传入构造器返回的代理对象打印输出，代理逻辑生效了和的一样优雅地实现了代理设计模式。 showImg(https://segmentfault.com/img/remote/1460000016760603);面向对象设计里的设计模式之Proxy（代理...

txgcwm 2019-08-23 12:28 评论0 收藏0
javascript设计模式学习笔记之代理模式

摘要：代理模式代理模式是为一个对象提供一个代用品或者占位符以便控制对它的访问引入代理模式，其实是为了实现单一职责的面向对象设计原则。代理模式代理模式是为一个对象提供一个代用品或者占位符, 以便控制对它的访问引入代理模式，其实是为了实现单一职责的面向对象设计原则。虚拟代理将一些开销很大的对象, 延迟到正真需要的时候执行 // 针对大图增加loading图 ...

big_cat 2019-08-26 13:39 评论0 收藏0
javascript之代理模式

支持原作者，购买地址链接描述概念代理模式代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问。在现实生活中，可以找到很多代理模式使用的场景。明星都有经纪人作为代理。如果请明星来演出，就要先同他的经纪人沟通，谈好相应的细节与报酬。再交给明星。需求：公司(Company)通过经纪人(agent)找明星(start)开演唱会 //演唱会 var Concert = ...

MAX_zuo 2019-08-22 10:42 评论0 收藏0
细谈JavaScript中的一些设计模式

摘要：注意事项声明函数时候处理业务逻辑区分和单例的区别，配合单例实现初始化构造函数大写字母开头推荐注意的成本。简单工厂模式使用一个类通常为单体来生成实例。 @(书籍阅读)[JavaScript, 设计模式] 常见设计模式一直对设计模式不太懂，花了一下午加一晚上的时间，好好的看了看各种设计模式，并总结了一下。设计模式简介设计模式概念解读设计模式的发展与在JavaScript中的应用 ...

30e8336b8229 2019-08-19 17:47 评论0 收藏0
JavaScript设计模式之结构型设计模式

摘要：享元模式通过分析应用程序的对象，将其解析为内在数据和外在数据，减少对象数量，从而提高程序的性能。通过这种方式进行事件绑定，可以减少事件处理程序的数量，这种方式叫做事件委托，也是运用了享元模式的原理。事件处理程序是公用的内在部分，每个菜单项各 github 全文地址： YOU-SHOULD-KNOW-JS JavaScript设计模式之外观模式概念外观模式：为一组复杂子系统接口提...

xiaoqibTn 2019-08-21 18:24 评论0 收藏0