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

所属分类: 网络编程 / JavaScript 阅读数: 1936
收藏 0 赞 0 分享

本文实例讲述了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.jb51.net/code/HtmlJsRun测试运行效果如下:

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

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

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多