JavaScript设计模式之代理模式详解

2024-09-28 08:03:41

代理模式是非常常见的模式，比如我们使用的VPN工具，明星的经纪人，都是代理模式的例子。但是，有人会疑问，明明可以直接访问对象，为什么中间还要加一个壳呢？这也就说到了代理模式的好处。在我看来，代理模式最大的好处，就是在不动原有对象的同时，可以给原有对象增加一些新的特性或者行为。

/**
 * pre:代理模式
 * 小明追求A，B是A的好朋友,小明比较腼腆，不好意思直接将花交给A，
 * 于是小明将花交给B，再由B交给A.
 */
//----------- 示例1 ---------
// 不使用代理
var Flower = function() {};
var xiaoming = {
  sendFlower: function(target) {
    var flower = new Flower();
    target.receiveFlower(flower);
  }
};
var A = {
  receiveFlower: function(flower) {
    console.log("收到花：" + flower);
  }
};
xiaoming.sendFlower(A);

// ----------- 示例2 --------------
// 使用代理1
var Flower = function() {};
var xiaoming = {
  sendFlower: function(target) {
    var flower = new Flower();
    B.receiveFlower(flower);
  }
};
var B = {
  receiveFlower: function(flower) {
    A.receiveFlower(flower);
  }
};
var A = {
  receiveFlower: function(flower) {
    console.log("收到花：" + flower);
  }
};
xiaoming.sendFlower(B);

//------------- 示例3 ---------------
/*
 * 使用代理2
 * 从示例1和示例2，看不出使用代理有什么用处，B只不过是从中间转手了一次。
 * 接下来，我们想一下。给喜欢的人送花，怎样才能提高成功率呢？
 * 我们都知道，人有心情好和心情差的时候，当美女心情好的时候，送花成功的概率自然要大些。
 * 于是，我们将代理升级，监听美女的心情，心情好的时候再给她送花。
 * 为了演示，我们假设2秒后，A的心情变好。
 */

var Flower = function() {};
var xiaoming = {
  sendFlower: function(target) {
    var flower = new Flower();
    B.receiveFlower(flower);
  }
};
var B = {
  receiveFlower: function(flower) {
    A.listenGoodMood(function() {
      A.receiveFlower(flower);
    });
  }
};
var A = {
  receiveFlower: function(flower) {
    console.log("收到花：" + flower);
  },
  listenGoodMood: function(fn) {
    setTimeout(function() {
      fn.apply(this, arguments);
    }, 2000);
  }
};
xiaoming.sendFlower(B);
// ---------- 示例4 ---------------
/*
 * 【代理模式用处】：虚拟代理
 * 这里以加载图片为例，我们都知道当网络不畅以及图片过大时，图片加载都比较慢，
 * 为了更好的用户体验，我们都会在原图片未加载完成前，加上loading图片。
 * */
//--4 _01未使用代理--
var myImage = (function() {
  var imgNode = document.createElement("img");
  document.body.appendChild(imgNode);
  return {
    setSrc: function(src) {
      this.imgNode.src = src;
    }
  }
})();
myImage.setSrc("xxx");
//--4_02使用代理--
var proxyMyImage = (function() {
  var img = new Image();
  img.onload = function() {
    myImage.setSrc(this.src);
  };
  return {
    setSrc: function(src) {
      myImage.setSrc("loading.jpg");
      img.src = src;
    }
  }
})();
proxyMyImage.setSrc("xxx");
/*
 * [注]：这里可以看到代理模式的好处：在不改变原有接口的同时，可以为系统添加新的行为。
 */
//--------- 示例5---------------
/*
 * 【代理模式用处】：合并http请求
 * 这里以选择文件同步为例。
 * 以往用户同步文件，在用户选中的时候就触发，这种方法做到了实时性，但无疑增加了网络的开销。
 * 实际在使用的过程中，往往并不需要立刻就同步。
 * 以下通过代理模式，将在用户选中文件2秒后进行同步请求。
 * */
