Anti-Patterns oder einfach Beispiele für ineffektiven Code können selbst im Quellcode erfahrener Entwickler sehr heimtückische Beiträge leisten. Manchmal ist dies eine Folge der Festlegung einer Aufgabe oder sehr enger Fristen, manchmal schlägt die Unaufmerksamkeit fehl.
In diesem Artikel erzähle ich Ihnen etwas über das Antipattern des Weihnachtsbaumdesigns. Die Essenz dieses Anti-Musters liegt in der Tatsache, dass in einigen Fällen der imperative Ansatz den Quelltext beeinflusst, der viel schwieriger zu verstehen und zu pflegen ist. Eine Komplikation provoziert die nächste und so weiter, bis wir erkennen, dass es einfacher ist, alles von Grund auf neu zu schreiben.
Ich finde dieses Anti-Pattern interessant, weil Sie es nicht mit einer einzigen Änderung erhalten können, sondern mit einer ganzen Reihe von Verbesserungen im Zusammenhang mit der Entwicklung des Codes. Und ja, Sie haben richtig verstanden, wir überzeugen uns und den Kunden, dass der Code besser wird, aber am Ende bekommen wir einen Weihnachtsbaum. Um dies besser zu verstehen, betrachten Sie eine Kaskade von Aufgaben, von einfach bis komplex, und versuchen Sie, den Verlauf von Urteilen zu verfolgen, die zu ineffektivem Code führen.
Die Geburt eines Problems
Stellen wir uns vor, es gibt eine einfache Komponente, die eine bestimmte Zahl anzeigt - "Zähler"
const Counter = ({ value }) => {
return <div>{ value }</div>;
};
"Zähler" sollte nicht wörtlich genommen werden. Es ist einfach ein vereinfachtes Modell, um das Wesentliche des Problems gegenüberzustellen.
Wir haben die Aufgabe erhalten, es funktionsfähiger zu machen, beispielsweise nach der Zahl, Maßeinheiten zu setzen - digits
. Die Komponente sieht nun folgendermaßen aus:
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».
Natürlich haben wir bei der Implementierung von "Counter" absichtlich einige Fehler gemacht, die in der realen Produktion oft unbemerkt bleiben. Es gibt zwar kein ideales Komponentenmodell, aber mit einer rentableren Zerlegung ist es möglich, die Menge an Quelltext zu reduzieren und dadurch die allgemeine Zuverlässigkeit und Skalierbarkeit ihrer Anwendungen zu erhöhen.