Verständnis der Javascript-Proxys und der Reflect-API

Einführung

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:

• Eigenschaftszugriffe protokollieren, nützlich zum Debuggen
• Validieren Sie jede Interaktion mit einem Objekt (z. B. Formularvalidierung)
• hilft bei der Durchsetzung einer konsistenten Formatierung für

Proxy benötigt zwei Parameter:

• Ziel: Das ist das ursprüngliche Objekt, das Sie als Proxy verwenden möchten
• Handler: ein Objekt, das die Operationen definiert, die Sie abfangen und wie Sie diese Operationen neu definieren werden

Einfaches Beispiel

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!.

Reflektieren

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.

Beispiele

Lassen Sie uns einige Beispiele erstellen, um zu erkunden, was wir mit Proxy tun können.

Protokollierung

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?

Eingabevalidierungen

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.

Abschluss

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!