学习JavaScript设计模式之代理模式


Posted in Javascript onJanuary 12, 2016
  • 明星都有经纪人作为代理。如果请明星办一场商演,只能联系其经纪人,经纪人会把商演的细节和报酬谈好,再把合同交给明星签。

一、定义

代理模式:为一个对象提供一个代用品或占位符,以便控制对它的访问。
代理分为:保护代理和虚拟代理
保护代理:用于控制不同权限的对象对目标对象的访问,在JavaScript中很难判断谁访问了某个对象,所以保护代理很难实现。

二、图片预加载(最常见的虚拟代理应用场景)

图片预加载是一种常用技术,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的位置往往有段时间会有空白。常见的做法事先用一张loading图片占位,然后异步加载图片,待图片加载完成,把其填充到img节点里。
实现原理:
创建一个Image对象:var a = new Image();
定义Image对象的src: a.src = “xxx.gif”;
这样做就相当于给浏览器缓存了一张图片。

可通过Image对象的complete属性来检测图像是否加载完成。每个Image对象都有一个complete属性,当图像处于装载过程中时,该属性值false,当发生了onload、onerror、onabort中任何一个事件后,则表示图像装载过程结束,此时complete属性为true。

(1)非代理实现

var myImage = (function() {
  var imgNode = document.createElement("img");
  document.body.appendChild(imgNode);
  var img = new Image();

  img.onload = function() {
    imgNode.src = img.src;
  };

  return {
    setSrc: function(src) {
      imgNode.src = "./images/loading.gif";
      img.src = src;
    }
  }
})();

myImage.setSrc("./images/originImg.png");

(2)代理实现

// 创建图片DOM
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);  // this指向img!img加载完成后,将img.src传递给myImage
  };

  return {
    setSrc: function(src) {
      myImage.setSrc("./images/loading.gif");   // loading
      img.src = src;
    }
  };
})();

proxyImage.setSrc("./images/originImg.png");

使用代理模式的好处:使每个函数功能单一,实现对象设计的“单一职责原则”!

三、文件同步

假设我们在做一个文件同步功能,当选中checkbox时候,它对应的文件就会被同步到另外一台服务器。

<body>
    <input type="checkbox" id="1" />文件1
    <input type="checkbox" id="2" />文件2
    <input type="checkbox" id="3" />文件3
    <input type="checkbox" id="4" />文件4
    <input type="checkbox" id="5" />文件5
    <input type="checkbox" id="6" />文件6
  </body>

没选中一个checkbox就同步一次,显然不太合理。因为在web开发中,最大的开销就是网络请求。
解决方案:通过一个代理函数来收集一段时间之内的请求,然后一次性发给服务器。

var synchronousFile = function(id) {
  console.log("开始同步文件,id为:" + id);
};

var proxySynchonousFile = (function() {
  var cache = [],   // 保存本次需要同步文件的id
    timer;     // 定时器

  return function(id) {
    cache.push(id);
    if(timer) { 
      // 不要覆盖已经启动的定时
      return;
    }

    timer = setTimeout(function(){
      synchronousFile(cache.join(","));
      clearTimeout(timer);
      timer = null;
      cache.length = 0;  // 清空缓存
    }, 2000);
  }
})();

var checkboxs = document.getElementsByTagName("input");

for(var i = 0, c; c = checkboxs[i]; i++) {
  c.onclick = function() {
    if(this.checked === true) {
      proxySynchonousFile(this.id);
    }
  }
}

四、缓存代理?计算乘积(序列一模一样)

var mult = function() {
  var result = 1;
  for(var i = 0, l = arguments.length; i < l; i++) {
    result= result * arguments[i];
  }
  return result;
};

var proxyMult = (function() {
  var cache = {};   // {"1,2,3": 6}
  return function() {
    var args = Array.prototype.join.call(arguments, ",");
    if(args in cache) {
      return cache[args];
    }
    return cache[args] = mult.apply(this, arguments);
  }
})();

console.log(proxyMult(1, 2, 3));

// 改造:

var proxyFactory = function(fn) {
  var cache = {};
  return function() {
    var args = Array.prototype.join.call(arguments, ",");
    if(args in cache) {
      return cache[args];
    }
    return cache[args] = fn.apply(this, arguments);
  }  
};

console.log(proxyFactory(mult)(1, 2, 3));

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript原型继承之基础机制分析
Aug 26 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
vue组件间通信解析
Mar 01 Javascript
vue-hook-form使用详解
Apr 07 Javascript
vue v-on监听事件详解
May 17 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
基于JavaScript实现TAB标签效果
Jan 12 #Javascript
JavaScript实现瀑布流布局
Jun 28 #Javascript
轻松实现JavaScript图片切换
Jan 12 #Javascript
jQuery动画效果图片轮播特效
Jan 12 #Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 #Javascript
jqueryMobile使用示例分享
Jan 12 #Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 #Javascript
You might like
收集的DedeCMS一些使用经验
2007/03/17 PHP
php多文件上传下载示例分享
2014/02/20 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
python实现稀疏矩阵示例代码
2017/06/09 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
python的concat等多种用法详解
2018/11/28 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
维也纳通行证:Vienna PASS
2019/07/18 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
高一数学教学反思
2016/02/18 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL