轻松掌握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 相关文章推荐
动态读取JSON解析键值对的方法
Jun 03 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
微信小程序实现录音功能
Nov 22 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/03/10 PHP
php smarty函数扩展
2010/03/15 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
js函数与php函数的区别实例浅析
2015/01/12 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
轻松实现js图片预览功能
2016/01/18 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
Angularjs上传图片实例详解
2017/08/06 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
办理护照介绍信
2014/01/16 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
解决xampp安装后Apache无法启动
2022/03/21 Servers