轻松掌握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 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
layui-select动态选中值的例子
Sep 23 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中文件上传的一个问题
2010/09/04 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
angular2倒计时组件使用详解
2017/01/12 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
Python重新引入被覆盖的自带function
2014/07/16 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
详解Python自建logging模块
2018/01/29 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
科技活动总结范文
2015/05/11 职场文书
白银帝国观后感
2015/06/17 职场文书