Refleja tu lógica mantenible con JavaScript

Aprende a usar Reflect para escribir código claro con proxies y sus trampas. Verás cómo implementar un P model que sincroniza el valor de un input con tu data, y cómo evitar errores frecuentes al modificar propiedades con la trampa de set. La prioridad: legibilidad y mantenimiento del código.

¿Qué es Reflect y por qué hace más legible el código con proxies?

Reflect es el “espejo” de las trampas de un Proxy: expone las mismas operaciones con una sintaxis explícita y ordenada. Así, en lugar de mezclar operadores o accesos directos, haces visible qué trampa ejecutas. Las listas de trampas en Proxy y en Reflect coinciden, por eso trabajan de la mano. La meta es clara: código legible antes que código “inteligente”.

¿Qué trampas existen y sus equivalentes en Reflect?

• Acceso a propiedad con get: explícitalo con Reflect.get(target, name).
• Escritura con set: usa Reflect.set(target, name, value).
• Borrado con deleteProperty: usa Reflect.deleteProperty(target, prop).
• Búsqueda con has: usa Reflect.has(obj, prop).
• Llamada con apply: evita la invocación directa y usa la trampa en Reflect para dejar clara la intención.

Idea clave: con Reflect sabes exactamente qué trampa se ejecuta, lo que hace el flujo más fácil de seguir.

¿Cómo crear un P model que sincronice inputs con data?

El P model vincula el valor del input con tu objeto de data. En el mount, se seleccionan los elementos con atributo "P model", se lee la propiedad a enlazar con getAttribute("P model") y se ejecuta la función P model pasando: el elemento, la información reactiva (el proxy) y el nombre de la propiedad.

¿Qué parámetros y efectos tiene P model?

• Parámetros: element, target y name.
• Lectura inicial: el P model asigna al value del input lo que haya en target[name].
• Escritura reactiva: agrega un event listener de input y actualiza data[name] con element.value.

Ejemplo de flujo básico:

// lectura
element.value = target[name]

// escritura
element.addEventListener('input', () => {
  data[name] = element.value
})

Punto importante: el valor en pantalla cambia al escribir, pero si no reaccionas a los cambios, la presentación no se actualiza automáticamente. La reactividad se aborda después.

¿Cómo usar Reflect.get, Reflect.set y Reflect.has para evitar errores?

Al leer propiedades en trampas, usa Reflect.get(target, name) para dejar claro que ejecutas la trampa de get. Para borrar o buscar propiedades, Reflect.deleteProperty(...) y Reflect.has(...) hacen el código más predecible.

¿Qué error común resuelve Reflect en set?

• Problema: al modificar con set, a veces hay un get implícito y JavaScript espera un return.
• Intento básico: Reflect.set(target, name, value) puede seguir fallando si el objeto real a actualizar es data.
• Solución clara: usa Reflect.set(data, name, value) dentro de la trampa de set.
• Consejo: evitar return en setters como “parche”; lo ideal es usar Reflect para que la trampa haga la operación correcta.

Ejemplo orientativo de la trampa de set:

set(target, name, value) {
  console.log('Modificando')
  return Reflect.set(data, name, value)
}

¿Cómo mejorar la legibilidad del acceso y la búsqueda?

• Reemplaza accesos directos por Reflect.get(target, name).
• Cambia condiciones con operador in por Reflect.has(obj, prop).
• Sustituye borrados con delete obj.prop por Reflect.deleteProperty(obj, 'prop').

Ventaja: el flujo de lecturas, escrituras y borrados queda explícito, y es más simple de depurar y mantener.

¿Te gustaría comentar cómo enlazas tu data con la presentación o qué patrones de reactividad usas?