Les anti-patterns, ou simplement des exemples de code inefficace, peuvent être des contributeurs très insidieux, même dans le code source de développeurs chevronnés. Parfois, c'est une conséquence de la définition d'une tâche ou de délais très serrés, parfois l'inattention échoue.
Dans cet article, je vais vous parler de l'anti-modèle de conception d'arbre de Noël. L'essence de cet anti-pattern réside dans le fait que dans certains cas, l'approche impérative affecte le texte source beaucoup plus difficile à comprendre et à maintenir. Une complication provoque la suivante, et ainsi de suite, jusqu'à ce que nous nous rendions compte qu'il est plus facile de tout réécrire à partir de zéro.
Je trouve cet anti-pattern intéressant car vous pouvez l'obtenir non pas avec un seul changement, mais avec toute une chaîne d'améliorations liées au développement du code. Et oui, vous avez bien compris, nous nous convaincons nous-mêmes et le client que le code s'améliore, mais à la fin nous obtenons un arbre de Noël. Pour mieux comprendre cela, envisagez une cascade de tâches, du plus simple au plus complexe, et essayez de retracer le cours des jugements menant à un code inefficace.
La naissance d'un problème
Imaginons qu'il existe un composant simple qui affiche un certain nombre - "Compteur"
const Counter = ({ value }) => {
return <div>{ value }</div>;
};
«Contre» ne doit pas être pris au pied de la lettre. Il s'agit simplement d'un modèle simplifié pour contraster l'essence du problème.
Nous avons reçu une tâche pour le rendre plus fonctionnel, disons, après le nombre, de mettre des unités de mesure - digits
. Le composant ressemble maintenant à ceci:
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».
Bien sûr, lors de la mise en œuvre de "Counter", nous avons délibérément commis plusieurs erreurs qui passent souvent inaperçues dans la production réelle. Bien qu'il n'y ait pas de modèle de composant idéal, mais avec une décomposition plus rentable, il est possible de réduire la quantité de texte source et, par conséquent, d'augmenter la fiabilité globale et l'évolutivité de leurs applications.