javascript设计模式 ? 代理模式原理与用法实例分析


Posted in Javascript onApril 16, 2020

本文实例讲述了javascript设计模式 ? 代理模式原理与用法。分享给大家供大家参考,具体如下:

介绍:代理使我们很常见的一众模式,proxy,nginx都称之为代理,代理是什么意思呢?代理模式在客户端和目标对象之间加入一个新的代理对象,代理对象起到一个中介作用,去掉客户不能看到的内容和服务,或者增添客户需要的额外服务。

定义:给某一个对象提供一个代理,并由代理对象控制对原对象的引用。代理模式是一种对象结构型模式。

场景:我们还是以画图形为例,我将所有的绘图动作包装到Shape类中,使用代理模式来部分开放功能给客户。

示例:

var Shape = function(color){
  console.log('创建了一个对象');
  this.color = color;
  this.x;
  this.y;
  this.radius;
 
  this.setAttr = function(x, y, radius){
    this.x = x;
    this.y = y;
    this.radius = radius;
  }
  this.drawCircle = function(){
    console.log('画圆: 颜色:' + this.color + ' x:' + this.x + ' y:' + this.y + ' radius:' + this.radius)
  }
  this.drawSquare = function(){
    console.log('画方: 颜色:' + this.color + ' x:' + this.x + ' y:' + this.y )
  }
  this.drawTriangle = function(){
    console.log('画三角: 颜色:' + this.color + ' x:' + this.x + ' y:' + this.y )
  }
}
 
var proxyShape = function(color, x, y, radius){
  this.color = color;
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.shape = null;
  this.drawSquare = function(){
    if(this.shape === null){
      this.shape = new Shape(this.color);
      this.shape.setAttr(this.x, this.y, this.radius);
    }
    this.shape.drawSquare();
  }
}
 
var square = new proxyShape('red', 10, 10);
square.drawSquare();
square.drawSquare();
// 创建了一个对象
// 画方: 颜色:red x:10 y:10
// 画方: 颜色:red x:10 y:10

你可以在proxyShape中增加一些日志,权限等任务。因为代理类的存在,新增的任务不会影响到Shape类。

代理模式为对象的简介访问提供了解决方案,可以对对象的访问进行控制。

代理模式总结:

优点:
* 代理模式可以协调调用者和被调用这,一定程度降低了系统耦合度。

缺点:
* 由于增加了代理对象,因此有些类型的代理模式可能会造成请求的处理速度变慢。
* 实现代理模式需要额外的工作,有些代理模式的实现非常复杂。

适用场景:
* 当客户端需要访问远程主机中的对象时,可以使用远程代理。
* 当需要用一个消耗资源较少的对象来代表资源消耗较多的对象,可以使用虚拟代理
* 当需要控制一个对象的访问,为不同用户提供不同级别的访问权限时可以使用保护代理

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
vue.js语法及常用指令
Oct 29 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
javascript函数式编程基础
Sep 15 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 #Javascript
Vue Object 的变化侦测实现代码
Apr 15 #Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 #Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 #Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 #Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 #Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 #Javascript
You might like
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
浅析php创建者模式
2014/11/25 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
javascript Math.random()随机数函数
2009/11/04 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
详解如何运行vue项目
2019/04/15 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
基于python指定包的安装路径方法
2018/10/27 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
消防安全检查制度
2014/02/04 职场文书
2014年端午节活动方案
2014/03/11 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
2015年党总支工作总结
2015/05/25 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server