应届生都会的设计模式之代理模式

• 定义：

  • 为一个对象提供一种代理以控制这个对象额访问
  • 代理对象起到相似中介的做用，会增长一些功能，（如 校验 合并等等） ，也会去掉一些原有对象的功能。

• 分类

  • 虚拟代理：虚拟代理是把一些开销很大的对象，延迟到真正须要它的时候才去建立执行。
  • 安全代理：控制真实对象的访问权限
  • 远程代理：一个对象将不一样空间的对象进行局部代理
  • 智能代理：调用对象代理处理另一些事情如垃圾回收机制增长额外的服务

• 使用场景

  • 虚拟代理：图片加载，文件上传。
  • 保护代理：登陆操做后才能看全功能，前端校验。
  • 远程代理：监控多个对象的状态，总机监控分店。
  • 智能代理：提供额外的其余服务，火车站代售处。

• 表单验证

  • 保护代理就是起到保护的做用，用来过滤掉一下没必要要的请求 ，将真正须要的递给本体。
  • 譬如 验证用户是否惟一
  • 这里咱们应用 保护代理的思想 若是用户名是不合法的 则不会将该请求给本体执行
  • 发送ajax请求

• 代理模式分析

  • 这样编写代码 的确可以完成业务的需求 可以完成表单的验证 可是存在不少问题
  • 1. 绑定的函数比较庞大 包含了不少if-else语句 看着都很恶心 这些语句须要覆盖全部的校验规则
  • 2. 绑定的函数缺少弹性 若是增长了一种新的校验规则 或者想把密码的长度校验从6改为8 咱们都必须深刻
  • 3. 绑定的函数的内部实现 这是违反了开发-封闭原则的
  • 4. 算法的复用性差 若是程序中增长了另外一个表单 这个表单也须要进行一些相似的校验 那咱们极可能的将这些校验逻辑复制的漫天遍野

• 不能滥用模式 有时候仅仅是给代码增长了复杂度了

• 源码实现

  • 图片懒加载

  // 图片懒加载 --- 短暂的占位图片
  // 会缓存到本地 等图片加载成功再去加载原有的图片
  // 请求过来 本地缓存 占位
  div{
      display: inline-block;
      border: 1px solid black;
  }
  div.img{
      width: 100px;
  }
  
  <div id="demo"></div>
  <button id="oBtn"></button>
  
  function MyImage(_id) {
      var oImg = document.createElement('img');
      this.setSrc = function(_src) {
          oImg.src = _src;
      }
          document.getElementById(_id).appendChild(oImg);
      }
  var ProxyImage = (function() {
      var oImg = new Image();
      var oMyImage = new MyImage('demo');
      oImg.onload = function() {
          setTimeout(function() {
              oMyImage.setSrc(oImg.src);
          }, 2000);
      }
      return function(occupySrc, src) {
          oImg.src = src;
          oMyImage.setSrc(occupySrc);
      }
  })();
  复制代码

  • 文件上传

  // 虚拟代理的思想延迟到它真正去改变的时候才去改变
  #show{
      width: 100px;
      height: 100px;
      border: 1px solid black;
  }
  
  <div id="show">haha</div>
  <button type="bg">add greenBg</button>
  <button type="cl">add blueColor</button>
  <button type="fs">add fontSize</button>
  <button type="fw">add fontWeight</button>
  <button type="op">add opacity</button>
  
  var oDiv = document.getElementById('show');
  var oButtonArray = document.getElementsByTagName('button');
  var ProxyRequest = function(func) {
      var cache = [];
      var timer = null;
      return function() {
          cache.push(this.getAttribute('type'));
          clearTimeout(timer);
          timer = setTimeout(function() {
              func(oDiv, cache);
              cache = [];
          }, 2000);
      }
  };
  var realChangeStyle = ProxyRequest(changeStyle);
  for(var i = 0; i < oButtonArray.length; i++) {
      oButtonArray[i].onclick = realChangeStyle;
  }
  
  // 改变样式
  function changeStyle(dom, typeArr) {
      var typeObj = {
          bg: ['backgroundColor', 'green'],
          cl: ['color', 'blue'],
          fs: ['fontSize', '24px'],
          fw: ['fontWeight', 'bold'],
          op: ['opacity', '0.3']
      }
      if(typeArr.constructor == Array) { // 数组
          typeArr.forEach(function(ele) {                    
              dom.style[typeObj[ele][0]] = typeObj[ele][1];
          })
      }else { // 万一是字符串
          dom.style[typeObj[typeArr][0]] = typeObj[typeArr][1];
      }
  }
  复制代码

你的点赞是我持续输出的动力 但愿能帮助到你们 互相学习 有任何问题下面留言 必定回复