JavaScript设计模式代理模式

时间：2017-04-08 13:03:06 阅读：263 评论：0 收藏：0 [点我收藏+]

标签：模式开发 zepto onload body odm 图片加载事件 round

代理模式是为一个对象提供一个代用品或者占位符，以便控制对它的访问。

代理模式的关建是，当客户不方便直接访问一个对象或者不满足需要的时候，提供一个替身对象来控制对这个对象的访问，客户实际访问的是替身对象，替身对象对请求做出一些处理后，再把请求转交给本体对象。

先来看一个例子，假设A想送花给C，但又不知道C的心情，C的心情好时即送花成功，那么可以通过C的好朋友B来送花，B了解C，可以知道C的心情。

var Flower = function(){};
     //A发起送花请求
     var A = {
      sendFlower:function(target){
        var flower = new Flower();
         target.receiveFlower(flower);
      }
     };
     //B接受送花请求 并监听到C的心情好时转给C
     var B = {
         receiveFlower:function(flower){
           C.listenGoodMood(function(){
             C.receiveFlower(flower);
          });
         }
     };
     //C接受送花请求 和 发表心情
     var C = {
         receiveFlower :function(flower){
            console.log(flower);
         },
         listenGoodMood:function(fn){
           setTimeout(function(){
              fn();
           },1000)
         }
     };

     A.sendFlower(B);

在实际开发中，由于花的价格昂贵，那么可以当B监听到C的好心情时，才创建花来节省消耗。

var B = {
         receiveFlower:function(){
           C.listenGoodMood(function(){
            var  flower = new Flower();
             C.receiveFlower(flower);
          });
         }
     };

在这个例子中，最关键的就是B对象，也就是该章描述的代理对象，代理B可以帮助C过滤掉那些年龄太大之类的人，这些请求可以被B直接拒绝掉，这种被称为保护代理。而在真正需要的时候才来创建对象，也就是在C心情好的时候才创建花，被称为虚拟代理。

下面来看一个实际开发中的例子，通常在加载一个比较大的图片时，我们会先用一张菊花图提示用户化正在加载，当真正的图片被加载完成后，才显示该图片。

//加载图片的类
       var myImg = (function(){
           var imgNode = document.createElement(‘img‘);
           document.body.appendChild(imgNode);
           return {
              setSrc:function(src){
                 imgNode.src = src;
              }
           }
       })();
       //代理类，在图片加载完成之前 显示菊花图 加载完成后 改换真正的图片
       var proxyImg = (function(){
          var img = new Image();
          img.onload = function(){
             myImg.setSrc(this.src);
          };
          return {
             setSrc:function(src){
                myImg.setSrc("菊花图!");
                img.src = src;
             }
          }
       })();

       proxyImg.setSrc(‘真正的图片!‘);

在这里，也许会有疑问，即使不用代理模式也能实现这种效果，先来看一下不用代理的代码实现：

var myImg = (function(){
           var imgNode = document.createElement(‘img‘);
           document.body.appendChild(imgNode);
           var img = new Image();
           img.onload = function(){
             myImg.setSrc(this.src);
           };
           return {
              setSrc:function(src){
                 myImg.setSrc("菊花图!");
                 img.src = src;
              }
           }
       })();

       myImg.setSrc("真正的图片!")