详解javascript设计模式三:代理模式


Posted in Javascript onMarch 25, 2019

代理模式是一种对程序对象进行控制性访问的一类解决方案。

引入代理模式,其实是为了实现单一职责的面向对象设计原则。

单一职责其实就是指在一个类中(js中通常指对象和函数等),应仅有一个引起它变化的原因。这样会帮助程序设计具有良好的健壮和高内聚特性,从而当变化发生时,程序设计会尽量少的受到意外破坏。

代理模式有多种方法,保护代理、远程代理、虚拟代理、缓存代理等。

但在javascript中,代理模式最常用到的两种方法是虚拟代理和缓存代理。

虚拟代理

在理解虚拟代理时,可以将其想象为一个经纪人,客户程序需要通过这个虚拟代理(经纪人)来调用本体对象的方法。

虚拟代理示例demo1: 图片loading预加载

//通过虚拟代理实现图片预加载
//代理模式进行图片预加载的实现思路是: 通过代理对象获取实际显示图片地址并进行加载,同时先让本体对象显示预加载图片,待代理对象将实际图片地址加载完毕后传递给本体对象进行显示即可。

//本体对象
var myImage = (function(){
  var imgNode = new Image()
  document.body.appendChild(imgNode)

  return {
    setSrc: function(src){
      imgNode.src = src
    }
  }
})()

//代理对象
var proxyImage = (function(){
  var img = new Image();     //1、代理对象新建一个img对象
  img.onload = function(){    //4、代理对象img加载真实图片src完成后将src传递给本体对象显示
    myImage.setSrc(this.src)
  }
  return {
    setProxySrc: function(src){
      myImage.setSrc('../images/loding.gif') //2、代理对象控制本体对象使用加载图片src
      img.src = src          //3、代理对象的img对象获取将要传递给本体对象的真实图片src
    }
  }
})()

//通过代理对象来对本体对象进行访问
proxyImage.setProxySrc('https://p1.ssl.qhimgs1.com/t0153297036f4471d81.jpg')

虚拟代理示例demo2:合并HTTP请求,减少网络请求资源消耗

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>代理模式 虚拟代理合并HTTP请求</title>
</head>
<body>
  <div>
    <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
    <input type="checkbox" id="7" />7
    <input type="checkbox" id="8" />8
    <input type="checkbox" id="9" />9
  </div>  
</body>
<script>
  //使用

  //本体对象
  var synchornurFile = function(id){
    console.log('开始同步:' + id);
  }

  var proxySynchornurFile = (function(){
    var cache = [],   //集合一段时间内需要同步的id
      timer;   //定时器

    return function(id){
      cache.push(id)

      if(timer){   //保证不会覆盖已经启动的定时器
        return
      }
      timer = setTimeout(function(){
        synchornurFile(cache.join(','))
        clearTimeout(timer)
        timer = null
        cache.length = 0
      }, 2000)
    }
  })()

  var check = document.getElementsByTagName('input')
  for(var i=0; i<check.length; i++){
    check[i].onclick = function(){
      if(this.checked === true){
        proxySynchornurFile(this.id)
      }
    }
  }
</script>
</html>

缓存代理

缓存代理可以为一些开销大的运算结果提供暂时存储,在下次运算时,如果传递进来的参数和之前的一致,则可以直接返回前面存储的结果

缓存代理示例demo: 计算乘积

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>代理模式-缓存代理</title>
</head>
<body>
  <input type="text" id="input1">*
  <input type="text" id="input2">
  <div id="result"></div>
  <button type="button" id="btn">计算</button>
</body>
<script>

  //缓存代理示例: 计算乘积
  //本体对象
  var calculate = function(){
    var a = 1;
    for(var i=0; i<arguments.length; i++){
      a = a*arguments[i]
    }
    return a;
  }

  //代理对象,创建缓存代理的工厂,参数fn可以为任意需要进行代理的函数,除了上述计算乘积的本体对象函数外,还可以是计算加减或进行其他操作的本体函数
  var proxyCalculate = function(fn){
    var resultCache = {};

    return function(){
      var args = Array.prototype.join.call(arguments, ',')
      if(args in resultCache){    //测试对象中是否有对应的name,有则直接返回该name的值
        return resultCache[args]
      }
      return resultCache[args] = fn.apply(this, arguments)
    }
  }


  document.getElementById('btn').onclick = function(){
    var v1 = document.getElementById('input1').value
    var v2 = document.getElementById('input2').value
    var result = proxyCalculate(calculate)(v1, v2)

    document.getElementById('result').innerHTML = result
  }

  //总结: 代理模式还有多种,比如保护代理、远程代理等,但js中常用的代理模式有虚拟代理和缓存代理两种。
</script>
</html>

在编写业务代码时,并不需要一开始就考虑是否使用代理模式,只要当发现使用代理模式更方便时,再编写代理对象即可。

以上所述是小编给大家介绍的javascript设计模式三:代理模式详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
JS中常用的正则表达式
Sep 29 Javascript
js闭包用法实例详解
Dec 13 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
js实现鼠标拖拽缩放div实例代码
Mar 25 #Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 #Javascript
9102了,你还不会移动端真机调试吗
Mar 25 #Javascript
详解原生JS回到顶部
Mar 25 #Javascript
javascript验证form表单数据的案例详解
Mar 25 #Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 #Javascript
详解javascript函数写法大全
Mar 25 #Javascript
You might like
php打印输出棋盘的实现方法
2014/12/23 PHP
一个简单的php路由类
2016/05/29 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
浅析PHP开发规范
2018/02/05 PHP
php通过各种函数判断0和空
2020/07/04 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
python删除过期log文件操作实例解析
2018/01/31 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
Python tkinter三种布局实例详解
2020/01/06 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
C语言变量的命名规则都有哪些
2013/12/27 面试题
Python实现仓库管理系统
2022/05/30 Python