• 售前

  • 售后

热门帖子
入门百科

JavaScript计划模式学习之署理模式

[复制链接]
123457782 显示全部楼层 发表于 2021-10-26 14:11:34 |阅读模式 打印 上一主题 下一主题
目录


  • 概述
  • 实现方法

    • 掩护代理
    • 假造代理
    • 假造代理实现图片懒加载


概述

代理模式属于筹划模式中结构型的筹划模式;
界说:
顾名思义就是为一个对象提供一个代用品或占位符,以便控制对它的访问!
白话解释:
许多明星都是有经纪人的,如果要联系显着举行商演或者开演唱会之类的贸易活动通过是需要先跟经纪人取得联系的,跟经纪人谈好了合作事宜之后经纪人再转达给某明星,然后某明星才会去参加活动;同样租房也是一个同样的原理,我们不管是租房还是买房,第一反应肯定是找链家这类的平台,因为我们只需要跟链家举行沟通,而链家去跟房东沟通,省去了我们直接和房东沟通的步调;因为链家就是一个代理模式,它代理了这个房东的房源;

实现方法

举个例子:
你作为一个追星狂魔,是某明星的忠诚粉丝;刚好某明星近期要过生日了,你预备送上礼物代表你的心意,正常的流程:
  1. var Fans = {
  2.     flower(){
  3.         star.reception("花");
  4.     }
  5. }
  6. var star = {
  7.     reception:function(gift){
  8.         console.log("收到粉丝的:"+gift);
  9.     }
  10. }
  11. Fans.flower();   //收到粉丝的:花
复制代码
你选择了买花寄给她,盼望她能感受到你的心意;但是通常抱负很丰满,现实很骨感!别忘了另有经纪人,因为签收你的礼物的通常不是明星本人而是经纪人:
  1. var Fans = {
  2.     flower(){
  3.         Agent.reception("花");
  4.     }
  5. }
  6. var Agent = {
  7.     reception:function(gift){
  8.         console.log("粉丝送的:"+gift);   //粉丝送的:花
  9.         star.reception("花");
  10.     }
  11. }
  12. var star = {
  13.     reception:function(gift){
  14.         console.log("收到粉丝的:"+gift);
  15.     }
  16. }
  17. Fans.flower();    //收到粉丝的:花
复制代码
这里的经纪人就是一个简单的代理了,粉丝需要先把礼物给经纪人,经纪人再转给明星本人;

掩护代理

明星满心欢喜的看到粉丝寄过来的包裹的时间,拆开一看,原来是花!明星很不屑,所以告诉经纪人,以后凡是给我寄花的,通通不要给我了,你本身看着处理:
  1. var Fans = {
  2.     flower(){
  3.         Agent.reception("花");
  4.     }
  5. }
  6. var Agent = {
  7.     reception:function(gift){
  8.         console.log("粉丝送的:"+gift);  //粉丝送的:花
  9.         if(gift != "花"){
  10.             star.reception("花");
  11.         }
  12.       
  13.     }
  14. }
  15. var star = {
  16.     reception:function(gift){
  17.         console.log("收到粉丝的:"+gift);
  18.     }
  19. }
  20. Fans.flower();
复制代码
上面的程序中明星根本就没有收到粉丝寄过来的花,因为在经纪人那里就已经拦截处理了;通过经纪人来过滤掉一部分礼物,这种模式叫做掩护代理;

假造代理

粉丝送花明星收不到,那粉丝就转换一下思绪,送点钱本身去买想要的东西吧!于是找到经纪人,给了经纪人一百万现金,让经纪人转达给明星本人;
  1. function Money(){
  2.     this.total = "一百万现金"
  3.    return this.total;
  4. }
  5. var Fans = {
  6.     flower(){
  7.         Agent.reception();
  8.     }
  9. }
  10. var Agent = {
  11.     reception:function(){
  12.         // console.log("粉丝送的:"+gift);
  13.         let money = new Money();
  14.         star.reception(money.total);
  15.       
  16.     }
  17. }
  18. var star = {
  19.     reception:function(gift){
  20.         console.log("收到粉丝的:"+gift);  //收到粉丝的:一百万现金
  21.     }
  22. }
  23. Fans.flower();
复制代码
明星收到了一百万就很开心;这一百万因为不是花,没有被经纪人拦截过滤;所以明星本人就直接收到了,这种模式我们称为假造代理模式;

假造代理实现图片懒加载

没用代理的时间我们的代码是这样的:
  1. // 创建一个本体对象
  2. var myImage = (function(){
  3.   // 创建标签
  4.   var imgNode = document.createElement( 'img' );
  5.   // 添加到页面
  6.   document.body.appendChild( imgNode );
  7.   return {
  8.     // 设置图片的src
  9.     setSrc: function( src ){
  10.       // 更改src
  11.       imgNode.src = src;
  12.     }
  13.   }
  14. })();
  15. myImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );
复制代码
假造代理
  1. // 创建一个本体对象
  2. var myImage = (function(){
  3.   // 创建标签
  4.   var imgNode = document.createElement( 'img' );
  5.   // 添加到页面
  6.   document.body.appendChild( imgNode );
  7.   return {
  8.     // 设置图片的src
  9.     setSrc: function( src ){
  10.       // 更改src
  11.       imgNode.src = src;
  12.     }
  13.   }
  14. })();
  15. // 创建代理对象
  16. var proxyImage = (function(){
  17.   // 创建一个新的img标签
  18.   var img = new Image;
  19.   // img 加载完成事件
  20.   img.onload = function(){
  21.     // 调用 myImage 替换src方法
  22.     myImage.setSrc( this.src );
  23.   }
  24.   return {
  25.     // 代理设置地址
  26.     setSrc: function( src ){
  27.       // 预加载 loading
  28.       myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
  29.       // 赋值正常图片地址
  30.       img.src = src;
  31.     }
  32.   }
  33. })();
  34. proxyImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );
复制代码
上面这段代码运用代理模式来实现图片预加载,可以看到通过代理模式奇妙地将创建图片与预加载逻辑分离,并且在未来如果不需要预加载,只要改成请求本体取代请求代理对象就行。
以上就是JavaScript筹划模式学习之代理模式的具体内容,更多关于JavaScript筹划模式的资料请关注脚本之家别的干系文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作