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 写类方式之四
Jul 05 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
React diff算法的实现示例
Apr 20 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
vue动态子组件的两种实现方式
Sep 01 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获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
thinkphp分页集成实例
2017/07/24 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
python实现简单温度转换的方法
2015/03/13 Python
python动态网页批量爬取
2016/02/14 Python
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
实习自我鉴定
2013/12/15 职场文书
党章学习思想汇报
2014/01/14 职场文书
总经理的岗位职责
2014/02/23 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
司机职责范本
2014/03/08 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
消防安全承诺书
2014/05/22 职场文书
最常使用的求职信
2014/05/25 职场文书
见习报告的格式
2014/10/31 职场文书
申报材料格式
2014/12/30 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android