Patrones de Proxy en JavaScript: Intercepción y Validación de Objetos Avanzada

El objeto Proxy de JavaScript es una característica poderosa que permite interceptar y personalizar las operaciones fundamentales de los objetos. Habilita técnicas avanzadas de metaprogramación, ofreciendo un mayor control sobre el comportamiento de los objetos y abriendo posibilidades para patrones de diseño sofisticados. Este artículo explora varios patrones de Proxy, mostrando sus casos de uso en validación, intercepción y modificación de comportamiento dinámico. Profundizaremos en ejemplos prácticos para demostrar cómo los Proxies pueden mejorar la calidad del código, la seguridad y la mantenibilidad en tus proyectos de JavaScript.

Entendiendo el Proxy de JavaScript

En esencia, un objeto Proxy encapsula otro objeto (el objetivo) e intercepta las operaciones realizadas en ese objetivo. Estas intercepciones se manejan mediante trampas, que son métodos que definen el comportamiento personalizado para operaciones específicas como obtener una propiedad, establecer una propiedad o llamar a una función. La API de Proxy proporciona un mecanismo flexible y extensible para modificar el comportamiento predeterminado de los objetos.

Conceptos Clave

• Objetivo: El objeto original que el Proxy encapsula.
• Manejador: Un objeto que contiene los métodos de trampa. Cada trampa corresponde a una operación específica.
• Trampas: Métodos dentro del manejador que interceptan y personalizan las operaciones del objeto. Las trampas comunes incluyen get, set, apply y construct.

Creando un Proxy

Para crear un Proxy, usas el constructor Proxy, pasando el objeto objetivo y el objeto manejador como argumentos:

            const target = {};
const handler = {
 get: function(target, property, receiver) {
 console.log(`Obteniendo propiedad: ${property}`);
 return Reflect.get(target, property, receiver);
 }
};

const proxy = new Proxy(target, handler);

proxy.name = "John"; // Registra: Obteniendo propiedad: name
console.log(proxy.name); // Registra: Obteniendo propiedad: name, luego John

            

              
                Copy
              
            
          

Trampas Comunes de Proxy

Los Proxies ofrecen una gama de trampas para interceptar diversas operaciones. Aquí están algunas de las trampas más comúnmente utilizadas:

• get(target, property, receiver): Intercepta el acceso a la propiedad.
• set(target, property, value, receiver): Intercepta la asignación de la propiedad.
• has(target, property): Intercepta el operador in.
• deleteProperty(target, property): Intercepta el operador delete.
• apply(target, thisArg, argumentsList): Intercepta las llamadas a funciones.
• construct(target, argumentsList, newTarget): Intercepta el operador new.
• getPrototypeOf(target): Intercepta el método Object.getPrototypeOf().
• setPrototypeOf(target, prototype): Intercepta el método Object.setPrototypeOf().
• isExtensible(target): Intercepta el método Object.isExtensible().
• preventExtensions(target): Intercepta el método Object.preventExtensions().
• getOwnPropertyDescriptor(target, property): Intercepta el método Object.getOwnPropertyDescriptor().
• defineProperty(target, property, descriptor): Intercepta el método Object.defineProperty().
• ownKeys(target): Intercepta los métodos Object.getOwnPropertyNames() y Object.getOwnPropertySymbols().

Patrones de Proxy

Ahora, exploremos algunos patrones de Proxy prácticos y sus aplicaciones:

1. Proxy de Validación

Un Proxy de Validación impone restricciones a las asignaciones de propiedades. Intercepta la trampa set para validar el nuevo valor antes de permitir que la asignación continúe.

Ejemplo: Validar la entrada del usuario en un formulario.

            const user = {};

const validator = {
 set: function(target, property, value) {
 if (property === 'age') {
 if (!Number.isInteger(value) || value < 0 || value > 120) {
 throw new Error('Edad inválida. La edad debe ser un entero entre 0 y 120.');
 }
 }
 target[property] = value;
 return true; // Indica éxito
 }
};

const proxy = new Proxy(user, validator);

proxy.name = 'Alice';
proxy.age = 30;

console.log(user);

try {
 proxy.age = 'inválido'; // Lanza un error
} catch (error) {
 console.error(error.message);
}

            

              
                Copy
              
            
          

En este ejemplo, la trampa set verifica si la propiedad age es un entero entre 0 y 120. Si la validación falla, se lanza un error, impidiendo que se asigne el valor inválido.

