• 24小时服务热线:400-088-1128

当前位置 南顺网络>> 知识拓展

javascript设计模式之代理模式

代理模式是一种对程序对象进行控制性访问的一类解决方案。

引入代理模式,其实是为了实现单一职责的面向对象设计原则。

单一职责其实就是指在一个类中(js中通常指对象和函数等),应仅有一个引起它变化的原因。这样会帮助程序设计具有良好的健壮和高内聚特性,从而当变化发生时,程序设计会尽量少的受到意外破坏。

代理模式有多种方法,保护代理、远程代理、虚拟代理、缓存代理等。

但在javascript中,代理模式最常用到的两种方法是虚拟代理和缓存代理。

虚拟代理

在理解虚拟代理时,可以将其想象为一个经纪人,客户程序需要通过这个虚拟代理(经纪人)来调用本体对象的方法。

虚拟代理示例demo1: 图片loading预加载

//通过虚拟代理实现图片预加载

//代理模式进行图片预加载的实现思路是: 通过代理对象获取实际显示图片地址并进行加载,同时先让本体对象显示预加载图片,待代理对象将实际图片地址加载完毕后传递给本体对象进行显示即可。

//本体对象

var myImage = (function(){

    var imgNode = new Image()

    document.body.appendChild(imgNode)

    return {

        setSrc: function(src){

            imgNode.src = src

        }

    }

})()

//代理对象

var proxyImage = (function(){

    var img = new Image();          //1、代理对象新建一个img对象

    img.onload = function(){        //4、代理对象img加载真实图片src完成后将src传递给本体对象显示

        myImage.setSrc(this.src)

    }

    return {

        setProxySrc: function(src){

            myImage.setSrc('../images/loding.gif')  //2、代理对象控制本体对象使用加载图片src

            img.src = src                   //3、代理对象的img对象获取将要传递给本体对象的真实图片src

        }

    }

})()



//通过代理对象来对本体对象进行访问

proxyImage.setProxySrc('https://p1.ssl.qhimgs1.com/t0153297036f4471d81.jpg')

虚拟代理示例demo2:合并HTTP请求,减少网络请求资源消耗




   

   

   

    代理模式 虚拟代理合并HTTP请求



   

        1

        2

        3

        4

        5

        6

        7

        8

        9

   
    




缓存代理
缓存代理可以为一些开销大的运算结果提供暂时存储,在下次运算时,如果传递进来的参数和之前的一致,则可以直接返回前面存储的结果

缓存代理示例demo: 计算乘积




   

   

   

    代理模式-缓存代理



    *

   

   

   




在编写业务代码时,并不需要一开始就考虑是否使用代理模式,只要当发现使用代理模式更方便时,再编写代理对象即可。

版权声明:本文为CSDN博主「 一期一会」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/qq_34832846/article/details/85988882