博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript之代理模式
阅读量:5946 次
发布时间:2019-06-19

本文共 4403 字,大约阅读时间需要 14 分钟。

hot3.png

 上一篇<<>>

代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问代理模式的用处(个人理解):为了保障当前对象的单一职责(相对独立性),而需要创建另一个对象来处理调用当前对象之前的一些逻辑以提高代码的效率、状态判断等。代理模式中最常用的是虚拟代理和缓存代理

在现实生活中,可以找到很多代理模式使用的场景。明星都有经纪人作为代理。如果请明星来演出,就要先同他的经纪人沟通,谈好相应的细节与报酬。再交给明星。

需求:公司(Company)通过经纪人(agent)找明星(start)开演唱会

//演唱会var Concert = function(){}//公司var Company = {    askforconcert: function(target){       var concert = new Concert();       target.openconcert(concert )    }}//明星var star = {    openconcert: function(concert){         console.log("明星同意开一场演唱会")    }}//经纪人代理var agent = {    openconcert: function(concert){        star.openconcert(concert)    }}//执行Company.askforconcert(agent);  //=>明星同意开一场演唱会/*这样 company直接把请求发给agent,agent再转给star,这样就完成了一个简单的代理模式(compan=>agent=>star)*///经济人可以帮助 明星过滤掉一些请求,比如 钱不够多或者场地不够好,这种请求可以直接在经纪人出被过滤拒绝掉。//这种代理就叫做保护代理。 //由经纪人Agent来控制对明星star的访问。

一.虚拟代理

- 如果A 通过 B 送花给C,我们可以在A的时候new 一个 flower传递给代理B,再由B决定什么时候或者是否要再转交个最终的target C。new Flower这个操作可以交给B,B决定可以送花给C的时候再由B做 new Flower的操作。这种模式就叫做虚拟代理。虚拟代理把一些开销很大的对象,延迟到真正需要它的时候才去创建

var Flower = function(){    this.price = 150}var a = {  sendflower: function(target){        var flower = new Flower()        target.receiveFlower(flower )    }}var b = {    receiveFlower: function(flower){        if(flower.price < 100){          console.log("太便宜了,女神表示一脸嫌弃")          return false        }else{            c.receiveFlower(flower)        }    },            }var c = {    receiveFlower: function(){        console.log("接受了鲜花")    }}

1.实现图片预加载

//不使用代理var  preLoadImage = (function(){    var imgNode = document.createElement('img');    document.body.append(imgNode)    var img = new Image();    img.onload = function(){      imgNode.src = img.src    }    return {        setSrc: function(src){            imgNode.src = "loading.gif";            img.src = src;        }    }})()
//使用代理模式的实现方式var image = (function(){    var imgNode = document.createElement('img');    document.body.append(imgNode);    return {        setSrc: function(src){            imgNode.src = src;        }    }})()//代理var proxyImage = (function(){    var img = new Image();    img.onload = function(){// 图片加载完成,正式加载图片        image.setSrc = img.src;    }    return {        setSrc: function(src){            image.setSrc = "loading.gif";            img.src = src;        }    }})

单一职责原则

单一职责指的是,对一个类而言,应该仅有一个引起他变化的原因。如果一个对象承担了多个原则,就意味着这个对象将变得巨大,引起他变化的原因可能也会有多个。面向对象设计鼓励将行为分不到细粒度的对象之中,如果一个对象承担的职责过多,等于把这些值得耦合到了一起,这种耦合会导致脆弱和低内聚的设计。当变化发生时,设计可能会遭到意外的破坏。(书中93页)

preLoadImage方法,承担了添加img标签,还有预加载两个功能,代码耦合到了一起,当我修改添加标签时,可能会影响到另一部分功能。

而用代理方法重构后,image方法只负责创建标签,设置src,预加载功能交给了proxyImage,解除了耦合的代码,两个功能互不干扰。

2.虚拟代理合并http请求

var syncFile = function(id){    $.ajax({        data: {            id: id        }    })...}//绑定事件for(var i = 0;i

这里有个很严重的问题,每点一个都会发送一个ajax请求,性能上,这是一个很大的开销

  • 需求: 文件同步穿,选中的文件会被上传到服务器上,解决方法,我们可以 通过一个代理函数,来收集一段时间内的请求,将请求的参数缓存起来,与后端人员协商将选中的id作为一个数组传到后台保存。

var syncFile = function(ids){    $.ajax({        data: {            id: ids        }    })...}var proxyFile = (function(){    var cache = [],        timer = null;    return function(id){        cache.push(id);        if(timer){            return        }        timer = setTimeout(function(){            syncFile(cache.join(","))            clearTimeout(timer);            timer = null;            cache = [];        },2000)    }})()//绑定事件for(var i = 0;i

这样,有选中操作的话,不会频繁触发请求。

二.缓存代理

缓存代理可以为一些开销大的运算结果提供暂时的存储,在下次运算时,如果传递进来的参数跟之前一致,则可以返回前面的运算结果。  示例: 为乘法、加法等创建缓存代理
// 计算乘积var mult = function(){    var a = 1;    for( var i = 0, l = arguments.length; i < l; i++){        a = a * arguments[i];    }    return a;};// 计算加和var plus = function () {  var a = 0;    for( var i = 0, l = arguments.length; i < l; i++ ){        a += arguments[i];    }    return a;};// 创建缓存代理的工厂var createProxyFactory = function( fn ){    var cache = {}; // 缓存 - 存放参数和计算后的值    return function(){        var args = Array.prototype.join.call(arguments, "-");        if( args in cache ){ // 判断出入的参数是否被计算过            console.log( "使用缓存代理" );            return cache[args];        }        return cache[args] = fn.apply( this, arguments );    }};// 创建代理var proxyMult = createProxyFactory( mult ),    proxyPlus = createProxyFactory( plus );console.log( proxyMult( 1, 2, 3, 4 ) ); // 输出: 24console.log( proxyMult( 1, 2, 3, 4 ) ); // 输出: 缓存代理 24console.log( proxyPlus( 1, 2, 3, 4 ) ); // 输出: 10console.log( proxyPlus( 1, 2, 3, 4 ) ); // 输出: 缓存代理 10

实际中

110034_vLcr_3703858.jpg

 

 

转载于:https://my.oschina.net/u/3703858/blog/1629429

你可能感兴趣的文章
Android onclicklistener中使用外部类变量时为什么需要final修饰【转】
查看>>
django中聚合aggregate和annotate GROUP BY的使用方法
查看>>
TFS简介
查看>>
docker管理平台 shipyard安装
查看>>
安装django
查看>>
Bootstrap3 栅格系统-简介
查看>>
ADODB类库操作查询数据表
查看>>
【java】File的使用:将字符串写出到本地文件,大小0kb的原因
查看>>
安卓音乐播放器开发实例
查看>>
some requirement checks failed
查看>>
存储管理
查看>>
HDU-2089-不要62
查看>>
Latex学习笔记0
查看>>
css控制div强制换行
查看>>
ios 底部用定位 fixed。在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去。解决方法...
查看>>
HDU1257题解
查看>>
Iterator
查看>>
Spring MVC整合Velocity
查看>>
fiddler+android抓包工具配置使用
查看>>
Spring Data JPA 复杂/多条件组合分页查询
查看>>