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 相关文章推荐
js 返回时间戳所对应的具体时间
Jul 20 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 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中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
2009/08/03 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
Python正则表达式介绍
2012/08/06 Python
初步探究Python程序的执行原理
2015/04/11 Python
Python pass详细介绍及实例代码
2016/11/24 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
家长会演讲稿
2014/04/26 职场文书
暑期教师培训方案
2014/06/07 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
超市食品安全承诺书
2015/04/29 职场文书
Python访问Redis的详细操作
2021/06/26 Python
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL