03 에이전트, 교체기

프록시 모드

대리와 본체 핑계의 일치성

보호 에이전트

가상 에이전트

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

})();

var proxyImage = (function() {
  var img = new Image;
  img.onload = function() {
    myImage(this.src);
  };
  return function(src) {
    myImage('picture/loading.jpg');
    img.src = src;
  }
})();

proxyImage('http://tp3.sinaimg.cn/1805666510/180/5718258464/1');

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

var proxySynchronousFile = (function() {
  var cache = [], timer;
  return function(id) {
    cache.push(id);
    if(timer)
      return;
    timer = setTimeout(function() {
      synchronousFile(cache.join(','));
      clearTimeout(timer);
      timer = null;
      cache.length = 0;
    }, 2000);  //2 
  };
})();

var checkbox = document.getElementsByTagName('input');
for(var i = 0, c; c = checkbox[i++];) {
  c.onclick = function() {
    if(this.checked === true)
      proxySynchronousFile(this.id);
  }
};

타성 로드에서의 응용

var miniConsole = (function(){
  var cache = [];
  var handler = function( ev ){
    if ( ev.keyCode === 13 ){ //enter
      var script = document.createElement( 'script' );
      script.onload = function(){
        for ( var i = 0, fn; fn = cache[ i++ ]; ){
          fn();
        }
      };
      script.src = 'log.js';
      document.getElementsByTagName( 'head' )[0].appendChild(script);
      document.body.removeEventListener( 'keydown', handler );
    }
  };
  document.body.addEventListener( 'keydown', handler, false );
  return {
    log: function(){
      var args = arguments;
      cache.push( function(){
        return miniConsole.log.apply( miniConsole, args );  // ， log.js ;
      });
    }
  }
})();


miniConsole.log(0);
miniConsole.log(1);
// enter

// log.js  
miniConsole = {
  log: function(){
  //  
    console.log( Array.prototype.join.call( arguments ) );
  }
};

캐시 에이전트

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

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

proxyMult(3,6,8);

고급 함수를 이용하여 동적 프록시 만들기

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

var proxyMult = createProxyFactory(mult);

기타 에이전트

반복자 모드

내부 교체기

var each = function (arr, callback) {
  for(var i = 0, len = arr.length; i < len; i++)
    callback.call(arr, i, arr[i]); // 
};

each([1,2,3], function(index, value) {
  console.log(this,index,value);
});

외부 교체기

var Iterator = function(obj) {
  var current = 0, len = obj.length;
  var next = function() {
    current++;
  }
  var isDone = function() {
    return current >= len; // length 
  }
  var getCurrentIten = function() {
    return obj[current];
  }
  return {
    next: next,
    isDone: isDone,
    getCurrentIten: getCurrentIten
  }
};
// 
var compare = function(iterator1, iterator2) {
  while(!iterator1.isDone() || !iterator2.isDone()) {
    if(iterator1.getCurrentIten() !== iterator2.getCurrentIten())
      throw new Error(' ');
    iterator1.next();
    iterator2.next();
  }
  console.log(' ');
};

compare(Iterator([0,1,2]), Iterator([0,1,2]));

반복 클래스 그룹과 글꼴 크기 대상

응용 예

var iterator = function() {
  for(var i = 0, fn; fn = arguments[i++];) {
    var result = fn();
    if(result !== false)
      return result;
  }
};

iterator(fn1, fn2, fn3, fn4);