轻松掌握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 相关文章推荐
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
Python getopt模块处理命令行选项实例
2014/05/13 Python
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
远程研修随笔感言
2014/02/10 职场文书
年检委托书
2014/08/30 职场文书
护士年终考核评语
2014/12/31 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
教师岗位职责
2015/02/03 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers