Erlernen Sie JavaScript-Entwurfsmuster (Agentenmodus)_Javascript-Kenntnisse

Das Proxy-Muster dient dazu, einen Ersatz oder Platzhalter für ein Objekt bereitzustellen, um den Zugriff darauf zu steuern
Die Verwendung des Proxy-Musters (persönliches Verständnis): Um die Einzelverantwortung (relative Unabhängigkeit) des aktuellen Objekts sicherzustellen, muss vor dem Aufrufen des aktuellen Objekts ein weiteres Objekt erstellt werden, um eine gewisse Logik zu verarbeiten, um die Codeeffizienz und die Statusbeurteilung zu verbessern. usw.
Die am häufigsten verwendeten Proxy-Modi sind virtueller Proxy und Caching-Proxy

1. Virtueller Agent
Virtuelle Agenten verzögern die Erstellung und Ausführung einiger teurer Objekte, bis sie tatsächlich benötigt werden
Beispiel: Virtueller Agent implementiert das Vorladen von Bildern

// 图片加载函数
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");

Beispiel: Virtueller Proxy führt HTTP-Anfragen zusammen
Angenommen, eine Funktion erfordert häufige Netzwerkanfragen, was einen erheblichen Overhead verursacht. Die Lösung besteht darin, eine Proxy-Funktion zu verwenden, um Anfragen innerhalb eines bestimmten Zeitraums zu sammeln und sie sofort an den Server zu senden.
Beispiel: Eine Dateisynchronisierungsfunktion: Wenn wir eine Datei auswählen, wird diese mit einem anderen Backup-Server synchronisiert

// 文件同步函数
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. Caching-Proxy
Der Caching-Proxy kann temporären Speicher für einige teure Operationsergebnisse bereitstellen. Wenn die übergebenen Parameter bei der nächsten Operation mit denen der vorherigen Operation übereinstimmen, können die Ergebnisse der vorherigen Operation zurückgegeben werden.
Beispiel: Caching-Proxys für Multiplikation, Addition usw. erstellen

// 计算乘积
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

Die obigen drei Beispiele stellen den JavaScript-Proxy-Modus im Detail vor und ich hoffe, dass er Ihnen beim Lernen hilfreich sein wird.