Proxy-Entwurfsmuster

In meinen vorherigen Blogs habe ich verschiedene kreative Designmuster untersucht, die sich mit Objekterstellungsmechanismen befassen. Jetzt ist es an der Zeit, sich mit strukturellen Entwurfsmustern zu befassen, die sich darauf konzentrieren, wie Objekte und Klassen zusammengesetzt werden, um größere Strukturen zu bilden und sie gleichzeitig flexibel und effizient zu halten. Beginnen wir mit dem Proxy-Entwurfsmuster

Proxy-Entwurfsmuster in JavaScript

Das Proxy-Entwurfsmuster ist ein strukturelles Entwurfsmuster, das ein Objekt bereitstellt, das ein anderes Objekt darstellt. Es fungiert als Vermittler, der den Zugriff auf das reale Objekt steuert und zusätzliches Verhalten wie verzögerte Initialisierung, Protokollierung, Zugriffskontrolle oder Caching hinzufügt, ohne den Code des ursprünglichen Objekts zu ändern.

In JavaScript sind Proxys integrierte Funktionen, die vom Proxy-Objekt bereitgestellt werden und es Ihnen ermöglichen, benutzerdefiniertes Verhalten für grundlegende Vorgänge wie Eigenschaftenzugriff, Zuweisung, Funktionsaufruf usw. zu definieren.

Wann brauchen wir das Proxy-Muster?

Das Proxy-Muster ist besonders nützlich, wenn:

• Verzögerte Initialisierung: Sie möchten die Erstellung eines ressourcenintensiven Objekts verzögern, bis es benötigt wird.
• Zugriffskontrolle: Sie müssen den Zugriff auf ein Objekt kontrollieren, um beispielsweise den unbefugten Zugriff einzuschränken oder Vorgänge basierend auf Bedingungen einzuschränken.
• Protokollierung: Sie möchten Aktionen an einem Objekt protokollieren (z. B. Eigenschaftszugriff oder Methodenaufrufe).
• Caching: Sie möchten das Ergebnis teurer Vorgänge zwischenspeichern, um redundante Berechnungen zu vermeiden.

Komponenten des Proxy-Musters

1. Betreff: Die Schnittstelle, die die gemeinsamen Operationen sowohl für das reale Objekt als auch für den Proxy definiert.
2. RealSubject: Das tatsächliche Objekt, das die eigentliche Arbeit ausführt.
3. Proxy: Der Vermittler, der den Zugriff auf das RealSubject steuert.

Analogie:

Stellen Sie sich vor, Sie haben ein großes Gemälde, das Sie Ihren Gästen zeigen möchten, aber es kostet viel Zeit, es aus einem Lagerraum herauszuholen (weil es schwer ist und Zeit zum Tragen braucht). Anstatt jedes Mal darauf zu warten, entscheiden Sie sich dafür, ein kleines Postkartenbild des Gemäldes zu verwenden, um es ihnen schnell zu zeigen, während sie darauf warten, dass das eigentliche Gemälde abgeholt wird.

In dieser Analogie:

• Das große Gemälde ist das eigentliche Objekt (wie ein Bild, dessen Laden Zeit braucht).
• Die Postkarte ist der Stellvertreter (ein leichter Ersatz, der so lange dasteht, bis das reale Objekt fertig ist).
• Sobald das echte Gemälde fertig ist, zeigen Sie es Ihren Gästen.

Analogie zur realen Welt:

Stellen Sie sich einen Immobilienmakler als Stellvertreter vor. Wenn Sie ein Haus kaufen möchten, besuchen Sie nicht sofort jedes Haus (Laden des realen Objekts). Stattdessen zeigt Ihnen der Immobilienmakler (Proxy) zunächst Fotos und Beschreibungen. Erst wenn Sie zum Kauf bereit sind (d. h. wenn Sie display() aufrufen), arrangiert der Agent einen Hausbesuch (lädt das reale Objekt).

Beispiel aus der Praxis: Laden von Bildern (virtueller Proxy)

Nehmen wir das Beispiel des Ladens von Bildern in einer Webanwendung, bei der wir das Laden des Bildes verzögern möchten, bis der Benutzer es anfordert (Lazy Loading). Ein Proxy kann als Platzhalter fungieren, bis das echte Bild geladen wird.

So können Sie das Proxy-Entwurfsmuster in JavaScript implementieren.

Beispiel: Proxy zum Laden von Bildern

// Step 1: The real object
class RealImage {
  constructor(filename) {
    this.filename = filename;
    this.loadImageFromDisk();
  }

  loadImageFromDisk() {
    console.log(`Loading ${this.filename} from disk...`);
  }

  display() {
    console.log(`Displaying ${this.filename}`);
  }
}

// Step 2: The proxy object
class ProxyImage {
  constructor(filename) {
    this.realImage = null; // no real image yet
    this.filename = filename;
  }

  display() {
    if (this.realImage === null) {
      // load the real image only when needed
      this.realImage = new RealImage(this.filename);
    }
    this.realImage.display(); // display the real image
  }
}

// Step 3: Using the proxy to display the image
const image = new ProxyImage("photo.jpg");
image.display(); // Loads and displays the image
image.display(); // Just displays the image (already loaded)

Erklärung:

1). Das wahre Bild:

