轻松掌握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.ui.draggable中文文档
Nov 24 Javascript
js 省地市级联选择
Feb 07 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
微信小程序实现下拉刷新动画
Jun 21 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 变量未定义等错误的解决方法
2011/01/12 PHP
php MessagePack介绍
2013/10/06 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
VBScript版代码高亮
2006/06/26 Javascript
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
prototype 中文参数乱码解决方案
2009/11/09 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
JsRender for object语法简介
2014/10/31 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
水果花束:Fruit Bouquets
2017/12/20 全球购物
电气自动化专业职业规划范文
2014/02/16 职场文书
迎七一演讲稿
2014/09/12 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
初中毕业生自我评价
2015/03/02 职场文书
讲座通知范文
2015/04/23 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python