Introducción

En Javascript, Proxies le permite capturar operaciones de objetos específicos y personalizarlas. El Proxy actúa como intermediario entre el objeto y el "mundo real". Por lo tanto, puede mejorar las operaciones básicas de un objeto para implementar una lógica más compleja o redefinir las operaciones fundamentales para satisfacer sus necesidades.

Los casos de uso incluyen:

• Registrar accesos a propiedades, útil para depurar
• validar cualquier interacción con un objeto (como la validación de formulario)
• ayuda a aplicar un formato coherente para

El proxy toma dos parámetros:

• objetivo: cuál es el objeto original que desea representar
• handler: un objeto que define las operaciones que interceptarás y cómo redefinirás dichas operaciones

Ejemplo básico

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!

En este ejemplo, definimos un Proxy. El objeto de destino tiene dos propiedades. Definimos un controlador que proporciona una implementación del controlador get(). La trampa get intercepta el acceso a cualquier propiedad del objeto de destino y, dentro de ella, podemos modificar el comportamiento según sea necesario.

Con esta configuración, significa que cada vez que vamos a acceder a las propiedades en el objeto de destino, el controlador lo intercepta y ejecuta el código que implementamos. En nuestro caso, ¡solo toma el valor de la propiedad y agrega amigos!.

Reflejar

A menudo, los servidores proxy se utilizan con la API Reflect. Reflect proporciona métodos con los mismos nombres que las trampas de Proxy. Como su nombre indica, refleja la semántica para invocar los métodos internos del objeto correspondiente.

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!

No es necesario Reflect para usar Proxies, pero usar Reflect nos permite estar seguros de que el comportamiento coincide con las operaciones del motor Javascript nativo. También garantiza la compatibilidad con futuras actualizaciones, evita efectos secundarios no deseados y simplifica el código. Sin él, el desarrollador tendría que volver a implementar comportamientos como el acceso a propiedades, la asignación, la eliminación... que pueden ser propensos a errores e inconsistentes con el comportamiento nativo de Javascript.

Ejemplos

Creemos algunos ejemplos para explorar lo que podemos hacer con Proxy.

Explotación florestal

En nuestro primer ejemplo, digamos que deseamos registrar qué acciones se realizan en un objeto. Cada vez que obtenemos, configuramos o eliminamos una propiedad, quiero imprimirla en la consola. Esto podría resultar útil para fines de depuración.

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

Definimos un loggerHandler que redefine 3 operaciones fundamentales: obtener, configurar y eliminar. Para cada acción, registramos algo en la consola que describe lo que está sucediendo. La belleza del Proxy es que no necesitamos escribir la declaración de la consola cada vez. Interactuamos con nuestro objeto como siempre lo hacemos y el proxy se encarga del comportamiento de registro. Genial, ¿no?

Validaciones de entrada

En nuestro segundo ejemplo, usaremos un proxy para realizar validaciones de entrada para los datos del formulario.

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 = "[email protected]" // OK

Aquí definimos un objeto con diferentes métodos utilizados para validar si los valores son válidos o no. Entonces usamos la misma lógica. Tenemos nuestro objeto de destino formData que queremos representar. En formHandler, redefinimos el método set() para aplicar nuestras reglas de validación en los valores de entrada.

Conclusión

Los proxies, combinados con la API Reflect, son herramientas flexibles y potentes para interceptar y personalizar operaciones sobre objetos. Utilizándolos, puede mejorar y controlar el comportamiento de forma dinámica. Al utilizar la API Reflect, también se asegura de que el comportamiento sea coherente con el motor Javascript.

Los proxies se utilizan a menudo en bibliotecas y marcos para permitir comportamientos avanzados como programación reactiva, envoltorios de API y observación de propiedades.

Diviértete ❤️