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 相关文章推荐
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
JavaScript中this详解
Sep 01 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
JS实现拖动模糊框特效
Aug 25 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
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
PHP 危险函数解释 分析
2009/04/22 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
YII框架常用技巧总结
2019/04/27 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
JS控制表格隔行变色
2006/06/26 Javascript
JQuery 风格的HTML文本转义
2009/07/01 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
js 获取、清空input type="file"的值(示例代码)
2013/12/24 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
实用自动化运维Python脚本分享
2018/06/04 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
python实现动态数组的示例代码
2019/07/15 Python
python opencv实现证件照换底功能
2019/08/19 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
如何编写python的daemon程序
2021/01/07 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
文化建设工作方案
2014/05/12 职场文书
大专护理专业自荐信
2015/03/25 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js