Ejemplo Global: Este patrón de validación es esencial para garantizar la integridad de los datos en aplicaciones globales donde la entrada del usuario puede provenir de diversas fuentes y culturas. Por ejemplo, la validación de códigos postales puede variar significativamente entre países. Un proxy de validación puede adaptarse para admitir diferentes reglas de validación según la ubicación del usuario.

            const address = {};

const addressValidator = {
 set: function(target, property, value) {
 if (property === 'postalCode') {
 // Ejemplo: Asumiendo una validación simple de código postal de EE. UU.
 if (!/^[0-9]{5}(?:-[0-9]{4})?$/.test(value)) {
 throw new Error('Código postal de EE. UU. inválido.');
 }
 }
 target[property] = value;
 return true;
 }
};

const addressProxy = new Proxy(address, addressValidator);

addressProxy.postalCode = "12345-6789"; // Válido

try {
 addressProxy.postalCode = "abcde"; // Inválido
} catch(e) {
 console.log(e);
}

// Para una aplicación más internacional, usarías una biblioteca de validación más sofisticada
// que podría validar códigos postales según el país del usuario.

            

              
                Copy
              
            
          

2. Proxy de Registro

Un Proxy de Registro intercepta el acceso y la asignación de propiedades para registrar estas operaciones. Es útil para depuración y auditoría.

Ejemplo: Registrar el acceso y la modificación de propiedades.

            const data = {
 value: 10
};

const logger = {
 get: function(target, property) {
 console.log(`Obteniendo propiedad: ${property}`);
 return target[property];
 },
 set: function(target, property, value) {
 console.log(`Estableciendo propiedad: ${property} a ${value}`);
 target[property] = value;
 return true;
 }
};

const proxy = new Proxy(data, logger);

console.log(proxy.value); // Registra: Obteniendo propiedad: value, luego 10
proxy.value = 20; // Registra: Estableciendo propiedad: value a 20

            

              
                Copy
              
            
          

Las trampas get y set registran la propiedad a la que se accede o se modifica, proporcionando un rastro de las interacciones del objeto.

Ejemplo Global: En una corporación multinacional, los proxies de registro se pueden usar para auditar el acceso y las modificaciones de datos realizadas por empleados en diferentes ubicaciones. Esto es crucial para fines de cumplimiento y seguridad. Las zonas horarias pueden necesitar ser consideradas en la información de registro.

            const employeeData = {
 name: "John Doe",
 salary: 50000
};

const auditLogger = {
 get: function(target, property) {
 const timestamp = new Date().toISOString();
 console.log(`${timestamp} - [GET] Accediendo a la propiedad: ${property}`);
 return target[property];
 },
 set: function(target, property, value) {
 const timestamp = new Date().toISOString();
 console.log(`${timestamp} - [SET] Estableciendo la propiedad: ${property} a ${value}`);
 target[property] = value;
 return true;
 }
};

const proxiedEmployee = new Proxy(employeeData, auditLogger);

proxiedEmployee.name; // Registra la marca de tiempo y el acceso a 'name'
proxiedEmployee.salary = 60000; // Registra la marca de tiempo y la modificación de 'salary'
            

              
                Copy
              
            
          

3. Proxy de Solo Lectura

Un Proxy de Solo Lectura impide la asignación de propiedades. Intercepta la trampa set y lanza un error si se intenta modificar una propiedad.

Ejemplo: Hacer un objeto inmutable.

            const config = {
 apiUrl: 'https://api.example.com'
};

const readOnly = {
 set: function(target, property, value) {
 throw new Error(`No se puede establecer la propiedad: ${property}. El objeto es de solo lectura.`);
 }
};

const proxy = new Proxy(config, readOnly);

console.log(proxy.apiUrl);

try {
 proxy.apiUrl = 'https://newapi.example.com'; // Lanza un error
} catch (error) {
 console.error(error.message);
}

            

              
                Copy
              
            
          

Cualquier intento de establecer una propiedad en el proxy resultará en un error, asegurando que el objeto permanezca inmutable.

Ejemplo Global: Este patrón es útil para proteger archivos de configuración que no deben modificarse en tiempo de ejecución, especialmente en aplicaciones distribuidas globalmente. Modificar accidentalmente la configuración en una región puede afectar a todo el sistema.

            const globalSettings = {
 defaultLanguage: "en",
 currency: "USD",
 timeZone: "UTC"
};

const immutableHandler = {
 set: function(target, property, value) {
 throw new Error(`No se puede modificar la propiedad de solo lectura: ${property}`);
 }
};

const immutableSettings = new Proxy(globalSettings, immutableHandler);

console.log(immutableSettings.defaultLanguage); // muestra 'en'

