JavaScript设计模式之代理模式简单实例教程

本文实例讲述了JavaScript设计模式之代理模式。分享给大家供大家参考,具体如下:

一、代理模式概念

代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下:

代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问。代理模式使得代理对象控制具体对象的引用。代理几乎可以是任何对象:文件,资源,内存中的对象,或者是一些难以复制的东西。

解释:房屋中介,可以代理帮助卖家把房子卖给买家,这中间卖家说要卖的价钱就可以了,买家也可以提出自己要买的房型,中介可以帮忙处理中间环节。最后达成买卖。中介可以同时代理很多房屋买卖,并且可以代理租房事宜。

代理模式的组成:

抽象角色:通过接口或抽象类声明真实角色实现的业务方法。

代理角色:实现抽象角色,是真实角色的代理,通过真实角色的业务逻辑方法来实现抽象方法,并可以附加自己的操作。

真实角色:实现抽象角色,定义真实角色所要实现的业务逻辑,供代理角色调用。

二、代理模式的作用和注意事项

模式作用:

1、远程代理(一个对象将不同空间的对象进行局部代理)

2、虚拟代理(根据需要创建开销很大的对象如渲染网页暂时用占位代替真图)

3、安全代理(控制证实对象的访问权限)

4、智能指引(调用对象代理处理另外一些事情如垃圾回收机制)

注意事项:

1、不能滥用代理,有时候仅仅是给代码增加复杂度

三、代理模式代码和实战总结

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>代理模式</title>
</head>
<body>
<script>
 //代理模式需要三方
 //1.买家
 function maijia(){
  this.name = "小明";
  this.money = "30万";
 }
 //2.中介
 function zhongjie(){
 }
 zhongjie.prototype.maifang = function(){
  //new fongdong(new maijia()).maifang("20万");
  new fongdong(new maijia()).maifang("20万");
 }
 //3.卖家
 function fongdong(maijia){
  this.maijia_name = maijia.name;
  this.maijia_money = maijia.money;
  this.maifang = function(money){
//   console.log("收到了来自【"+this.maijia_name+"】"+money+"人民币");
   console.log("收到了来自【"+this.maijia_name+"】"+this.maijia_money+"人民币");
  }
 }
 (new zhongjie()).maifang();
</script>
<script>
// A2B
 function A(){
  this.money = "20RMB";
 }
 function to(){
  if(!(this instanceof to)){
   return new to;
  }
 }
 to.prototype.maifang = function(){
  var a = new A();
  new B().maifang(a.money);
 }
 function B(){
  this.maifang = function(money){
   console.log("收到了钱"+money);
  }
 }
 (new to()).maifang();
 to().maifang();
</script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun测试运行效果如下:

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

时间: 2018-07-01

JavaScript的设计模式经典之代理模式

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

JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例

本文实例讲述了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法.分享给大家供大家参考,具体如下: 观察者模式,又称为发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己的状态. 在观察者模式中,并不是一个对象调用另一个对象的方法,而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知.订阅者也称为观察者,而被观察的对象称为发布者或主题.当发生了一个重要的事件时,发布

JavaScript事件发布/订阅模式原理与用法分析

