JavaScript设计模式之代理模式简单实例教程


Posted in Javascript onJuly 03, 2018

本文实例讲述了JavaScript设计模式之代理模式。分享给大家供大家参考,具体如下:

一、代理模式概念

代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下:

代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问。代理模式使得代理对象控制具体对象的引用。代理几乎可以是任何对象:文件,资源,内存中的对象,或者是一些难以复制的东西。

解释:房屋中介,可以代理帮助卖家把房子卖给买家,这中间卖家说要卖的价钱就可以了,买家也可以提出自己要买的房型,中介可以帮忙处理中间环节。最后达成买卖。中介可以同时代理很多房屋买卖,并且可以代理租房事宜。

代理模式的组成:

抽象角色:通过接口或抽象类声明真实角色实现的业务方法。

代理角色:实现抽象角色,是真实角色的代理,通过真实角色的业务逻辑方法来实现抽象方法,并可以附加自己的操作。

真实角色:实现抽象角色,定义真实角色所要实现的业务逻辑,供代理角色调用。

二、代理模式的作用和注意事项

模式作用:

1、远程代理(一个对象将不同空间的对象进行局部代理)

2、虚拟代理(根据需要创建开销很大的对象如渲染网页暂时用占位代替真图)

3、安全代理(控制证实对象的访问权限)

4、智能指引(调用对象代理处理另外一些事情如垃圾回收机制)

注意事项:

1、不能滥用代理,有时候仅仅是给代码增加复杂度

三、代理模式代码和实战总结

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>代理模式</title>
</head>
<body>
<script>
 //代理模式需要三方
 //1.买家
 function maijia(){
  this.name = "小明";
  this.money = "30万";
 }
 //2.中介
 function zhongjie(){
 }
 zhongjie.prototype.maifang = function(){
  //new fongdong(new maijia()).maifang("20万");
  new fongdong(new maijia()).maifang("20万");
 }
 //3.卖家
 function fongdong(maijia){
  this.maijia_name = maijia.name;
  this.maijia_money = maijia.money;
  this.maifang = function(money){
//   console.log("收到了来自【"+this.maijia_name+"】"+money+"人民币");
   console.log("收到了来自【"+this.maijia_name+"】"+this.maijia_money+"人民币");
  }
 }
 (new zhongjie()).maifang();
</script>
<script>
// A2B
 function A(){
  this.money = "20RMB";
 }
 function to(){
  if(!(this instanceof to)){
   return new to;
  }
 }
 to.prototype.maifang = function(){
  var a = new A();
  new B().maifang(a.money);
 }
 function B(){
  this.maifang = function(money){
   console.log("收到了钱"+money);
  }
 }
 (new to()).maifang();
 to().maifang();
</script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun测试运行效果如下:

JavaScript设计模式之代理模式简单实例教程

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
javascript 函数速查表
Feb 07 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
图解JavaScript中的this关键字
May 28 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 #Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 #Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 #Javascript
js实现各浏览器全屏代码实例
Jul 03 #Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 #Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 #Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 #Javascript
You might like
php的sso单点登录实现方法
2015/01/08 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
PHP重载基础知识回顾
2020/09/10 PHP
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Python中的zip函数使用示例
2015/01/29 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
对python调用RPC接口的实例详解
2019/01/03 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
python 实现识别图片上的数字
2019/07/30 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
工作会议欢迎词
2014/01/16 职场文书
教师节宣传方案
2014/05/23 职场文书
2015年大学生实习评语
2015/03/25 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书