JavaScript 디자인 패턴(에이전트 모드)_javascript 기술 배우기

프록시 패턴은 개체에 대한 액세스를 제어하기 위해 개체에 대한 대리자 또는 자리 표시자를 제공하는 것입니다
프록시 패턴의 사용(개인적 이해): 현재 개체의 단일 책임(상대적 독립성)을 보장하려면 현재 개체를 호출하기 전에 일부 논리를 처리하는 다른 개체를 생성하여 코드 효율성, 상태 판단, 등.
가장 일반적으로 사용되는 프록시 모드는 가상 프록시 및 캐싱 프록시

입니다.

1. 가상 에이전트
가상 에이전트는 실제로 필요할 때까지 값비싼 객체의 생성 및 실행을 지연시킵니다.
예: 가상 에이전트가 이미지 사전 로드를 구현합니다

// 图片加载函数
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:/loading.png");
      img.src = src;
    }
  }
})();

// 调用代理对象加载图片
proxyImage.setSrc( "http://images/qq.jpg");

예: 가상 프록시가 HTTP 요청을 병합합니다.
어떤 기능에 잦은 네트워크 요청이 필요하여 상당한 오버헤드가 발생한다고 가정해 보겠습니다. 해결 방법은 프록시 기능을 사용하여 일정 시간 내에 요청을 수집하여 한 번에 서버로 보내는 것입니다.
예: 파일 동기화 기능, 파일을 선택하면 다른 백업 서버와 동기화됩니다

// 文件同步函数
var synchronousFile = function( id ){
  console.log( "开始同步文件，id为：" + id );
}
// 使用代理合并请求
var proxySynchronousFile = (function(){
  var cache = [], // 保存一段时间内需要同步的ID
    timer; // 定时器指针

  return function( id ){
    cache[cache.length] = id;
    if( timer ){
      return;
    }

    timer = setTimeout( function(){
      proxySynchronousFile( cache.join( "," ) ); // 2s 后向本体发送需要同步的ID集合
      clearTimeout( timer ); // 清空定时器
      timer = null;
      cache = []; // 晴空定时器
    },2000 );
  }
})();

// 绑定点击事件
var checkbox = document.getElementsByTagName( "input" );

for(var i= 0, c; c = checkbox[i++]; ){
  c.onclick = function(){
    if( this.checked === true ){
      // 使用代理进行文件同步
      proxySynchronousFile( this.id );
    }
  }
}

2. 캐싱 프록시
캐싱 프록시는 비용이 많이 드는 일부 작업 결과에 대한 임시 저장소를 제공할 수 있습니다. 전달된 매개변수가 이전 작업과 일치하면 이전 작업 결과가 반환될 수 있습니다.
예: 곱셈, 덧셈 등을 위한 캐싱 프록시 생성

// 计算乘积
var mult = function(){
  var a = 1;
  for( var i = 0, l = arguments.length; i < l; i++){
    a = a * arguments[i];
  }
  return a;
};
// 计算加和
var plus = function () {
 var a = 0;
  for( var i = 0, l = arguments.length; i < l; i++ ){
    a += arguments[i];
  }
  return a;
};
// 创建缓存代理的工厂
var createProxyFactory = function( fn ){
  var cache = {}; // 缓存 - 存放参数和计算后的值
  return function(){
    var args = Array.prototype.join.call(arguments, "-");
    if( args in cache ){ // 判断出入的参数是否被计算过
      console.log( "使用缓存代理" );
      return cache[args];
    }
    return cache[args] = fn.apply( this, arguments );
  }
};
// 创建代理
var proxyMult = createProxyFactory( mult ),
  proxyPlus = createProxyFactory( plus );

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 ) ); // 输出： 缓存代理 10

위의 세 가지 예에서는 JavaScript 프록시 모드를 자세히 소개하고 있으며 학습에 도움이 되기를 바랍니다.