Articles

Mantener el Código SECO

Mantener el Código Seco Dentro de un Componente

La primera vez que me di cuenta de que no estaba manteniendo el código SECO fue cuando tuve que hacer un formulario de inicio de sesión. El resumen a continuación muestra el código de mi formulario de inicio de sesión.

Formulario de inicio de Sesión No SECA

Este es un formulario genérico de dónde tienes que introducir tu email y contraseña. handleChange es la función de devolución de llamada que hace del formulario un componente controlado.

Si no está familiarizado con un componente controlado, es esencialmente donde los valores del componente React son los mismos que los que se muestran en el DOM, adhiriéndose al principio de la fuente única de la verdad.

¿Puede encontrar dónde el código puede no estar SECO?

Sugerencia: Eche un vistazo a los atributos input.

Si echa un vistazo a los atributos input y las instrucciones switch/case, las cadenas «correo electrónico» y «contraseña» se repiten.

Si eliminó accidentalmente una letra de esas cadenas, el código seguirá compilándose, pero ahora eso haría que la depuración fuera una pesadilla cuando necesite enviar los valores de correo electrónico y contraseña al back-end.

Además, ¿qué pasaría si decidiera cambiar mi formulario de inicio de sesión de manera que en lugar de usar el correo electrónico como credencial, quisiera usar un nombre de usuario en su lugar?

Ahora, necesito encontrar todos los lugares donde aparece » correo electrónico «y cambiarlo a»nombre de usuario». Usted podría estar pensando: «Espere, mi editor de texto puede encontrar todas las instancias de» nombre «y puedo reemplazarlo todo con» nombre de usuario » y llamarlo un día.»

Y diría que tiene razón, pero no aborda el problema de los errores accidentales mencionados en el párrafo anterior.

Entonces, ¿cómo puede este formulario de inicio de sesión estar SECO? Puede guardar las cadenas repetidas en una constante.

const EMAIL = "email"
const PASSWORD = "password"

Esto canaliza todas las instancias de esas cadenas en una única fuente de verdad, una constante. Tenga en cuenta que las constantes están en mayúscula en función de la convención.

Así que ahora, si reemplaza todas las cadenas de» correo electrónico «y» contraseña » con sus respectivas constantes, el código se verá como la esencia a continuación.

Registro en Formulario SECO

¿Cómo funciona este adjudicar el tema de los errores accidentales? Si comete un error con el nombre de la constante (por ejemplo, EMAIL a EMAL), JavaScript tendrá un error de compilación, ya que la constante con nombre incorrecto no está definida.

Si comete un error en la cadena, o en el valor de la constante, puede identificar exactamente dónde está el error porque solo hay una línea donde se declara ese valor. Esto ahorra tiempo y esfuerzo buscando a fondo a través de su código posibles errores menores.