美文网首页
4.设计模式(代理模式)

4.设计模式(代理模式)

作者: 悠哈121 | 来源:发表于2020-11-05 17:33 被阅读0次
    代理模式:为一个对象提供一个代用品或占位符,以便控制对它的访问 image.png
    代码实现
    //图片预加载:先用一张loading图片占位,然后用异步的方式加载图片,等图片加载好后把他填充到img节点里
    var myImg = (function(){
      var ImgNode = document.createElement("img");
      document.body.appendChild(ImgNode);
      return{
        setSRC:function(src){
          ImgNode.src = src;
        }
      }
    })()
    var ImgProxy = (function(){
      var img = new Image;
      img.onload = function(){
        myImg.setSRC(this.src)
      }
      return{
        setSRC:function(src){
          myImg.setSRC("file:// /C:/Users/svenzeng/Desktop/loading.gif");
          img.src = src;
        }
      }
    })()
    ImgProxy.setSRC( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );
    实际上,我们需要的是给img节点设置src,预加载图片只是一个锦上添花的功能,如果能把这个操作放在另一个对象里面,自然是一个非常好的方法,于是代理的作用就体现出来了
    //高阶函数动态创建代理,通过传入高阶函数,为计算方法创建缓存代理
    function add(){
      var a = 0;
      for(var i = 0;  i < arguments.length; i++){
        a = a + arguments[i]
      }
      return a;
    }
    function mult(){
      var a = 1;
      for(var i = 0; i < arguments.length;i++){
        a = a*arguments[i]
      }
      return a
    }
    var calcProxy = function(fn){
      var result = {};
      return function(){
        let key = Array.prototype.join.call(arguments,"-");
        if(result[key]){
          return result[key]
        }
        return result[key] = fn(...arguments)
      }
    }
    var proxyMult = calcProxy( mult ), 
    proxyPlus = calcProxy( add ); 
    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 ) );
    //虚拟代理合并http请求:文件同步功能,当选中一个checkbox的时候,它对应文件会被同步到另一台备用服务器上,解决方案写一个代理函数来收集一段时间之内的请求,最后一次性发送给服务器setTimeout
    

    总结:当真正发现不方便直接访问某个对象的时候使用代理模式

    相关文章

      网友评论

          本文标题:4.设计模式(代理模式)

          本文链接:https://www.haomeiwen.com/subject/zkqavktx.html