学习JavaScript设计模式(代理模式)


Posted in Javascript onDecember 03, 2015

代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问
代理模式的用处(个人理解):为了保障当前对象的单一职责(相对独立性),而需要创建另一个对象来处理调用当前对象之前的一些逻辑以提高代码的效率、状态判断等。
代理模式中最常用的是虚拟代理缓存代理

一、虚拟代理
虚拟代理是把一些开销很大的对象,延迟到真正需要它的时候才去创建执行
示例: 虚拟代理实现图片预加载

// 图片加载函数
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("file://c:/loading.png");
      img.src = src;
    }
  }
})();

// 调用代理对象加载图片
proxyImage.setSrc( "http://images/qq.jpg");

示例: 虚拟代理合并HTTP请求
假设一个功能需要频繁的进行网络请求,这会造成相当大的开销,解决方案是通过一个代理函数来收集一段时间之内的请求,一次性发给服务器。
例如:做一个文件同步的功能,当我们选中一个文件时,就同步到另外一台备用服务器上

// 文件同步函数
var synchronousFile = function( id ){
  console.log( "开始同步文件,id为:" + id );
}
// 使用代理合并请求
var proxySynchronousFile = (function(){
  var cache = [], // 保存一段时间内需要同步的ID
    timer; // 定时器指针

  return function( id ){
    cache[cache.length] = id;
    if( timer ){
      return;
    }

    timer = setTimeout( function(){
      proxySynchronousFile( cache.join( "," ) ); // 2s 后向本体发送需要同步的ID集合
      clearTimeout( timer ); // 清空定时器
      timer = null;
      cache = []; // 晴空定时器
    },2000 );
  }
})();

// 绑定点击事件
var checkbox = document.getElementsByTagName( "input" );

for(var i= 0, c; c = checkbox[i++]; ){
  c.onclick = function(){
    if( this.checked === true ){
      // 使用代理进行文件同步
      proxySynchronousFile( this.id );
    }
  }
}

二、 缓存代理
缓存代理可以为一些开销大的运算结果提供暂时的存储,在下次运算时,如果传递进来的参数跟之前一致,则可以返回前面的运算结果。
示例: 为乘法、加法等创建缓存代理

// 计算乘积
var mult = function(){
  var a = 1;
  for( var i = 0, l = arguments.length; i < l; i++){
    a = a * arguments[i];
  }
  return a;
};
// 计算加和
var plus = function () {
 var a = 0;
  for( var i = 0, l = arguments.length; i < l; i++ ){
    a += arguments[i];
  }
  return a;
};
// 创建缓存代理的工厂
var createProxyFactory = function( fn ){
  var cache = {}; // 缓存 - 存放参数和计算后的值
  return function(){
    var args = Array.prototype.join.call(arguments, "-");
    if( args in cache ){ // 判断出入的参数是否被计算过
      console.log( "使用缓存代理" );
      return cache[args];
    }
    return cache[args] = fn.apply( this, arguments );
  }
};
// 创建代理
var proxyMult = createProxyFactory( mult ),
  proxyPlus = createProxyFactory( plus );

console.log( proxyMult( 1, 2, 3, 4 ) ); // 输出: 24
console.log( proxyMult( 1, 2, 3, 4 ) ); // 输出: 缓存代理 24
console.log( proxyPlus( 1, 2, 3, 4 ) ); // 输出: 10
console.log( proxyPlus( 1, 2, 3, 4 ) ); // 输出: 缓存代理 10

以上三个示例为大家详细介绍了javascript代理模式,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
js css+html实现简单的日历
Jul 14 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
jquery实现图片切换代码
Oct 13 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 #Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 #Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 #Javascript
Javascript实现检测客户端类型代码封包
Dec 03 #Javascript
javascript学习小结之prototype
Dec 03 #Javascript
简单实现JS对dom操作封装
Dec 02 #Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 #Javascript
You might like
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
PHP中使用curl入门教程
2015/07/02 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
Javascript MD4
2006/12/20 Javascript
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
详解webpack多页面配置记录
2018/01/22 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
python中字符串内置函数的用法总结
2018/09/13 Python
详解Python发送email的三种方式
2018/10/18 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
python requests证书问题解决
2019/09/05 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Pytorch释放显存占用方式
2020/01/13 Python
python中selenium库的基本使用详解
2020/07/31 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
初三班主任寄语大全
2014/04/04 职场文书
纠纷协议书
2014/04/16 职场文书
师德师风演讲稿
2014/05/05 职场文书
医院保洁服务方案
2014/06/11 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
实习护士自荐信
2015/03/25 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python