• Die RealImage-Klasse repräsentiert das tatsächliche Bild.
• Es nimmt einen Dateinamen als Eingabe und simuliert den zeitaufwändigen Prozess des Ladens des Bildes von der Festplatte (dargestellt durch die Methode „loadImageFromDisk“).
• Nach dem Laden wird die Anzeigemethode verwendet, um das Bild anzuzeigen.

2). Das Proxy-Bild:

• Die ProxyImage-Klasse fungiert als Ersatz für RealImage. Das echte Bild wird nicht sofort geladen.
• Es enthält einen Verweis auf das reale Bild (aber zunächst ist es null, da das reale Bild noch nicht geladen wurde).
• Wenn Sie die Anzeigemethode auf dem Proxy aufrufen, prüft sie, ob das echte Bild geladen wurde. Wenn nicht, wird es zuerst geladen und dann angezeigt.

3). Verwendung:

• Wenn wir eine Instanz von ProxyImage erstellen, wird das eigentliche Bild noch nicht geladen (da es ressourcenintensiv ist).
• Beim ersten Aufruf von display lädt der Proxy das Bild (unter Verwendung der RealImage-Klasse) und zeigt es dann an.
• Beim zweiten Aufruf von display wurde das echte Bild bereits geladen, sodass nur das Bild angezeigt wird, ohne es erneut zu laden.

Das integrierte Proxy-Objekt

Der ES6-Proxy besteht aus einem Proxy-Konstruktor, der ein Ziel und einen Handler als Argumente akzeptiert

const proxy = new Proxy(target, handler)

Ziel stellt hier das Objekt dar, auf das der Proxy angewendet wird, während Handler ein spezielles Objekt ist, das das Verhalten des Proxys definiert.

Das Handler-Objekt enthält eine Reihe optionaler Methoden mit vordefinierten Namen, die als Trap-Methoden bezeichnet werden (zum Beispiel apply,get,set und has), die automatisch aufgerufen werden, wenn die entsprechenden Vorgänge auf der Proxy-Instanz ausgeführt werden.

Lassen Sie uns dies verstehen, indem wir den Rechner mithilfe des integrierten Proxys implementieren

// Step 1: The real object
class RealImage {
  constructor(filename) {
    this.filename = filename;
    this.loadImageFromDisk();
  }

  loadImageFromDisk() {
    console.log(`Loading ${this.filename} from disk...`);
  }

  display() {
    console.log(`Displaying ${this.filename}`);
  }
}

// Step 2: The proxy object
class ProxyImage {
  constructor(filename) {
    this.realImage = null; // no real image yet
    this.filename = filename;
  }

  display() {
    if (this.realImage === null) {
      // load the real image only when needed
      this.realImage = new RealImage(this.filename);
    }
    this.realImage.display(); // display the real image
  }
}

// Step 3: Using the proxy to display the image
const image = new ProxyImage("photo.jpg");
image.display(); // Loads and displays the image
image.display(); // Just displays the image (already loaded)

Das Beste daran ist, den Proxy auf diese Weise zu verwenden:

• Das Proxy-Objekt erbt den Prototyp der ursprünglichen Calculator-Klasse.
• Mutationen werden durch die gesetzte Falle des Proxys vermieden.

Erläuterung des Kodex

1). Prototyp-Vererbung:

• Der Proxy beeinträchtigt nicht den ursprünglichen Prototyp der **Calculator **-Klasse.
• Dies wird bestätigt, indem überprüft wird, ob proxiedCalculator.proto === Calculator.prototype. Das Ergebnis wird wahr sein.

2). Verarbeitung von getOperations:

• Die Get-Trap fängt den Eigenschaftszugriff auf das Proxy-Objekt ab.
• Wir verwenden Reflect.get, um sicher auf Eigenschaften und Methoden des Originalobjekts zuzugreifen.

3). Mutationen verhindern:

Die Set-Trap löst immer dann einen Fehler aus, wenn versucht wird, eine Eigenschaft des Zielobjekts zu ändern. Dies gewährleistet Unveränderlichkeit.

4). Verwendung von Prototypmethoden über den Proxy:

Der Proxy ermöglicht den Zugriff auf Methoden wie Addieren, Subtrahieren, Multiplizieren und Dividieren, die alle im Prototyp des Originalobjekts definiert sind.

Wichtige Punkte, die es hier zu beachten gilt:

• Behält die Prototypenvererbung bei:Der Proxy behält den Zugriff auf alle Prototypmethoden, sodass er sich wie der ursprüngliche Rechner verhält.
• Verhindert Mutation: Die Set-Trap stellt sicher, dass der interne Zustand des Taschenrechnerobjekts nicht unerwartet geändert werden kann.
• Sicherer Zugriff auf Eigenschaften und Methoden: Die Get-Trap stellt sicher, dass nur auf gültige Eigenschaften zugegriffen wird, was die Robustheit verbessert.

Wenn Sie es bis hierher geschafft haben, vergessen Sie nicht, auf „Gefällt mir“ zu klicken und unten einen Kommentar mit Fragen oder Gedanken zu hinterlassen. Ihr Feedback bedeutet mir sehr viel und ich würde gerne von Ihnen hören!

Das obige ist der detaillierte Inhalt vonProxy-Entwurfsmuster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!