Los anti-patrones, o simplemente ejemplos de código ineficaz, pueden ser contribuyentes muy insidiosos, incluso en el código fuente de desarrolladores experimentados. A veces esto es una consecuencia de establecer una tarea o plazos muy ajustados, a veces falla la falta de atención.
En este artículo te contaré sobre el antipatrón de diseño de árboles de Navidad. La esencia de este anti-patrón radica en el hecho de que en algunos casos, el enfoque imperativo afecta al texto fuente mucho más difícil de entender y mantener. Una complicación provoca la siguiente, y así sucesivamente, hasta que nos damos cuenta de que es más fácil reescribir todo desde cero.
Encuentro este anti-patrón interesante porque se puede conseguir no con un solo cambio, sino con toda una cadena de mejoras relacionadas con el desarrollo del código. Y sí, entendiste bien, nos convencemos a nosotros mismos y al cliente de que el código está mejorando, pero al final obtenemos un árbol de Navidad. Para comprender mejor esto, considere una cascada de tareas, de simples a complejas, e intente rastrear el curso de los juicios que conducen a un código ineficaz.
El nacimiento de un problema
Imaginemos que hay un componente simple que muestra un cierto número: "Contador".
const Counter = ({ value }) => {
return <div>{ value }</div>;
};
"Contador" no debe tomarse literalmente. Es simplemente un modelo simplificado para contrastar la esencia del problema.
Recibimos una tarea para hacerlo más funcional, digamos, después del número, para poner unidades de medida - digits
. El componente ahora se ve así:
const Counter = ({ value, digits }) => {
return <div>{ `${value} ${digits}` }</div>
};
, , : 10 ()
. , :
const Counter = ({ value, digits, type }) => {
const temp = type ? `(${digits})` : digits;
return <div>{ `${value} ${temp}` }</div>
};
, . , «Counter» , . . , — a
, b
c
, y
- f(a, b, c)
, .
, « ». , , . , . , ,
a * b
. ,a + b.
«Counter» , (digits
type
) , . . a * b
, . , , :
, digits
, value
, , a
, . , , . . type
.
... . , , , , .
, , digits
, , , «Counter» . , ...
?
, «Counter» . , , , . digits
type
, b' = f(b)
. :
const getCoveredDigits = (digits) => `(${digits})`;
<Counter
value={value}
digits={getCoveredDigits(digits)}
/>
, :
, f(b)
, . , «Counter».
Por supuesto, al implementar "Counter" cometimos deliberadamente varios errores que a menudo pasan desapercibidos en la producción real. Aunque no existe un modelo de componentes ideal, pero con una descomposición más rentable, es posible reducir la cantidad de texto fuente y, como resultado, aumentar la confiabilidad y escalabilidad general de sus aplicaciones.