js design patterns : qu'est-ce que le modèle proxy ? Introduction au mode proxy js

Cet article vous apporte du contenu sur les modèles de conception js : Qu'est-ce que le modèle proxy ? L'introduction du mode proxy js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

Qu'est-ce que le mode proxy ?

Scénario : Xiao Ming poursuit la fille A

• Mode non-agent : Xiao Ming=花=> >Mode agent : Xiao Ming = Hua => Laisser l'ami B de la fille A aider = Hua => Fille A

• Définition :
Fournit un agent pour contrôler les autres les objets accèdent à cet objet.

Résout principalement : Problèmes causés lors de l'accès direct aux objets, par exemple : l'objet auquel accéder est sur une machine distante. Dans les systèmes orientés objet, l'accès direct à certains objets causera beaucoup de problèmes aux utilisateurs ou à la structure du système pour certaines raisons (par exemple, la création d'objets est coûteuse, ou certaines opérations nécessitent un contrôle de sécurité, ou nécessitent des opérations hors processus). accès). Nous pouvons ajouter une couche d'accès à cet objet lors de l'accès à cet objet.

Quand l'utiliser : Vous souhaitez avoir un certain contrôle lors de l'accès à un objet.

Comment résoudre : Ajoutez une couche intermédiaire.

Exemples d'application : 1. Raccourcis dans Windows. 2. Lorsque Zhu Bajie est allé trouver Gao Cuilan, il s'est avéré être Sun Wukong. Cela peut être compris ainsi : l'apparence de Gao Cuilan a été abstraite, et Gao Cuilan et Sun Wukong ont implémenté cette interface. il ne pouvait pas dire qu'il s'agissait de Sun Wukong, donc Sun Wukong était de la classe Agent de Gao Cuilan. 3. Vous n’êtes pas obligé d’acheter vos billets de train à la gare, vous pouvez également vous adresser à une agence. 4. Un chèque ou un certificat de dépôt bancaire constitue une procuration pour les fonds du compte. Les chèques sont utilisés à la place des espèces dans les transactions de marché et permettent de contrôler les fonds sur le compte de l'émetteur. 5. printemps aop.

Avantages : 1. Des responsabilités claires. 2. Haute évolutivité. 3. Intelligent.

Inconvénients : 1. Puisqu'un objet proxy est ajouté entre le client et le sujet réel, certains types de modes proxy peuvent entraîner un ralentissement de la vitesse de traitement des requêtes. 2. La mise en œuvre du mode proxy nécessite un travail supplémentaire et la mise en œuvre de certains modes proxy est très complexe.

Scénarios d'utilisation : Répartis par responsabilités, il existe généralement les scénarios d'utilisation suivants : 1. Agent distant. 2. Agent virtuel. 3. Agent de copie sur écriture. 4. Agent de protection (Protéger ou Accès). 5. Agent de cache. 6. Proxy de pare-feu. 7. Agent de synchronisation. 8. Agent de référence intelligent.

Remarques : 1. La différence entre le modèle d'adaptateur et le modèle d'adaptateur : le modèle d'adaptateur modifie principalement l'interface de l'objet considéré, tandis que le modèle de proxy ne peut pas modifier l'interface du classe proxy. 2. La différence entre le mode décorateur et le mode décorateur : le mode décorateur consiste à améliorer la fonction, tandis que le mode proxy consiste à la contrôler.

Il existe de nombreux types de modes proxy, les plus couramment utilisés dans JS sont le proxy virtuel et le proxy de mise en cache. Le proxy virtuel implémente le préchargement des images

Le code suivant utilise le mode proxy pour implémenter le préchargement des images. Vous pouvez voir que le mode proxy sépare intelligemment la logique de création d'image et de préchargement, et si le préchargement ne l'est pas. nécessaire à l'avenir, changez simplement l'ontologie de la requête au lieu de l'objet proxy de la requête.

Le proxy de cache implémente le calcul du produit

const myImage = (function() {
  const imgNode = document.createElement('img')
  document.body.appendChild(imgNode)
  return {
    setSrc: function(src) {
      imgNode.src = src
    }
  }
})()

const proxyImage = (function() {
  const img = new Image()
  img.onload = function() { // http 图片加载完毕后才会执行
    myImage.setSrc(this.src)
  }
  return {
    setSrc: function(src) {
      myImage.setSrc('loading.jpg') // 本地 loading 图片
      img.src = src
    }
  }
})()

proxyImage.setSrc('http://loaded.jpg')

Recommandation : ne devinez pas d'abord si vous devez utiliser le mode proxy pendant le développement si vous trouvez gênant d'utiliser un objet. directement, revenez. Il n’est pas trop tard pour optimiser.

Recommandations associées :

const mult = function() {
  let a = 1
  for (let i = 0, l; l = arguments[i++];) {
    a = a * l
  }
  return a
}

const proxyMult = (function() {
  const cache = {}
  return function() {
    const tag = Array.prototype.join.call(arguments, ',')
    if (cache[tag]) {
      return cache[tag]
    }
    cache[tag] = mult.apply(this, arguments)
    return cache[tag]
  }
})()

proxyMult(1, 2, 3, 4) // 24

modèle de conception js : quel est le modèle de stratégie ? Introduction au modèle de stratégie js

modèle de conception js : qu'est-ce que le modèle singleton ? Introduction au mode js singleton

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!