// --- 包含一段html代码，请自行添加到一个文件中 ------
<html>
  <body>
    <button id="input">点我上传</button>
    <input type="checkbox" id="1"></input>1
    <input type="checkbox" id="2"></input>2
    <input type="checkbox" id="3"></input>3
    <input type="checkbox" id="4"></input>4
    <input type="checkbox" id="5"></input>5
    <input type="checkbox" id="6"></input>6
    <input type="checkbox" id="7"></input>7
    <input type="checkbox" id="8"></input>8
    <input type="checkbox" id="9"></input>9
  </body>
</html>
// -- 上传文件 --
var synchronizeFile = function(id) {
  console.log("开始同步文件：" + id);
};
var proxySynchronizeFiles = (function() {
  var fileCache = [],
    timer;
  return function(id) {
    fileCache.push(id);
    if(timer) {
      return;
    }
    timer = setTimeout(function() {
      synchronizeFile(fileCache.join(","));
      clearTimeout(timer);
      timer = null;
      checkArr.length = 0;
    }, 2000);
  }
})();
var checkArr = document.getElementsByTagName("input");
for(var i = 0, c; c = checkArr[i++];) {
  c.onclick = function() {
    if(this.checked == true) {
      proxySynchronizeFiles(this.id);
    }
  }
}
// ------------ 示例6 -----------------
/*
 * 【代理模式用处】：缓存代理
 * 以计算器为例，比如计算某些数的乘积，当参数重复时，我们希望不用重复计算，直接返回结果。
 * 以下用到代理模式做缓存。
 */
var mult = function() {
  if(!arguments) {
    console.log("请输入参数");
    return;
  }
  var a = 1;
  for(var i = 0, b; b = arguments[i++];) {
    a = a * b;
  }
  return a;
};

var proxyMult = (function() {
  var cache = {};
  return function() {
    var str = Array.prototype.join.call(arguments, ",");
    if(str in cache) {
      console.log("重复return.");
      return cache[str];
    }
    return cache[str] = mult.apply(this, arguments);
  }
})();

console.log(proxyMult(2, 3, 4));
console.log(proxyMult(2, 3, 4));
//------------ 示例7 --------------
/*
 * 缓存代理升级 - 通用版计算
 *
 */
var mult = function() {
  if(!arguments) {
    return;
  }
  var t = 1;
  for(var i = 0, a; a = arguments[i++];) {
    t = t * a;
  }
  return t;
};
var plus = function() {
  if(!arguments) {
    return;
  }
  var t = 0;
  for(var a of arguments) {
    t += a;
  }
  return t;
};
var createProxyCaculate = function(fn) {
  var cache = {};
  return function() {
    var str = Array.prototype.join.call(arguments, ",");
    if(str in cache) {
      console.log("重复return" + str);
      return cache[str];
    }
    return cache[str] = fn.apply(this, arguments);
  }
};
var proxyMult = createProxyCaculate(mult);
var proxyPlus = createProxyCaculate(plus);
console.log(proxyMult(2, 3, 4));
console.log(proxyMult(2, 3, 4));

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

学习JavaScript设计模式(代理模式)

代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问代理模式的用处(个人理解):为了保障当前对象的单一职责(相对独立性),而需要创建另一个对象来处理调用当前对象之前的一些逻辑以提高代码的效率.状态判断等. 代理模式中最常用的是虚拟代理和缓存代理一.虚拟代理虚拟代理是把一些开销很大的对象,延迟到真正需要它的时候才去创建执行示例: 虚拟代理实现图片预加载 // 图片加载函数 var myImage = (function(){ var imgNode = document.crea
JavaScript的设计模式经典之代理模式

