学习javascript设计模式之代理模式

2024-09-29 21:51:59

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

2、不用代理模式: 客户 -> 本体使用代理模式：客户 -> 代理 -> 本体

3、例子场景1 点击操作与服务器交互代理虚拟代理

　　　<input type="checkbox" id="1"></input>1
       <input type="checkbox" id="2"></input>2
       <input type="checkbox" id="3"></input>3
       <input type="checkbox" id="4"></input>4
       <input type="checkbox" id="5"></input>5
       <input type="checkbox" id="6"></input>6
       <input type="checkbox" id="7"></input>7
       <input type="checkbox" id="8"></input>8
       <input type="checkbox" id="9"></input>9
       <input type="checkbox" id="10"></input>10

var synchronousFile = function(id){
console.log(id);
}

var proxySynchronousFile = (function(){
       var cache = [],
           timer = null;
       return function(id){
           cache.push(id);
           if(timer){return;}
           timer = setTimeout(function(){
               synchronousFile(cache.join(','));
               clearTimeout(timer);
               cache.length = 0;
               timer =null;
           },2000);
       }
   })();
   var checkboxes = document.getElementsByTagName('input');
   for(var i=0,c; c=checkboxes[i++];){
       c.onclick = function(){
           if(this.checked == true){
               proxySynchronousFile(this.id);
           }
       }
   }

场景2 图片加载代理代理和本体接口的一致性

var createImg = (function(){
   var imgNode = document.createElement('img');
   document.body.appendChild(imgNode);
   return {
       setSrc:function(src){
           imgNode.src = src;
       }
   }
})();

var proxyImage = (function(){
   var img = new Image;
   img.onload = function(){
       createImg.setSrc(this.src);
   }
   return {
       setSrc:function(){
           createImg.setSrc('images/loading.gif');
           this.src=src;
       }
   }

})();

场景3、求和计算缓存代理

var mult = function(){
   var a=1;
   for(var i=0,l=arguments.length; i<l;i++){
       a = a*arguments[i];
   }
   alert(1);
   return a;
}

var proxyMult = (function(){
   var cache = {};
   return function(){
       var args = Array.prototype.join.call(arguments,',');
       if(args in cache){
           return cache[args];
       }
       return cache[args]= mult.apply(this,arguments);
   }
})();

console.log(proxyMult(2,2,2,2));
console.log(proxyMult(2,2,2,2));

/***********创建缓存代理工厂********************/

var createProxyFactory = (function(fn){
   var cache = {};
   return function(){
       var args = Array.prototype.join.call(arguments,',');
       if(args in cache){
           return cache[args];
       }
       return cache[args]= fn.apply(this,arguments);
   }
})();

var proxyMult = createProxyFactory(mult);

proxyMult(2,3,4,5);

proxyMult(2,3,4,5);

最新文章

热门文章