JS设计模式——代理模式

2018-06-13 admin

1. 介绍

代理模式是一个非常有意义的模式,当客户不方便直接访问一个对象或不满足要求时,提供一个替身对象来控制对这请输入代码个对象的访问。

2. 定义

代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问

3. 意义

减少一个对象承担过多的职责,减少耦合。

4. 代理模式介绍

1. 保护代理

保护代理的作用就是过滤一些请求.在这个例子中很多人都送小红花,但是小红不是所有人的花都收,而是只收35岁以下的人的花,但每次都要去判断显得麻烦,就可以交给代理对象去判断,符合条件的才把花送给小红。

    var Flower=function(){}
    var xiaoming={
        age:23,
        sendFlower:function(target){
            var flower= new Flower()
            target.receiveFlower(flower,this.age)
        }
    }
    var xiaohua={
        age:60,
        sendFlower:function(target){
            var flower= new Flower()
            target.receiveFlower(flower,this.age)
        }
    }
    var proxy={
        receiveFlower(flower,age){
            if(age<=35){
                xiaohong.receiveFlower(flower)
            }
        }
    }
   var xiaohong={
       receiveFlower(flower){
           console.log('i receive a flower')
       }
   }
   xiaoming.sendFlower(proxy)
   xiaohua.sendFlower(proxy)

2. 虚拟代理(重点)

虚拟代理就是把一些开销很大的对象延迟到真正需要它的时候才去创建。在这个例子中虽然设置了src属性,但是会推迟到图片加载完才设置src属性。虚拟代理还可以应用于合并http请求,处理惰性加载应用。

var myImage=(function(){
    var imgNode=document.createElement("img")
    document.body.appendChild(imgNode)
    return{
        setSrc:function(src){
            imgNode.src=src
        }
    }
})()
var proxy=(function(){
    var img=new Image
    img.onload=function(){
        console.log(myImage)
        myImage.setSrc(this.src)
    }
    return{
        setSrc:function(src){
            myImage.setSrc("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528824410335&di=babef45d6ef1591c6b373f62af81de3b&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3Dbf193fc3f8f2b211e47b8d4affb0490e%2Fe824b899a9014c08c1277115097b02087bf4f466.jpg")
            img.src=src
        }
    }
})()
proxy.setSrc("http://img18.3lian.com/d/file/201704/13/3e6a1f173606db1d9041ecb6e492adcb.gif")

3. 缓存代理

缓存代理是把一些开销打的运算结果先储存起来,下次运算如果传递参数与之前一致则返回之前的运算结果,calculate函数只会调用一次。

var calculate=function(){
    var count=1
    for(var i=0,len=arguments.length;i<len;i++){
        count*=arguments[i]
    }
    console.log("result is:",count)
    return count
}
var proxy=(function(){
    var cache={}
    return function(){
        let arg = Array.prototype.join.call(arguments,",")
        if(arg in cache){
            return cache[arg]
        }
        cache[arg]=calculate.apply(this,arguments)
    }

})()
proxy(1,2,3,4)
proxy(1,2,3,4)
缓存代理除了可以用于大开销计算也可用于分页,请求过的页面存储起来。

5. 代理和接口一致性

在上面的例子中可以看到代理对象和实际对象都拥有相同的方法,这有利于后续如果不需要代理了,直接把实际对象换上去就可以了,不需要做过多的修改。

原文链接:https://segmentfault.com/a/1190000015270052

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33919.html

文章标题:JS设计模式——代理模式

相关文章
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
AngularJS vs. jQuery,看看谁更胜一筹
很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别。这两者的之间的比较很微妙,有时就像拿苹果和橘子在作比较,...
2015-11-12
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
ASP.NET 2.0 AJAX应用程序设计
ASP.NET Aiax技术是一种实现异步(Asynchronous)网络应用的技术,它被整合在ASP.NET 2.0之中,是As P.NET的一种扩展技术。通过ASENETAjax技术,开发人员或程序员可以将Web服务器控件和客户端脚本结...
2015-11-14
回到顶部