轻松掌握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 相关文章推荐
javascript 数组排序函数
Aug 20 Javascript
javascript 闭包疑问
Dec 30 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 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编写的简单页面跳转功能实现代码
2013/11/27 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python+Opencv识别两张相似图片
2020/03/23 Python
python利用有道翻译实现"语言翻译器"的功能实例
2017/11/14 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
python3跳出一个循环的实例操作
2020/08/18 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
植物选择:Botanic Choice
2017/02/15 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
医院工作检讨书范文
2014/02/10 职场文书
应届毕业生自荐信
2014/05/28 职场文书
团队队名口号大全
2014/06/06 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL