js:代理模式

代理模式
与直接操作对象相比,代理模式为对象增加一个中间控制器,外部访问控制器来操作对象,而控制器则可以进行条件筛选、执行控制等。
图片预加载

    // 图片预加载
    (function(win){
      // 直接加载
      var loadImg = function(dom, src){
        dom.src = src;
      };
      // 代理为预加载
      var proxyLoadImg = (function(){
        var img = new Image;
        return function(dom, src){
          loadImg(dom, "loading.gif");
          img.src = src;
          img.onload = function(){
            loadImg(dom, this.src);
          };
        };
      })();
      win.loadImg = loadImg;
      win.proxyLoadImg = proxyLoadImg;
    })(window);
    // 示例img 元素
    var cnt = document.getElementById("testimg");
    proxyLoadImg(cnt, "http://111.231.220.231/commonres/jpg/banner1.jpg");

合并非必要的频繁操作
效果同 高阶函数的 函数节流和分时函数。
可应用于合并HTTP请求,减少频繁的同类请求的请求次数。

    /*示例: 跟踪记录鼠标位置.
      控制: 每200ms才记录一个位置
            每获取到超过10个就将数据传出(这里是打印出来)
    */
    (function(win){
      // 获取当前位置
      var getPositionFixed = function(e){
        e = e || win.event;
        //firefox、chrome等浏览器
        if(e.pageX || e.pageY){ 
          return { left:e.pageX, top:e.pageY };
        }
        // IE浏览器
        return {
          left: e.clientX + document.body.scrollLeft - document.body.clientLeft,
          top:  e.clientY + document.body.scrollTop - document.body.clientTop
        };          
      };

      // 记录鼠标位置
      var recordPositionFixed = (function(){
        var cachePoints = []
          , timer = null;
        // 记录位置
        var record = function(e){
          var point = getPositionFixed(e);
          cachePoints.push(point);
        }
        // 打印位置
        var print = function(){
          console.log("=======" + new Date);
          for(var i in cachePoints){
            console.log(cachePoints[i]);
          }
        }
        // 清空位置
        var clear = function(){
          cachePoints = [];
        }
        // 返回函数
        return function(e){
          // 未满记录间隔,返回true,不做记录
          if (timer) { return true; };
          // 记录超过50打印并清空
          if (cachePoints.length > 10){
            print();
            clear();
          }
          var args = arguments,
            _this = this;
          // 间隔200ms记录一次
          timer = setTimeout(
            function(){
              clearTimeout(timer);
              timer = null;
              record.apply(_this,args);
            },
            200
          );
        };
      })();

      win.recordPositionFixed = recordPositionFixed;
    })(window);

    window.onmousemove = function(e){
      recordPositionFixed(e);
    };
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值