Helfen Sie der Entwicklung der Website und teilen Sie den Artikel mit Freunden!
Einführung in ES6 Proxy
Der ES6-Proxy befindet sich zwischen dem Code und einem Objekt, das als ES6-Proxy-Site verwendet wird, aber wir können einen Proxy verwenden, um Metaprogrammierungsaktivitäten wie das Abfangen eines Anrufs zum Untersuchen oder Ändern der Eigenschaften eines Objekts mit bestimmten Eigenschaften durchzuführen oder Methoden, die als Funktionen aufgerufen werden, die als Handler mit bestimmten Eigenschaften definiert sind, oder Methoden aufgerufen werden und Funktionen, die im Handler definiert sind, Zugriff auf das Ziel bieten.
Was ist ein ES6-Proxy?
Der ES6-Proxy wird zwischen der Mitte des Codes und einem Objekt platziert.Wir können einen Proxy verwenden, um Metaprogrammierungsaktivitäten wie das Abfangen eines Anrufs zum Untersuchen oder Ändern der Eigenschaften eines Objekts durchzuführen. Wenn es um ES6-Proxys geht, hat man sich an die bestimmte Nomenklatur geh alten, die wie ein Ziel verwendet wird. Der Proxy virtualisiert das ursprüngliche Objekt.
Wie verwende ich Proxys?
Die Proxies sind im Allgemeinen mit den spezifischen Computerbegriffen gemeint, wie Vermittler zwischen den Objekten, mit denen wir kommunizieren können. Dann ist der Proxy-Server mit dem Gerät gemeint, das zwischen dem Webbrowser wie (Chrome, Firefox, Safari, Edge usw.) und dem Webserver wie (Apache, Nginx, IIS usw.) sitzt, während die Webseite sein soll in den Cookies und Historien gespeichert. Die Client-Anforderungen und die Antwortantworten können unter Verwendung des Proxy-Servers modifiziert werden. Es kann gesteigert und effizienter werden, indem häufig besuchte Elemente zwischengespeichert und zahlreichen Benutzern zur Verfügung gestellt werden.
Es hat eine Reihe von Proxy-Trap-Typen, hauptsächlich Get- und Set-Methoden sind die nützlichsten Traps.Die anderen Traps wie Proxy und ergänzen Proxy-Handler-Codes. Ein Proxy ist ein Objekt, das ein anderes Objekt (Ziel) umschließt und die grundlegenden Operationen des Zielobjekts abfängt. Eigenschaftssuche, Zuweisung, Aufzählung und Funktionsaufrufe sind Beispiele für grundlegende Operationen.
Wie funktioniert der ES6-Proxy?
Im Allgemeinen ist das ES6-Modul ein Container für eine Gruppe von JavaScript-Codes, die miteinander verknüpft werden können. Insbesondere die Variablen und Funktionen des Moduls sollten exportiert werden, damit sie von den anderen Dateien aus zugänglich sind. In ES6-Skripten können die Module jedoch nur im strikten Modus verwendet werden. Das bedeutet, dass die Variablen und Funktionen in einem Modul deklariert werden, auf das nicht global zugegriffen werden kann. Hauptsächlich konzentriert es sich auf das Ziel und den Hundeführer; Das Ziel ist das ursprüngliche Objekt, das als Proxy verwendet werden kann, und der Handler ist die Art des Objekts, das definiert werden kann. Die angegebenen Operationen werden stärker abgefangen und die abgefangenen Operationen neu definiert.
Ziel:
Der Proxy virtualisiert das ursprüngliche Objekt. Und dies könnte ein Quell-JavaScript-Objekt und wie die jQuery-Bibliothek, native Objekte wie Arrays oder sogar andere Proxys sein, die auf den Servern verwendet werden können.
Handler:
Ein Objekt, das verwendet werden kann, um das Verh alten des Proxys zu implementieren. Jetzt erstellen wir ein Handler-Objekt, das alle Get-Operationen abfängt.
Fallen:
Wenn bestimmte Eigenschaften oder Methoden aufgerufen werden, werden die Funktionen als Handler definiert und das Angebot kann auf das Ziel zugreifen.
Beispiele für ES6 Proxy
Verschiedene Beispiele sind unten aufgeführt:
Beispiel 1
Code:
Ausgabe:
Im obigen Beispiel haben wir das Proxy-Objekt und das Handler-Konzept verwendet, um Benutzerdaten zu erstellen und zu verarbeiten. Es kann hauptsächlich in das Umhüllen von Objekten und Abfangen von Operationen wie Lesen und Schreiben von Eigenschaften und anderen Funktionen eingeteilt werden. Grundsätzlich behandelt es das Objekt selbst; es ermöglicht die transparente Handhabung von Objekten.
Beispiel 2
Code:
Ausgabe:
Im obigen Beispiel haben wir dasselbe Proxy-Objekt mit allen HTML-Dom-Elementen im Stack verwendet. Der Standardwert ist immer dann, wenn der Eigenschaftsname nicht in der Objekterstellung enth alten ist.Sie wird als Handler-Methode get() verwendet. Hauptsächlich verwenden wir native Import-JavaScript-Objekte, für die der Proxy an alle Benutzeroperationen weitergeleitet wird, die darauf in der Programmierlogik angewendet werden, einschließlich UI- und Backend-Validierungen. Bitte beachten Sie auch, dass, während wir Schleifen-bedingte Anweisungen verwenden, die Javascript-Objekte als No-Op funktionieren und nicht die nativen Browser-Objekte wie DOM-Elemente gemeint sind.
Neuer Proxy zum Abfangen der Operation
Wir können einen Proxy verwenden, um mehrere Benutzervorgänge abzufangen, die hauptsächlich mit den folgenden Methoden verwendet werden, wie:
- get (Eigenschaftswerte abrufen)
- apply (Aufruf einer Funktion)
Aber es führt keine einzelne Operation zum Aufrufen der Methoden durch, die abgefangen werden können. Aus diesem Grund werden Methodenaufrufe in zwei Schritte unterteilt: Zuerst können wir get verwenden, um eine Funktion zu erh alten, und sie dann für bestimmte Operationen anwenden.
Schlussfolgerung
Ein Proxy-Objekt, das Aufrufe „abfängt“ und Benutzer die mehrfachen Operationen ausführen, die an seinem Zielobjekt vorgenommen wurden. Und die anschließend durch die No-Operationen geleitet und eleganter gehandhabt werden kann. Es kann eine undurchdringliche Barriere um das Zielobjekt herum errichten und zu allen Operationen umleiten, die dem Handler zugeordnet sind.