In Javascript können Sie mit Proxies bestimmte Objektoperationen abfangen und anpassen. Der Proxy fungiert als Vermittler zwischen dem Objekt und der „realen Welt“. Auf diese Weise können Sie die Grundoperationen eines Objekts erweitern, um komplexere Logik zu implementieren, oder Grundoperationen entsprechend Ihren Anforderungen neu definieren.
Zu den Anwendungsfällen gehören:
Proxy benötigt zwei Parameter:
const target = {
greeting1: "Hello",
greeting2: "Good morning"
}
const handler = {
get(target, prop, receiver) {
return target[prop] + " friends!"
}
}
const proxy = new Proxy(target, handler)
console.log(proxy.greeting1) // Hello friends!
console.log(proxy.greeting2) // Good morning friends!
In diesem Beispiel definieren wir einen Proxy. Das Zielobjekt verfügt über zwei Eigenschaften. Wir definieren einen Handler, der eine Implementierung des get()-Handlers bereitstellt. Die Get-Trap fängt den Zugriff auf jede Eigenschaft des Zielobjekts ab und darin können wir das Verhalten nach Bedarf ändern.
Bei diesem Setup bedeutet das, dass der Handler jedes Mal, wenn wir auf Eigenschaften im Zielobjekt zugreifen, diese abfängt und den von uns implementierten Code ausführt. In unserem Fall nimmt es einfach den Immobilienwert und fügt Freunde hinzu!.
Häufig werden Proxys mit der Reflect-API verwendet. Reflect stellt Methoden mit denselben Namen wie die Proxy-Traps bereit. Wie der Name schon sagt, spiegelt es die Semantik zum Aufrufen der entsprechenden objektinternen Methoden wider.
const target = {
greeting1: "Hello",
greeting2: "Good morning"
}
const handler = {
get(target, prop, receiver) {
return Reflect.get(...arguments) + " friends!"
}
}
const proxy = new Proxy(target, handler)
console.log(proxy.greeting1) // Hello friends!
console.log(proxy.greeting2) // Good morning friends!
Reflect ist für die Verwendung von Proxys nicht erforderlich, aber durch die Verwendung von Reflect können wir sicher sein, dass das Verhalten mit den nativen Javascript-Engine-Operationen übereinstimmt. Es stellt außerdem die Kompatibilität mit zukünftigen Updates sicher, verhindert unbeabsichtigte Nebenwirkungen und vereinfacht den Code. Ohne sie müsste der Entwickler Verhaltensweisen wie Eigenschaftszugriff, Zuweisung, Löschung usw. neu implementieren, was fehleranfällig sein und mit dem nativen Verhalten von Javascript inkonsistent sein kann.
Lassen Sie uns einige Beispiele erstellen, um zu erkunden, was wir mit Proxy tun können.
Nehmen wir in unserem ersten Beispiel an, wir möchten protokollieren, welche Aktionen an einem Objekt ausgeführt werden. Immer wenn wir eine Eigenschaft abrufen, festlegen oder löschen, möchte ich sie auf der Konsole ausdrucken. Dies könnte für Debugging-Zwecke nützlich sein.
const target = {
name: "Damien",
age: 32,
status: "WRITING"
}
const loggerHandler = {
get(target, prop, receiver) {
if (prop in target) {
console.log(`[LOG] Accessing property ${prop}. Current value is ${target[prop]}`)
return Reflect.get(...arguments)
} else {
console.error(`[LOG] Error accessing non-existent property ${prop}`)
}
},
set(target, key, value) {
console.log(`[LOG] Setting property ${key}. New value: ${value}`)
return Reflect.set(...arguments)
},
deleteProperty(target, prop) {
console.warn(`[LOG] Deleting property: ${prop}`)
return Reflect.deleteProperty(...arguments)
}
}
const proxy = new Proxy(target, loggerHandler)
proxy.name // [LOG] Accessing property name. Current value is Damien
proxy.status // [LOG] Accessing property status. Current value is WRITING
proxy.name = "Bob" // [LOG] Setting property name. New value: Bob
proxy.status = "NAPPING" // [LOG] Setting property status. New value: NAPPING
proxy.job = "Developer" // [LOG] Setting property job. New value: Developer
delete proxy.job // [LOG] Deleting property: job
proxy.job // [LOG] Error accessing non-existent property job
Wir haben einen LoggerHandler definiert, der drei grundlegende Operationen neu definiert: Abrufen, Festlegen und Löschen. Für jede Aktion protokollieren wir etwas in der Konsole, das beschreibt, was passiert. Das Schöne am Proxy ist, dass wir nicht jedes Mal die Konsolenanweisung schreiben müssen. Wir interagieren wie immer mit unserem Objekt und der Proxy kümmert sich um das Protokollierungsverhalten. Ziemlich cool, nicht wahr?
In unserem zweiten Beispiel verwenden wir einen Proxy, um Eingabevalidierungen für Formulardaten durchzuführen.
const validationRules = {
name: value => value.length >= 3 || "Name must be at least 3 characters long",
age: value => Number.isInteger(value) || "Age must be a number",
email: value => value.includes('@') || "Enter a valid email"
}
let formData = {
name: "",
age: null,
email: ""
}
const formHandler = {
set(target, key, value) {
if (typeof value === "string") {
value = value.trim()
}
const validationResult = validationRules[key](value)
if (validationResult !== true) {
console.error(`Validation failed for property ${key}: ${validationResult}`)
return false;
}
return Reflect.set(...arguments)
}
}
const formProxy = new Proxy(formData, formHandler)
formProxy.age = "32 years old" // Validation failed for property age: Age must be a number
formProxy.name = "Da" // Validation failed for property name: Name must be at least 3 characters long
formProxy.email = "damcoss mail.com" // Validation failed for property email: Enter a valid email
formProxy.age = 32 // OK
formProxy.name = "Damien" // OK
formProxy.email = "damcoss@mail.com" // OK
Wir definieren hier ein Objekt mit verschiedenen Methoden, mit denen überprüft wird, ob die Werte gültig sind oder nicht. Dann verwenden wir dieselbe Logik. Wir haben unser Zielobjekt formData, das wir als Proxy verwenden möchten. Im formHandler definieren wir die Methode set() neu, um unsere Validierungsregeln auf die Eingabewerte anzuwenden.
Proxys sind in Kombination mit der Reflect-API flexible und leistungsstarke Tools zum Abfangen und Anpassen von Vorgängen an Objekten. Mit ihnen können Sie das Verhalten dynamisch verbessern und steuern. Durch die Verwendung der Reflect-API stellen Sie außerdem sicher, dass das Verhalten mit der Javascript-Engine konsistent ist.
Proxys werden häufig in Bibliotheken und Frameworks verwendet, um erweitertes Verhalten wie reaktive Programmierung, API-Wrapper und Eigenschaftsbeobachtung zu ermöglichen.
Viel Spaß ❤️
Das obige ist der detaillierte Inhalt vonVerständnis der Javascript-Proxys und der Reflect-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
