Apprendre les modèles de conception JavaScript (mode agent)_compétences javascript

Le modèle de proxy consiste à fournir un substitut ou un espace réservé pour un objet afin d'en contrôler l'accès
L'utilisation du modèle proxy (compréhension personnelle) : afin de garantir la responsabilité unique (indépendance relative) de l'objet actuel, un autre objet doit être créé pour gérer une certaine logique avant d'appeler l'objet actuel afin d'améliorer l'efficacité du code, le jugement de statut, etc.
Les modes proxy les plus couramment utilisés sont le proxy virtuel et le proxy de mise en cache

1.Agent Virtuel
Les agents virtuels retardent la création et l'exécution de certains objets coûteux jusqu'à ce qu'ils soient réellement nécessaires
Exemple : L'agent virtuel implémente le préchargement des images

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

Exemple : Le proxy virtuel fusionne les requêtes HTTP
Supposons qu'une fonction nécessite des requêtes réseau fréquentes, ce qui entraînera une surcharge considérable. La solution consiste à utiliser une fonction proxy pour collecter les requêtes sur une période donnée et les envoyer immédiatement au serveur.
Par exemple : une fonction de synchronisation de fichiers, lorsque l'on sélectionne un fichier, il sera synchronisé sur un autre serveur de sauvegarde

// 文件同步函数
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. Proxy de mise en cache
Le proxy de mise en cache peut fournir un stockage temporaire pour certains résultats d'opérations coûteuses. Lors de l'opération suivante, si les paramètres transmis sont cohérents avec l'opération précédente, les résultats de l'opération précédente peuvent être renvoyés.
Exemple : Créer des proxys de mise en cache pour la multiplication, l'addition, etc.

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

Les trois exemples ci-dessus présentent le mode proxy JavaScript en détail, et j'espère qu'ils vous seront utiles pour votre apprentissage.