// Intentar cambiar un valor lanzará un error
// immutableSettings.defaultLanguage = "fr"; // lanza Error: No se puede modificar la propiedad de solo lectura: defaultLanguage
            

              
                Copy
              
            
          

4. Proxy Virtual

Un Proxy Virtual controla el acceso a un recurso que puede ser costoso de crear o recuperar. Puede retrasar la creación del recurso hasta que realmente se necesite.

Ejemplo: Carga perezosa de una imagen.

            const image = {
 display: function() {
 console.log('Mostrando imagen');
 }
};

const virtualProxy = {
 get: function(target, property) {
 if (property === 'display') {
 console.log('Creando imagen...');
 const realImage = {
 display: function() {
 console.log('Mostrando imagen real');
 }
 };
 target.display = realImage.display;
 return realImage.display;
 }
 return target[property];
 }
};

const proxy = new Proxy(image, virtualProxy);

// La imagen no se crea hasta que se llama a display.
proxy.display(); // Registra: Creando imagen..., luego Mostrando imagen real

            

              
                Copy
              
            
          

El objeto de imagen real solo se crea cuando se llama al método display, evitando el consumo innecesario de recursos.

Ejemplo Global: Considere un sitio web de comercio electrónico global que sirve imágenes de productos. Usando un Proxy Virtual, las imágenes se pueden cargar solo cuando son visibles para el usuario, optimizando el uso del ancho de banda y mejorando los tiempos de carga de la página, especialmente para los usuarios con conexiones a Internet lentas en diferentes regiones.

            const product = {
 loadImage: function() {
 console.log("Cargando imagen de alta resolución...");
 // Simula la carga de una imagen grande
 setTimeout(() => {
 console.log("Imagen cargada");
 this.displayImage();
 }, 2000);
 },
 displayImage: function() {
 console.log("Mostrando la imagen");
 }
};

const lazyLoadProxy = {
 get: function(target, property) {
 if (property === "displayImage") {
 // En lugar de cargar inmediatamente, retrasa la carga
 console.log("Solicitud para mostrar la imagen recibida. Cargando...");
 target.loadImage();
 return function() { /* Intencionalmente vacío */ }; // Retorna una función vacía para evitar la ejecución inmediata
 }
 return target[property];
 }
};

const proxiedProduct = new Proxy(product, lazyLoadProxy);

// Llamar a displayImage desencadena el proceso de carga perezosa
proxiedProduct.displayImage();
            

              
                Copy
              
            
          

5. Proxy Revocable

Un Proxy Revocable te permite revocar el proxy en cualquier momento, haciéndolo inutilizable. Esto es útil para escenarios sensibles a la seguridad donde necesitas controlar el acceso a un objeto.

Ejemplo: Otorgar acceso temporal a un recurso.

            const target = {
 secret: 'Este es un secreto'
};

const handler = {
 get: function(target, property) {
 console.log('Accediendo a la propiedad secreta');
 return target[property];
 }
};

const { proxy, revoke } = Proxy.revocable(target, handler);

console.log(proxy.secret); // Registra: Accediendo a la propiedad secreta, luego Este es un secreto

revoke();

try {
 console.log(proxy.secret); // Lanza un TypeError
} catch (error) {
 console.error(error.message); // Registra: No se puede realizar 'get' en un proxy que ha sido revocado
}

            

              
                Copy
              
            
          

El método Proxy.revocable() crea un proxy revocable. Llamar a la función revoke() hace que el proxy sea inutilizable, impidiendo el acceso posterior al objeto objetivo.

Ejemplo Global: En un sistema distribuido globalmente, podrías usar un proxy revocable para otorgar acceso temporal a datos confidenciales a un servicio que se ejecuta en una región específica. Después de un cierto tiempo, el proxy se puede revocar para evitar el acceso no autorizado.

            const sensitiveData = {
 apiKey: "CLAVE_SUPER_SECRETA"
};

const handler = {
 get: function(target, property) {
 console.log("Accediendo a datos sensibles");
 return target[property];
 }
};

const { proxy: dataProxy, revoke: revokeAccess } = Proxy.revocable(sensitiveData, handler);

// Permitir acceso durante 5 segundos
setTimeout(() => {
 revokeAccess();
 console.log("Acceso revocado");
}, 5000);

// Intento de acceder a los datos
console.log(dataProxy.apiKey); // Registra la clave API

// Después de 5 segundos, esto lanzará un error
setTimeout(() => {
 try {
 console.log(dataProxy.apiKey); // Lanza: TypeError: No se puede realizar 'get' en un proxy que ha sido revocado
 } catch (error) {
 console.error(error);
 }
}, 6000);

            

              
                Copy
              
            
          

