js-Entwurfsmuster: Was ist das Proxy-Muster? Einführung in den js-Proxy-Modus

Dieser Artikel enthält Inhalte zu js-Designmustern: Was ist das Proxy-Muster? Die Einführung des js-Proxy-Modus hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

Was ist der Proxy-Modus?

Szenario: Xiao Ming jagt Mädchen A

• Nicht-Agent-Modus: Xiao Ming=花=> Mädchen A

• Agentenmodus: Xiao Ming = Hua => Lass die Freundin von Mädchen A helfen => Objekte greifen auf dieses Objekt zu.

Löst hauptsächlich:

Probleme, die beim direkten Zugriff auf Objekte auftreten, zum Beispiel: Das Objekt, auf das zugegriffen werden soll, befindet sich auf einem Remote-Computer. In objektorientierten Systemen führt der direkte Zugriff auf einige Objekte aus bestimmten Gründen zu großen Problemen für Benutzer oder die Systemstruktur (z. B. ist die Objekterstellung teuer, oder bestimmte Vorgänge erfordern eine Sicherheitskontrolle oder erfordern Out-of-Process). Zugriff). Wir können diesem Objekt eine Zugriffsebene hinzufügen, wenn wir auf dieses Objekt zugreifen.

Wann zu verwenden:

Sie möchten beim Zugriff auf ein Objekt eine gewisse Kontrolle haben.

So lösen Sie:

Fügen Sie eine mittlere Ebene hinzu.

Anwendungsbeispiele:

1. Verknüpfungen in Windows. 2. Als Zhu Bajie Gao Cuilan suchte, stellte sich heraus, dass es sich um Sun Wukong handelte: Gao Cuilans Aussehen war abstrahiert und sowohl Gao Cuilan als auch Sun Wukong implementierten diese Schnittstelle. Er konnte nicht sagen, dass es sich um Sun Wukong handelte, also wurde Sun Wukong als Gao Cuilan-Agent bezeichnet. 3. Sie müssen Ihre Bahntickets nicht am Bahnhof kaufen, sondern können auch zu einer Agentur gehen. 4. Ein Scheck oder eine Bankeinlagenbescheinigung dient als Ersatz für die Mittel auf dem Konto. Schecks werden bei Markttransaktionen anstelle von Bargeld verwendet und ermöglichen die Kontrolle über die Gelder auf dem Konto des Emittenten. 5. Frühling aop.

Vorteile:

1. Klare Verantwortlichkeiten. 2. Hohe Skalierbarkeit. 3. Intelligent.

Nachteile:

1. Da zwischen dem Client und dem echten Subjekt ein Proxy-Objekt hinzugefügt wird, können einige Arten von Proxy-Modi dazu führen, dass sich die Geschwindigkeit der Anforderungsverarbeitung verlangsamt. 2. Die Implementierung des Proxy-Modus erfordert zusätzliche Arbeit und die Implementierung einiger Proxy-Modi ist sehr komplex.

Nutzungsszenarien:

Unterteilt nach Verantwortlichkeiten gibt es in der Regel folgende Nutzungsszenarien: 1. Remote-Agent. 2. Virtueller Agent. 3. Copy-on-Write-Agent. 4. Protect-Agent (Schützen oder Zugriff). 5. Cache-Agent. 6. Firewall-Proxy. 7. Synchronisationsagent. 8. Smart Reference-Agent.

Hinweise:

1. Der Unterschied zwischen dem Adaptermuster und dem Adaptermuster: Das Adaptermuster ändert hauptsächlich die Schnittstelle des betrachteten Objekts, während das Proxy-Muster die Schnittstelle des betrachteten Objekts nicht ändern kann Proxy-Klasse. 2. Der Unterschied zwischen dem Dekoratormodus und dem Dekoratormodus: Der Dekoratormodus dient der Verbesserung der Funktion, während der Proxy-Modus sie steuert. Es gibt viele Arten von Proxy-Modi. Die in JS am häufigsten verwendeten sind virtueller Proxy und Caching-Proxy.

Virtueller Proxy implementiert das Vorladen von BildernDer folgende Code verwendet den Proxy-Modus, um das Vorladen von Bildern zu implementieren. Sie können sehen, dass der Proxy-Modus die Bilderstellungs- und Vorladelogik geschickt trennt, das Vorladen jedoch nicht Wenn Sie in Zukunft Bedarf haben, ändern Sie einfach die Anforderungsontologie anstelle des Anforderungs-Proxy-Objekts.

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')

Cache-Proxy implementiert die Produktberechnung

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

Vorschlag: Raten Sie nicht, ob Sie den Proxy-Modus während der Entwicklung verwenden müssen. Wenn Sie der Meinung sind, dass die direkte Verwendung eines Objekts unpraktisch ist Es ist noch nicht zu spät, es zu optimieren.

Verwandte Empfehlungen:

js-Designmuster: Was ist das Strategiemuster? Einführung in das JS-Strategiemuster

JS-Designmuster: Was ist ein Singleton-Muster? Einführung in den js-Singleton-Modus

Das obige ist der detaillierte Inhalt vonjs-Entwurfsmuster: Was ist das Proxy-Muster? Einführung in den js-Proxy-Modus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!