JavaScript 설계 모드(프록시 모드)

17272 단어

1. 간단한 프록시 모드:


1、대리모드를 사용하지 않은 경우: 소명은 여신에게 직접 꽃을 보냅니다.

var Flower = function() {}
var xiaoming = {
  sendFlower: function( target ){
    var flower = new Flower();
    target.receiveFlower( flower ); 
  }
};
var A = {
  receiveFlower: function( flower ){
    console.log( '  ' , flower ); 
  }
};
xiaoming.sendFlower( A );

2. 간단한 대리 모드 사용: 시아오밍은 B를 통해 여신에게 꽃을 보낸다

var Flower = function() {}
var xiaoming = {
  sendFlower: function( target ){
    var flower = new Flower();
    target.receiveFlower( flower ); 
  }
};
var A = {
  receiveFlower: function( flower ){
    console.log( '  ' , flower ); 
  }
};
var B = {
    receiveFlower: function( flower ){
      A.receiveFlower(flower)
    }
}
xiaoming.sendFlower( B );

2. 보호 에이전트와 가상 에이전트


비록 이것은 가상적인 예일 뿐이지만, 우리는 그 중에서 두 가지 대리 모델의 모습을 찾을 수 있다.에이전트 B는 A가 꽃을 보내는 사람 중 나이가 너무 많거나 보마가 없는 사람을 거르는 것을 도울 수 있다. 이런 요청은 에이전트 B에서 직접 거절당할 수 있다.이런 대리를 보호 대리라고 부른다.A와 B는 하나는 흰 얼굴이고 하나는 검은 얼굴이다.하얀 얼굴 A는 계속해서 좋은 여신 이미지를 유지하고 누구도 거절하지 않으려고 검은 얼굴 B를 찾아 A에 대한 방문을 통제했다.
또한 현실에서 비용이 적지 않아 프로그램 세계에서 new Flower도 대가가 비싼 조작이라고 가정하면 우리는 new Flower의 조작을 에이전트 B에게 맡기고 에이전트 B는 A가 기분이 좋을 때 new Flower를 실행하는 것을 선택할 수 있다. 이것은 에이전트 모델의 또 다른 형식으로 가상 에이전트라고 부른다.가상 에이전트는 비용이 많이 드는 대상을 진정으로 필요로 할 때까지 늦추어 만든다.

3. 가상 에이전트는 그림을 미리 불러옵니다.

var myImage = (function(){
  var imgNode = document.createElement( 'img' ); 
  document.body.appendChild( imgNode );
  return {
    setSrc: function( src ){
      imgNode.src = src; 
    }
  } 
})();
myImage.setSrc('http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg');

일반적인 방식으로 우리는 인터넷 속도를 5KB/s로 조정한 후에 MyImage를 통해setSrc는 이img 노드에 src를 설정합니다. 그림이 불러오기 전에 페이지에 긴 공백 시간이 있음을 볼 수 있습니다.
var myImage = (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(){
    myImage.setSrc(this.src); 
  }
  return {
    setSrc: function( src ){
      myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
      img.src = src; 
    }
  } 
})();
proxyImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

프록시 모드를 개조한 후, 지금부터 프록시 대상proxyImage를 도입합니다. 이 프록시 대상을 통해 그림이 실제로 불러오기 전에 페이지에 위치를 차지하는 국화 그림loading이 나타납니다.gif, 사용자 그림이 불러오고 있음을 알립니다.proxy Image는 고객이 My Image에 대한 접근을 제어하고 이 과정에서 추가 작업을 추가합니다. 예를 들어 실제 그림을 불러오기 전에img 노드의 src를 로컬loading 그림으로 설정합니다.

4. 가상 에이전트 통합 HTTP 요청

<body>
  <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
body>

이 checkbox에 클릭 이벤트를 연결하고 누르는 동시에 다른 서버로 파일을 동기화합니다. checkbox 3개를 선택할 때 서버에 세 번 동기화 파일을 요청합니다.체크박스를 클릭하는 것은 복잡한 작업이 아닙니다.이렇게 빈번한 인터넷 요청이 상당한 비용을 가져올 것으로 예상된다.
var synchronousFile = function( id ){ 
  console.log( ' ，id  : ' + id );
};
var checkbox = document.getElementsByTagName( 'input' );
for ( var i = 0, c; c = checkbox[ i++ ]; ){ 
  c.onclick = function(){
    if ( this.checked === true ){ 
      synchronousFile( this.id );
    } 
  }
};

해결 방안은 프록시 함수인proxySynchronousFile을 통해 일정 시간 동안의 요청을 수집하여 마지막으로 서버에 한꺼번에 보낼 수 있다는 것이다.예를 들어 우리는 2초를 기다린 후에야 이 2초 안에 동기화되어야 하는 파일 ID를 서버에 포장하여 보낸다. 만약에 실시간 요구가 매우 높은 시스템이 아니라면 2초의 지연은 큰 부작용을 가져오지 않지만 서버의 압력을 크게 줄일 수 있다.
var synchronousFile = function( id ){ 
  console.log( ' ，id  : ' + id );
};
var proxySynchronousFile = (function(){
  var cache = [], //   ID
  timer; //  
  return function( id ){
    cache.push( id );
    if ( timer ){ //  
      return; 
    }
    timer = setTimeout(function(){ 
      synchronousFile( cache.join( ',' ) ); 
      clearTimeout( timer ); //   timer = null;
      cache.length = 0; //   ID  
    }, 2000); 
  }
  // 2   ID  
})();
var checkbox = document.getElementsByTagName( 'input' ); 
for ( var i = 0, c; c = checkbox[ i++ ]; ){
  c.onclick = function(){
    if ( this.checked === true ){
      proxySynchronousFile( this.id ); 
    }
  }
}

5. 고급 함수로 캐시 에이전트를 동적으로 만듭니다.


고급 함수를 전송하는 이런 더욱 유연한 방식을 통해 각종 계산 방법에 캐시 에이전트를 만들 수 있다.현재 이러한 계산 방법은 캐시 에이전트를 만드는 데 전문적으로 사용되는 공장에 매개 변수로 전송되어 곱셈, 덧셈, 뺄셈 등을 위해 캐시 에이전트를 만들 수 있다.
/****************   *****************/ 
var mult = function(){
  var a = 1; 
  for ( i = 0, l = arguments.length; i < l; i++ ){ 
    var a = a* arguments[i];
  }
  return a; 
};

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

/****************   *****************/ 
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 ), 
proxyPlus = createProxyFactory( plus );

alert ( proxyMult( 1, 2, 3, 4 ) ); //  :24
alert ( proxyMult( 1, 2, 3, 4 ) ); //  :24
alert ( proxyPlus( 1, 2, 3, 4 ) ); //  :10
alert ( proxyPlus( 1, 2, 3, 4 ) ); //  :10

AngularJs 타이머, 타이머 인스턴스 코드
toioplayground (toiojavascriptlibrary를 사용해 보았습니다)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage