服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - JavaScript设计模式学习之代理模式

JavaScript设计模式学习之代理模式

2022-03-10 16:34有梦想的咸鱼前端 js教程

这篇文章主要介绍了JavaScript设计模式学习之代理模式,对设计模式感兴趣的同学,可以参考下

概述

代理模式属于设计模式中结构型的设计模式;

定义:

顾名思义就是为一个对象提供一个代用品或占位符,以便控制对它的访问!

白话解释:

很多明星都是有经纪人的,如果要联系明显进行商演或者开演唱会之类的商业活动通过是需要先跟经纪人取得联系的,跟经纪人谈好了合作事宜之后经纪人再转达给某明星,然后某明星才会去参加活动;同样租房也是一个同样的道理,我们不管是租房还是买房,第一反应肯定是找链家这类的平台,因为我们只需要跟链家进行沟通,而链家去跟房东沟通,省去了我们直接和房东沟通的步骤;因为链家就是一个代理模式,它代理了这个房东的房源;

实现方法

举个例子:

你作为一个追星狂魔,是某明星的忠诚粉丝;刚好某明星近期要过生日了,你准备送上礼物代表你的心意,正常的流程:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
var Fans = {
    flower(){
        star.reception("花");
    }
}
 
var star = {
    reception:function(gift){
        console.log("收到粉丝的:"+gift);
    }
}
 
Fans.flower();   //收到粉丝的:花

你选择了买花寄给她,希望她能感受到你的心意;但是往往理想很丰满,现实很骨感!别忘了还有经纪人,因为签收你的礼物的往往不是明星本人而是经纪人:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var Fans = {
    flower(){
        Agent.reception("花");
    }
}
 
var Agent = {
    reception:function(gift){
        console.log("粉丝送的:"+gift);   //粉丝送的:花
        star.reception("花");
    }
}
var star = {
    reception:function(gift){
        console.log("收到粉丝的:"+gift);
    }
}
 
Fans.flower();    //收到粉丝的:花

这里的经纪人就是一个简单的代理了,粉丝需要先把礼物给经纪人,经纪人再转给明星本人;

保护代理

明星满心欢喜的看到粉丝寄过来的包裹的时候,拆开一看,原来是花!明星很不屑,所以告诉经纪人,以后凡是给我寄花的,通通不要给我了,你自己看着处理:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var Fans = {
    flower(){
        Agent.reception("花");
    }
}
 
var Agent = {
    reception:function(gift){
        console.log("粉丝送的:"+gift);  //粉丝送的:花
        if(gift != "花"){
            star.reception("花");
        }
      
    }
}
var star = {
    reception:function(gift){
        console.log("收到粉丝的:"+gift);
    }
}
 
Fans.flower();

上面的程序中明星根本就没有收到粉丝寄过来的花,因为在经纪人那里就已经拦截处理了;通过经纪人来过滤掉一部分礼物,这种模式叫做保护代理;

虚拟代理

粉丝送花明星收不到,那粉丝就转换一下思路,送点钱自己去买想要的东西吧!于是找到经纪人,给了经纪人一百万现金,让经纪人转达给明星本人;

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function Money(){
    this.total = "一百万现金"
   return this.total;
}
var Fans = {
    flower(){
        Agent.reception();
    }
}
 
var Agent = {
    reception:function(){
        // console.log("粉丝送的:"+gift);
        let money = new Money();
        star.reception(money.total);
      
    }
}
var star = {
    reception:function(gift){
        console.log("收到粉丝的:"+gift);  //收到粉丝的:一百万现金
    }
}
 
Fans.flower();

明星收到了一百万就很开心;这一百万因为不是花,没有被经纪人拦截过滤;所以明星本人就直接收到了,这种模式我们称为虚拟代理模式;

虚拟代理实现图片懒加载

没用代理的时候我们的代码是这样的:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 创建一个本体对象
var myImage = (function(){
  // 创建标签
  var imgNode = document.createElement( 'img' );
  // 添加到页面
  document.body.appendChild( imgNode );
  return {
    // 设置图片的src
    setSrc: function( src ){
      // 更改src
      imgNode.src = src;
    }
  }
})();
 
myImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

虚拟代理

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 创建一个本体对象
var myImage = (function(){
  // 创建标签
  var imgNode = document.createElement( 'img' );
  // 添加到页面
  document.body.appendChild( imgNode );
  return {
    // 设置图片的src
    setSrc: function( src ){
      // 更改src
      imgNode.src = src;
    }
  }
})();
 
// 创建代理对象
var proxyImage = (function(){
  // 创建一个新的img标签
  var img = new Image;
  // img 加载完成事件
  img.onload = function(){
    // 调用 myImage 替换src方法
    myImage.setSrc( this.src );
  }
  return {
    // 代理设置地址
    setSrc: function( src ){
      // 预加载 loading
      myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
      // 赋值正常图片地址
      img.src = src;
    }
  }
})();
 
proxyImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

上面这段代码运用代理模式来实现图片预加载,可以看到通过代理模式巧妙地将创建图片与预加载逻辑分离,并且在未来如果不需要预加载,只要改成请求本体代替请求代理对象就行。

以上就是JavaScript设计模式学习之代理模式的详细内容,更多关于JavaScript设计模式的资料请关注服务器之家其它相关文章!

原文链接:https://www.cnblogs.com/dengyao-blogs/p/11713185.html

延伸 · 阅读

精彩推荐
  • js教程了不起的11个JavaScript代码重构最佳实践小结

    了不起的11个JavaScript代码重构最佳实践小结

    这篇文章主要介绍了了不起的11个JavaScript代码重构最佳实践小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需...

    pikapi3892021-12-29
  • js教程用js控制电灯开关

    用js控制电灯开关

    这篇文章主要为大家详细介绍了用js控制电灯开关,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    小苏(º﹃º )4012022-03-08
  • js教程javascript实现随机抽奖功能

    javascript实现随机抽奖功能

    这篇文章主要为大家详细介绍了javascript实现随机抽奖功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    彴兖7152021-12-23
  • js教程JavaScript实现4位随机验证码的生成

    JavaScript实现4位随机验证码的生成

    这篇文章主要为大家详细介绍了JavaScript实现4位随机验证码的生成,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    weixin_4202683110542022-01-10
  • js教程JavaScript事件概念详解(区分静态注册和动态注册)

    JavaScript事件概念详解(区分静态注册和动态注册)

    这篇文章主要介绍了JavaScript事件(区分静态注册和动态注册)的相关资料,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下...

    皮卡丘和羊宝贝7042022-01-17
  • js教程JavaScript实现鼠标经过表格行给出颜色标识

    JavaScript实现鼠标经过表格行给出颜色标识

    这篇文章主要为大家详细介绍了JavaScript实现鼠标经过表格行给出颜色标识,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参...

    KathyLJQ8702022-02-27
  • js教程确保JavaScript 安全的五大做法

    确保JavaScript 安全的五大做法

    如果你运行交互式网站或应用程序,JavaScript 安全性是重中之重。 从程序错误和不安全的用户输入到恶意攻击,有很多事情可能会出错。...

    粤嵌教育8832022-01-11
  • js教程小程序录音功能实现

    小程序录音功能实现

    这篇文章主要介绍了小程序录音功能实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编...

    爱喝华农学士的程序媛9042022-02-13