Introdução

Em Javascript, Proxies permite interceptar operações de objetos específicos e personalizá-las. O Proxy atua como intermediário entre o objeto e o “mundo real”. Assim, você pode aprimorar as operações básicas de um objeto para implementar uma lógica mais complexa ou redefinir operações fundamentais para atender às suas necessidades.

Os casos de uso incluem:

• acessos de propriedades de log, úteis para depuração
• validar qualquer interação com um objeto (como validação de formulário)
• ajuda a impor formatação consistente para

O proxy usa dois parâmetros:

• target: qual é o objeto original que você deseja proxy
• handler: um objeto que define as operações que você irá interceptar e como você irá redefinir essas operações

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

Neste exemplo, definimos um Proxy. O objeto de destino possui duas propriedades. Definimos um manipulador que fornece uma implementação do manipulador get(). A armadilha get intercepta o acesso a qualquer propriedade do objeto alvo e, dentro dela, podemos modificar o comportamento conforme necessário.

Com esta configuração, significa que toda vez que acessarmos propriedades no objeto de destino, o manipulador o interceptará e executará o código que implementamos. No nosso caso, basta pegar o valor do imóvel e adicionar amigos!.

Refletir

Muitas vezes, os proxies são usados ​​com a API Reflect. Reflect fornece métodos com os mesmos nomes das armadilhas Proxy. Como o próprio nome indica, ele reflete a semântica para invocar os métodos internos do objeto correspondente.

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 não é necessário para usar Proxies, mas usar Reflect nos permite ter certeza de que o comportamento corresponde às operações nativas do mecanismo Javascript. Também garante compatibilidade com atualizações futuras, evita efeitos colaterais indesejados e simplifica o código. Sem ele, o desenvolvedor teria que reimplementar comportamentos como acesso a propriedades, atribuição, exclusão... que podem ser propensos a erros e inconsistentes com o comportamento nativo do Javascript.

Exemplos

Vamos construir alguns exemplos para explorar o que podemos fazer com Proxy.

Registro

Em nosso primeiro exemplo, digamos que desejamos registrar quais ações são executadas em um objeto. Sempre que obtemos, definimos ou excluímos uma propriedade, quero imprimi-la no console. Isso pode ser útil para fins de depuração.

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 um loggerHandler que redefine 3 operações fundamentais: obter, definir e excluir. Para cada ação, registramos algo no console descrevendo o que está acontecendo. A beleza do Proxy é que não precisamos escrever a instrução do console todas as vezes. Interagimos com nosso objeto como sempre fazemos, e o proxy cuida do comportamento do log. Muito legal, não?

Validações de entrada

Em nosso segundo exemplo, usaremos um proxy para realizar validações de entrada para dados de formulário.

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

Definimos aqui um objeto com diferentes métodos usados ​​para validar se os valores são válidos ou não. Então, usamos a mesma lógica. Temos nosso objeto de destino formData que queremos proxy. No formHandler, redefinimos o método set() para aplicar nossas regras de validação nos valores de entrada.

Conclusão

Proxies, combinados com a API Reflect, são ferramentas flexíveis e poderosas para interceptar e personalizar operações em objetos. Usando-os, você pode aprimorar e controlar o comportamento de forma dinâmica. Ao usar a API Reflect, você também garante que o comportamento seja consistente com o mecanismo Javascript.

Os proxies são frequentemente usados ​​em bibliotecas e estruturas para permitir comportamentos avançados, como programação reativa, wrappers de API e observação de propriedades.

Divirta-se ❤️