6. Proxy de Conversión de Tipos

Un Proxy de Conversión de Tipos intercepta el acceso a las propiedades para convertir automáticamente el valor devuelto a un tipo específico. Esto puede ser útil para trabajar con datos de diferentes fuentes que pueden tener tipos inconsistentes.

Ejemplo: Convertir valores de cadena a números.

            const data = {
 price: '10.99',
 quantity: '5'
};

const typeConverter = {
 get: function(target, property) {
 const value = target[property];
 if (typeof value === 'string' && !isNaN(Number(value))) {
 return Number(value);
 }
 return value;
 }
};

const proxy = new Proxy(data, typeConverter);

console.log(proxy.price + 1); // Registra: 11.99 (número)
console.log(proxy.quantity * 2); // Registra: 10 (número)

            

              
                Copy
              
            
          

La trampa get verifica si el valor de la propiedad es una cadena que se puede convertir en un número. Si es así, convierte el valor a un número antes de devolverlo.

Ejemplo Global: Al tratar con datos provenientes de API con diferentes convenciones de formato (por ejemplo, diferentes formatos de fecha o símbolos de moneda), un Proxy de Conversión de Tipos puede garantizar la consistencia de los datos en toda tu aplicación, independientemente de la fuente. Por ejemplo, manejar diferentes formatos de fecha y convertirlos todos al formato ISO 8601.

            const apiData = {
 dateUS: "12/31/2023",
 dateEU: "31/12/2023"
};

const dateFormatConverter = {
 get: function(target, property) {
 let value = target[property];
 if (property.startsWith("date")) {
 // Intento de convertir los formatos de fecha de EE. UU. y la UE a ISO 8601
 if (property === "dateUS") {
 const [month, day, year] = value.split("/");
 value = `${year}-${month}-${day}`;
 } else if (property === "dateEU") {
 const [day, month, year] = value.split("/");
 value = `${year}-${month}-${day}`;
 }
 return value;
 }
 return value;
 }
};

const proxiedApiData = new Proxy(apiData, dateFormatConverter);

console.log(proxiedApiData.dateUS); // Muestra: 2023-12-31
console.log(proxiedApiData.dateEU); // Muestra: 2023-12-31
            

              
                Copy
              
            
          

Mejores Prácticas para Usar Proxies

• Usa Proxies con Criterio: Los Proxies pueden agregar complejidad a tu código. Úsalos solo cuando proporcionen beneficios significativos, como una mejor validación, registro o control sobre el comportamiento de los objetos.
• Considera el Rendimiento: Las trampas de Proxy pueden introducir sobrecarga. Perfila tu código para asegurar que los Proxies no impacten negativamente en el rendimiento, especialmente en secciones críticas para el rendimiento.
• Maneja los Errores con Gracia: Asegúrate de que tus métodos de trampa manejen los errores de forma adecuada, proporcionando mensajes de error informativos cuando sea necesario.
• Usa la API Reflect: La API Reflect proporciona métodos que reflejan el comportamiento predeterminado de las operaciones de objetos. Usa los métodos Reflect dentro de tus métodos de trampa para delegar al comportamiento original cuando sea apropiado. Esto asegura que tus trampas no rompan la funcionalidad existente.
• Documenta tus Proxies: Documenta claramente el propósito y el comportamiento de tus Proxies, incluyendo las trampas que se usan y las restricciones que se imponen. Esto ayudará a otros desarrolladores a entender y mantener tu código.

Conclusión

Los Proxies de JavaScript son una herramienta poderosa para la manipulación e intercepción avanzada de objetos. Al entender y aplicar varios patrones de Proxy, puedes mejorar la calidad del código, la seguridad y la mantenibilidad. Desde la validación de la entrada del usuario hasta el control de acceso a recursos sensibles, los Proxies ofrecen un mecanismo flexible y extensible para personalizar el comportamiento de los objetos. A medida que explores las posibilidades de los Proxies, recuerda usarlos con criterio y documentar tu código a fondo.

Los ejemplos proporcionados demuestran cómo usar los Proxies de JavaScript para resolver problemas del mundo real en un contexto global. Al comprender y aplicar estos patrones, puedes crear aplicaciones más robustas, seguras y mantenibles que satisfagan las necesidades de una base de usuarios diversa. Recuerda siempre considerar las implicaciones globales de tu código y adaptar tus soluciones a los requisitos específicos de diferentes regiones y culturas.