本文实例讲述了JavaScript事件发布/订阅模式原理与用法.分享给大家供大家参考,具体如下: 1.发布/订阅模式也是诸多设计模式当中的一种: 2.这种方式可以在es5下相当优雅地处理异步操作: 3.什么是发布/订阅呢?我们举个栗子: 假设fn1,fn2,fn3都可以视作一个事件的发布者,执行它,就会发布一个事件.这个时候,我们可以通过一个事件的订阅者去批量订阅并处理这些事件,包括它们的先后顺序.增加一个消息订阅者的方法: class AsyncFunArr { constructor (..

JS模式之简单的订阅者和发布者模式完整实例

本文实例讲述了JS模式之简单的订阅者和发布者模式.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

JavaScript中发布/订阅模式的简单实例

上次研究观察者模式,很多文章说它也叫Subscribe/Publish(发布/订阅模式).可在<Javascript设计模式>一书中,这两种模式还是有些区别的.书中原话如下: 1.Observer模式要求希望接收到主题通知者的观察者必须订阅内容改变的事件. 2.Subscribe/Publish模式使用了一个主题/事件通道,这个通道介于订阅者和发布者之间.该事件系统允许代码定义应用程序的特定事件,该事件可以传递自定义参数,自定义参数包含订阅者所需要的值.其目的是避免订阅者和发布者产生依赖关系.

JavaScript设计模式之观察者模式(发布者-订阅者模式)

观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式. 复制代码 代码如下: div.onclick  =  function click (){ alert ( "click' ) } 只要订阅了div的click事件. 当点击div的时候, function click就会被触发. 那么到底什么是观察者模式呢. 先看看生活中的观察者模式. 好莱坞有句名言. "不要给我

JavaScript设计模式之代理模式介绍

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

JavaScript设计模式之缓存代理模式原理与简单用法示例

本文实例讲述了JavaScript设计模式之缓存代理模式原理与简单用法.分享给大家供大家参考,具体如下: 一.原理: 缓存代理可以为一些开销大的运算结果提供暂时的存储,在下次运算时,如果传递进来的参数跟之前的一致,则可以直接返回前面存储的运算结果,提供效率以及节省开销. 二.实例: var mult = function(){ console.log('开始计算乘机'); var a = 1; for(var i = 0, l = arguments.length;i < l;i++){ a =

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

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

js设计模式之代理模式及订阅发布模式实例详解

本文实例讲述了js设计模式之代理模式及订阅发布模式.分享给大家供大家参考,具体如下: 为啥将两种模式放在一起呢?因为这样文章比较长啊. 写博客的目的我觉得首要目的是整理自己的知识点,进而优化个人所得知识体系.知识成为个人的知识,就在于能够用自己的话表达同一种意义. 本文是设计模式系列文章的第二篇文章,第一篇:. 1,代理模式,只是学习了虚拟代理以及缓存代理,具体案例 1)虚拟代理 //业务代码 var myImage = (function() { var imgNode = document.

JavaScript实现与使用发布/订阅模式详解

本文实例讲述了JavaScript实现与使用发布/订阅模式.分享给大家供大家参考,具体如下: 一.发布/订阅模式简介 发布/订阅模式(即观察者模式): 设计该模式背后的主要动力是促进形成松散耦合.在这种模式中,并不是一个对象调用另一个对象的方法,而是一个订阅者对象订阅发布者对象的特定活动,并在发布者对象的状态发生改变后,订阅者对象获得通知.订阅者也称为观察者,而被观察的对象称为发布者或主题.当发生了一个重要的事件时,发布者将会通知(调用)所有订阅者,并且可能经常以事件对象的形式传递消息. 基本思

JavaScript设计模式之观察者模式与发布订阅模式详解

本文实例讲述了JavaScript设计模式之观察者模式与发布订阅模式.分享给大家供大家参考,具体如下: 学习了一段时间设计模式,当学到观察者模式和发布订阅模式的时候遇到了很大的问题,这两个模式有点类似,有点傻傻分不清楚,博客起因如此,开始对观察者和发布订阅开始了Google之旅.对整个学习过程做一个简单的记录. 观察者模式 当对象间存在一对多关系时,则使用观察者模式(Observer Pattern).比如,当一个对象被修改时,则会自动通知它的依赖对象.观察者模式属于行为型模式.在观察模式中共存

JavaScript中创建对象的7种模式详解

ECMA-262把对象定义为:"无需属性的集合,其属性可以包含基本值.对象或者函数."严格来讲,这就相当于说明对象是一组没有特定顺序的值.对象的每个属性或方法都有一个名字,而每个名字都映射到一个值.正因为这样,我们可以把ECMAScript的对象想象成散列表:无非就是一组名对值,其中值可以是数据或函数. 创建自定义对象最简单的方式就是创建一个Object的实例,然后再为他添加属性和方法,如下所示: var person = new Object();.person.name = &qu

发布订阅模式在vue中的实际运用实例详解

订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态. 比如addEventListener 这个api就是个发布订阅模式 如果用过vue的同学,可以把他类比于 watch 下面我们看一个例子 var observe={ fnsObj:{}, // 订阅方法 on:function(key,fn){ if(!observe.fnsObj[key]){ observe.fnsObj[key]

浅谈发布订阅模式与观察者模式

背景 设计模式并非是软件开发的专业术语,实际上,"模式"最早诞生于建筑学. 设计模式的定义是:在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案.通俗一点说,设计模式是在某种场合下对某个问题的一种解决方案.如果再通俗一点说,设计模式就是给面向对象软件开发中的一些好的设计取个名字. 这些"好的设计"并不是谁发明的,而是早已存在于软件开发中.一个稍有经验的程序员也许在不知不觉中数次使用过这些设计模式.GoF(Gang of Four--四人组,<设计模式&

node.js 发布订阅模式的实例

实例如下: //导入内置模块 let EventEmitter = require('events'); let util=require('util'); //Man继承EventEmitter util.inherits(Man,EventEmitter); //创建一个函数 function Man(){} //实例化函数 let man=new Man(); function findGirl() { console.log('找新的女朋友') } function saveMoney(

Javascript设计模式之装饰者模式详解篇

一.前言: 装饰者模式(Decorator Pattern):在不改变原类和继承的情况下动态扩展对象功能,通过包装一个对象来实现一个新的具有原对象相同接口的新的对象. 装饰者模式的特点: 1. 在不改变原对象的原本结构的情况下进行功能添加. 2. 装饰对象和原对象具有相同的接口,可以使客户以与原对象相同的方式使用装饰对象. 3. 装饰对象中包含原对象的引用,即装饰对象是真正的原对象经过包装后的对象. 二.Javascript装饰者模式详解: 描述: 装饰者模式中,可以在运行时动态添加附加功能到对