Eines der häufigsten Code-Gerüche bei der Entwicklung von JavaScript-Anwendungen ist die übermäßige bedingte Verkettung. In diesem Artikel möchte ich darüber diskutieren, wie diese Fälle durch Architektur und Code verhindert werden können.
Inhaltsverzeichnis
- Einführung
- Bedingte Ketten verstehen
- Das Problem mit bedingten Ketten
- Bedingte Ketten umgestalten
- Bedingte Ketten durch Architektur verhindern
- Best Practices für die Front-End-Entwicklung
- Fazit
Was ist eine bedingte Kette?
Übermäßige bedingte Verkettung ist ein häufiger Codegeruch in JavaScript-Anwendungen. In diesem Artikel wird untersucht, wie diese Fälle durch verbesserte Architektur und Codierungspraktiken verhindert und umgestaltet werden können.
Bedingungsketten sind übermäßig logische Operatoren, die zum Ausdrücken von Bedingungen in Funktionen oder Methoden verwendet werden. Schauen wir uns ein Beispiel mit einer React-Anwendung an:
Wie Sie im obigen Beispiel sehen können, gibt es eine Kette von drei Bedingungen, die ausschließlich die Art und Weise bestimmen, wie dieser Code gerendert werden soll.
Die Bedingungen sind:
- Wenn die Liste der Sportarten Elemente enthält, sollte das Standardelement gerendert werden;
- Wenn der Ladezustand der Komponente wahr ist, sollte ein Ladeskelett gerendert werden;
- Wenn die Sportliste kein Element enthält, sollte ein leerer Zustand gerendert werden.
In diesem Code gibt es zwei Hauptprobleme:
- Wenn wir die Länge eines Arrays überprüfen und den Operator „&&“ verwenden, teilen wir Javascript mit, dass es die Komponente rendern soll, wenn es einen Wert gibt, der sich auf die Länge des Arrays bezieht. Wenn kein Array vorhanden ist, sollte dieser Wert null oder undefiniert sein. Wenn das Array jedoch vorhanden ist und seine Länge Null ist, wird anstelle der Elemente die Zahl Null gerendert, da Sie Javascript auffordern, den mit dem verknüpften Wert darzustellen Array-Länge.
- Es ist nicht erforderlich, eine Kette zu verwenden, um das Rendern dieser beiden Elemente zu steuern. Das Hinzufügen einer Bedingung vor dem Rendern des „Standard“-Zustands der Komponente ist eine elegantere Möglichkeit, mit dieser Situation umzugehen.
Refactoring
Davon abgesehen lautet die überarbeitete Version des obigen Codes:
Dies ist eine der vielen Möglichkeiten, mit bedingten Verkettungen mithilfe der logischen Operatoren von JavaScript umzugehen. Wie Sie im obigen Code sehen können, habe ich einen ungewöhnlichen Ansatz verwendet, um den bedingten Überschuss des Codes zu lösen.
Die !! Der Operator wird in JavaScript verwendet, um einen Wert in einen booleschen Wert umzuwandeln. Es macht sich die Tatsache zunutze, dass JavaScript wahre und falsche Werte hat. Der erste ! Der Operator negiert den Wert und wandelt wahrheitsgemäße Werte in falsche und falsche Werte in wahr um. Der Zweite! negiert es erneut, was zu einer booleschen Darstellung des ursprünglichen Werts führt. Dies wird oft verwendet, um Werte wie Zeichenfolgen, Zahlen oder Objekte in einen booleschen Wert (entweder wahr oder falsch) umzuwandeln, basierend auf ihrer Wahrhaftigkeit oder Falschheit.
Zum Beispiel:
!!„Hallo“ wird als wahr ausgewertet, da nicht leere Zeichenfolgen wahr sind.
!!0 wird als falsch ausgewertet, da 0 falsch ist.
Dies durch architektonische Entscheidungen verhindern
Sie dürfen dies nicht als Regel betrachten, aber in den meisten Fällen, in denen Bedingungsketten erstellt werden, versuchen die überschüssigen Bedingungen, dynamische Werte zu analysieren und zu verarbeiten, denn wenn Sie mit statischen Werten arbeiten, neigt die Implementierung dazu viel einfacher und unkomplizierter sein.
Wenn Sie eine Datenbank modellieren, müssen Sie einige Bedenken hinsichtlich der Abhängigkeiten der Software haben.
Menschen lernen diese Art der Abhängigkeitsstudie normalerweise während ihres IT-Hochschulstudiums, aber ich werde es veranschaulichen.
Es gibt zwei Arten von Abhängigkeiten von Software:
- Funktionale Abhängigkeiten – diese Abhängigkeiten wirken sich direkt auf den Benutzer aus, da es sich um die Funktionen handelt, mit denen die Benutzer interagieren, wie z. B. Schaltflächen, Bildschirme, Eingaben, Formulare usw.
- Nicht-funktionale Abhängigkeiten – diese Abhängigkeiten werden von normalen Benutzern normalerweise nicht bemerkt, da es sich hauptsächlich um Backend-Abhängigkeiten handelt, wie z. B. Fehlerbehandlung, Bedingungen, Geschäftsregeln, Validierungen usw.
Verhinderung übermäßiger Front-End-Kontrolle
Ihr Back-End muss für alle logischen Teile Ihres Systems verantwortlich sein, daher muss der Großteil Ihrer funktionalen Abhängigkeiten von Back-End-Funktionen gehandhabt werden, nicht von Front-End-Bildschirmen oder Benutzerinteraktionen.
Wenn Sie mit der Entwicklung einer neuen Funktion beginnen und verstehen, was sie zum Funktionieren benötigt, z. B. Requisiten, Schnittstellen und Parameter, müssen Sie im Hinterkopf haben, was erforderlich ist, was optional sein wird und was nicht gebraucht.
Sie müssen das obige Beispiel als Beispiel dafür verwenden, was Sie während Ihrer Entwicklungssitzungen nicht tun sollten. Wie Sie sehen können, verfügt diese Schnittstelle nur über optionale Parameter, aber ich bezweifle, dass an diese Komponente nur „Vielleicht“-Variablen angehängt werden.
Sie müssen verstehen, wie Ihre Komponente funktionieren soll, bevor Sie sie entwickeln und viel verwirrenden Code in Ihre Front-End-Anwendung übertragen. Anstatt sich mit vielen Bedingungen auseinanderzusetzen, ist es einfacher, wenn Sie einfach entscheiden, was von der Komponente verwendet wird und was nicht.
Nachdem Sie es sich genauer überlegt haben, werden Sie auf etwas wie Folgendes stoßen:
Jetzt verfügt die Schnittstelle nur noch über erforderliche Parameter, die mit Sicherheit während der gesamten Lebensdauer der Komponente in Ihrer App verwendet werden, und nicht mehr über viele optionale Parameter, die nie wie die Komponente zuvor definiert oder verwendet werden konnten.
Abschluss
Das Verhindern und Refactoring von Bedingungsketten führt zu saubererem, besser wartbarem Code. Indem Sie die Anforderungen Ihrer Komponente verstehen, die Logik gegebenenfalls auf das Back-End verlagern und klare Schnittstellen entwerfen, können Sie den Bedarf an komplexen bedingten Ketten in Ihrem Front-End-Code erheblich reduzieren.
Foto von Samsung Memory auf Unsplash
Das obige ist der detaillierte Inhalt vonBedingte Verkettungen verhindern/umgestalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