一.代理模式概念说明:顾名思义就是用一个类来代替另一个类来执行方法功能,这个模式跟装饰模式有点相似,不一样的是,代理模式是代替客户初始化被代理对象类,而装饰模式采用接口或初装饰者参数引用的方式来执行的. 解释:房屋中介,可以代理帮助卖家把房子卖给买家,这中间卖家说要卖的价钱就可以了,买家也可以提出自己要买的房型,中介可以帮忙处理中间环节.最后达成买卖.中介可以同时代理很多房屋买卖,并且可以代理租房事宜. 二.代理模式的作用和注意事项模式作用: 1.远程代理(一个对象将不同空间的对象进行局部
JavaScript设计模式之代理模式介绍

代理模式说明说明:顾名思义就是用一个类来代替另一个类来执行方法功能,这个模式跟装饰模式有点相似,不一样的是,代理模式是代替客户初始化被代理对象类,而装饰模式采用接口或初装饰者参数引用的方式来执行的. 在动态面向对象语言里,代理模式即起到控制修饰被代理类的作用,也对被代理类起到了充分的隐藏保护作用:被代理类只到我们需要时,才被间接初始化调用: 场景描述: 很常见到的就是租房子的例子,房客要租房子,房东要把房子租出去,但是房客跟房东都没怎么有空找房子或在家等着有人看房子,就一同去找房屋中介.房东把
深入理解JavaScript系列（31）：设计模式之代理模式详解

介绍代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问. 代理模式使得代理对象控制具体对象的引用.代理几乎可以是任何对象:文件,资源,内存中的对象,或者是一些难以复制的东西. 正文我们来举一个简单的例子,假如dudu要送酸奶小妹玫瑰花,却不知道她的联系方式或者不好意思,想委托大叔去送这些玫瑰,那大叔就是个代理(其实挺好的,可以扣几朵给媳妇),那我们如何来做呢? 复制代码代码如下: // 先声明美女对象 var
轻松掌握JavaScript代理模式

在面向对象设计中,有一个单一职责原则,指就一个类(对象.函数)而言,应该仅有一个引起它变化的原因.如果一个对象承担了过多的职责,就意味着它将变得巨大,引起它变化的原因就多,它把这些职责耦合到了一起,这种耦合会导致程序难于维护和重构. 这时候,我们可以把该对象(本体)的其中一部分职责分离出来给一些第三方对象去做,本体只管自己的一些核心职责,这些第三方对象就称作代理.代理对象可以作为对象(也叫"真正的主体")的保护者,让真正的主体对象做尽量少的工作.在代理设计模式中,一个对象充当了另一个对
学习JavaScript设计模式之代理模式

明星都有经纪人作为代理.如果请明星办一场商演,只能联系其经纪人,经纪人会把商演的细节和报酬谈好,再把合同交给明星签. 一.定义代理模式:为一个对象提供一个代用品或占位符,以便控制对它的访问. 代理分为:保护代理和虚拟代理保护代理:用于控制不同权限的对象对目标对象的访问,在JavaScript中很难判断谁访问了某个对象,所以保护代理很难实现. 二.图片预加载(最常见的虚拟代理应用场景) 图片预加载是一种常用技术,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的位置往
JavaScript设计模式之代理模式详解

代理模式是非常常见的模式,比如我们使用的VPN工具,明星的经纪人,都是代理模式的例子.但是,有人会疑问,明明可以直接访问对象,为什么中间还要加一个壳呢?这也就说到了代理模式的好处.在我看来,代理模式最大的好处,就是在不动原有对象的同时,可以给原有对象增加一些新的特性或者行为. /** * pre:代理模式 * 小明追求A,B是A的好朋友,小明比较腼腆,不好意思直接将花交给A, * 于是小明将花交给B,再由B交给A. */ //----------- 示例1 --------- // 不使用代理
Java设计模式之代理模式详解

一.代理模式代理模式就是有一个张三,别人都没有办法找到他,只有他的秘书可以找到他.那其他人想和张三交互,只能通过他的秘书来进行转达交互.这个秘书就是代理者,他代理张三. 再看看另一个例子:卖房子卖房子的步骤: 1.找买家 2.谈价钱 3.签合同 4.和房产局签订一些乱七八糟转让协议一般卖家只在签合同的时候可能出面一下,其他的1,2,4都由中介去做.那你问这样有什么用呢? 首先,一个中介可以代理多个卖房子的卖家,其次,我们可以在不修改卖家的代码的情况下,给他实现房子加价.打广告等等夹带私货的
JavaScript设计模式之策略模式详解

在程序设计中,我们也常常遇到这种情况,要实现某一个功能我们有很多种算法可以实现. 这些算法灵活多样,而且可以随意互相替换.这种解决方案就是所谓的策略模式. 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. /* * pre:策略模式 * 示例:公司计算奖金,分A.B.C 三种绩效,计算方式如下 * 绩效为A,奖金乘以系数5 * 绩效为B,奖金乘以系数4 * 绩效为C,奖金乘以系数3 */ //-------- 示例1 ---------- var calcula
javascript设计模式之解释器模式详解

神马是"解释器模式"? 先翻开<GOF>看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如何创建一个抽象语法树.它不涉及语法分析.抽象语法树可用一个表驱动的语法分析程序来完成,也可用手写的(通常为递归下降法)语法分析程序创建,或直接client提供. 解析器: 指的是把描述客户端调用要求的表达式,经过解析,形成一个抽象语法树的程序. 解
JavaScript 设计模式中的代理模式详解

前言: 代理模式,代理(proxy)是一个对象,它可以用来控制对另一个对象的访问. 现在页面上有一个香港回归最想听的金典曲目列表: <ul id="container"> <li>我的中国心</li> <li>东方之珠</li> <li>香港别来无恙</li> <li>偏偏喜欢你</li> <li>相亲相爱</li> </ul> 需要给页面添加
Java躲不过设计模式的坑之代理模式详解

目录前言使用场景代码分析总结前言设计模式在我看来更像是一种设计思维或设计思想,它就像<孙子兵法>一样,为你的项目工程提供方向,让你的项目工程更加健壮.灵活,延续生命力.本文即将分享的是设计模式的其中一种:代理模式. 代理模式通用官方定义:代理模式(Proxy Pattern) 是一种结构型设计模式,通过代理对象控制对原对象的访问,并允许在访问前或访问后做一些处理. 简单理解就是给一个对象找了一个替代品,这个替代品得到原对象授权,可以拦截一些无效或低效的访问,从而使得原对象可以释放
Java中的代理模式详解及实例代码

java 代理模式详解前言: 在某些情况下,一个客户不想或者不能直接引用一个对象,此时可以通过一个称之为"代理"的第三者来实现间接引用.代理对象可以在客户端和目标对象之间起到中介的作用,并且可以通过代理对象去掉客户不能看到的内容和服务或者添加客户需要的额外服务. 简单来说代理模式就是通过一个代理对象去访问一个实际对象,并且可以像装饰模式一样给对象添加一些功能. 静态代理所谓静态代理即在程序运行前代理类就已经存在,也就是说我们编写代码的时候就已经把代理类的代码写好了,而动态代理则
JavaScript设计模式之代理模式实例分析

本文实例讲述了JavaScript设计模式之代理模式.分享给大家供大家参考,具体如下: 代理模式的定义,代理是一个对象(proxy)用它来控制目标对象的访问.为此他要是先与目标对象相同的接口,但是他不同于装饰者模式,它对目标对象不进行任何修改,它的目的在于延缓"复杂"对象的初始化时间.这样可以在用到这个目标对象的时候再初始化他(对于单例来讲更是重要). 代理模式有两种分类: (1)普通代理 (2)惰性代理具体看下面的例子第一,普通代理模式步骤一,接口检验文件的引用 //定义一个静
JavaScript设计模式之代理模式简单实例教程

本文实例讲述了JavaScript设计模式之代理模式.分享给大家供大家参考,具体如下: 一.代理模式概念代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问.代理模式使得代理对象控制具体对象的引用.代理几乎可以是任何对象:文件,资源,内存中的对象,或者是一些难以复制的东西. 解释:房屋中介,可以代理帮助卖家把房子卖给买家,这中间卖家说要卖的价钱就可以了,买家也可以提出自己要买的房型,中介可以帮忙处理中间环节.最后达成

JavaScript设计模式之代理模式详解

相关推荐

随机推荐