轻松掌握JavaScript代理模式


Posted in Javascript onAugust 26, 2016

在面向对象设计中,有一个单一职责原则,指就一个类(对象、函数)而言,应该仅有一个引起它变化的原因。如果一个对象承担了过多的职责,就意味着它将变得巨大,引起它变化的原因就多,它把这些职责耦合到了一起,这种耦合会导致程序难于维护和重构。 

这时候,我们可以把该对象(本体)的其中一部分职责分离出来给一些第三方对象去做,本体只管自己的一些核心职责,这些第三方对象就称作代理。代理对象可以作为对象(也叫“真正的主体”)的保护者,让真正的主体对象做尽量少的工作。在代理设计模式中,一个对象充当了另一个对象的接口的角色。 

通常代理和本体的接口应该保持一致性,这样当不需要代理的时候,用户可直接访问本体。 

当我们不方便直接访问一个对象时,就可以考虑给该对象招一个代理。 

代理可用于:图片预加载、合并HTTP请求(代理收集一定时间内的所有HTTP请求,然后一次性发给服务器)、惰性加载(通过代理处理和收集一些基本操作,然后仅在真正需要本体的时候才加载本体)、缓存代理(缓存请求结果、计算结果)等

例子1:图片预加载

var myImage = (function(){
 var imgNode = document.createElement('img');
 document.body.appendChild(imgNode);
 return {
  setSrc:function(src){
   imgNode.src = src;
  }
 }
})();
//代理函数
var proxyImage = (function(){
 var img = new Image;
 img.onload = function(){
  myImage.setSrc(this.src);
 }
 return{
  setSrc:function(src){
   myImage.setSrc('loading.gif');
   img.src = src;
  }
 }
})();

proxyImage.setSrc('show.jpg');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Tips 带三角可关闭的文字提示
Oct 06 Javascript
简单实例处理url特殊符号&处理(2种方法)
Apr 02 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
轻松掌握JavaScript单例模式
Aug 25 #Javascript
很酷的星级评分系统原生JS实现
Aug 25 #Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 #Javascript
轻松掌握JavaScript策略模式
Aug 25 #Javascript
Javascript 6里的4个新语法
Aug 25 #Javascript
Javascript实现代码折叠功能
Aug 25 #Javascript
深入浅出ES6之let和const命令
Aug 25 #Javascript
You might like
PHP 面向对象实现代码
2009/11/11 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
js模拟微博发布消息
2017/02/23 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
浅谈Python的list中的选取范围
2018/11/12 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
党委书记岗位职责
2013/11/24 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