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 相关文章推荐
jQuery中读取json文件示例代码
May 10 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 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
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
Javascript 面向对象特性
2009/12/28 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
深入浅析python with语句简介
2018/04/11 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
十佳青年个人事迹材料
2014/01/28 职场文书
工程安全员岗位职责
2014/03/09 职场文书
音乐教师求职信
2014/06/28 职场文书
优秀教师单行材料
2014/12/16 职场文书
加班费申请报告
2015/05/15 职场文书
优秀志愿者感言
2015/08/01 职场文书
六五普法学习心得体会
2016/01/21 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python