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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
vue2单元测试环境搭建
May 24 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 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
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
关于svn冲突的解决方法
2013/06/21 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
popdiv
2006/07/14 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python 数据结构之堆栈实例代码
2017/01/22 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
仓库管理专业个人的自我评价
2013/12/30 职场文书
一年级家长会邀请函
2014/01/25 职场文书
入党积极分子评语
2014/05/04 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
写给领导的感谢信
2015/01/22 职场文书
工程部部长岗位职责
2015/02/12 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
2019年入党思想汇报
2019/03/25 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript