Heim > Web-Frontend > js-Tutorial > Verbessern Sie die Kopplung in Ihrem Projekt

Verbessern Sie die Kopplung in Ihrem Projekt

Mary-Kate Olsen
Freigeben: 2024-12-24 22:09:11
Original
943 Leute haben es durchsucht

Hallo zusammen! Dieser Beitrag soll Ihnen dabei helfen, die Verknüpfung der Datentypen Ihres Projekts zu verbessern und sie zuverlässiger und verständlicher zu machen.

TLDR für alle, die es eilig haben: Vermeiden Sie die Wiederholung von Typen und Konstanten, die sich auf dasselbe beziehen, und versuchen Sie, ihnen suggestive Namen zu geben (auch wenn es sich um eine einfache Zeichenfolge oder eine Zahl handelt). Dadurch können Sie Ihren Code später leichter identifizieren, ändern oder entfernen.


Das Problem

Stellen Sie sich vor, Sie entwickeln eine E-Commerce-Website und haben den Produkttyp wie folgt definiert:

export type ProductType = {
  id: string;
  name: string;
  price: number;
};
Nach dem Login kopieren

Bei einem Projekt dieser Art können Sie anhand einfacher Funktionen leicht mehrere Möglichkeiten finden, auf die ID eines Produkts zu verweisen:

  • const getProductById = (products: ProductType[], id: string) => {...};
  • const onProductPress = (productId: string) => {...};

Für fortgeschrittenere Situationen, wie das Speichern der Daten eines Produkts in einem Statusspeicher oder die Übergabe von Requisiten an andere Komponenten in JS Frameworks


Die Probleme

Lassen Sie uns nun das/die Problem(e) mit diesem Ansatz angehen:

  1. Was wäre, wenn die Produkt-ID nicht so einfach und leicht zu merken wäre? Was wäre, wenn es so etwas wie ab12-w35-s48-09 wäre (was beispielsweise „vendor-category-product-variant“ darstellt)?
  2. Was wäre, wenn Sie – und das ist mein zentraler Punkt – den Typ der Produkt-ID in allen Vorkommen Ihres Projekts ändern müssten? Dies kann besonders schwierig sein, wenn Sie beim Verweisen in verschiedenen Dateien unterschiedliche Namen (z. B. Produkt-ID, Produkt-ID, PID oder ID) vergeben. Sie könnten auch nicht einfach nach der Zeichenfolge suchen, da Sie mit Sicherheit viele Vorkommen finden würden, die nichts damit zu tun haben.

Die möglichen Lösungen

Um Problem eins zu beheben, könnten Sie Template Literals Types verwenden, wodurch der Typ der neuen Produkt-ID wie folgt aussehen würde: ${string}-${string}-${string}-${string}. Dies über mehrere Dateien hinweg zu wiederholen wäre jetzt ärgerlich, also könnte man entweder:

  • Erstellen Sie einen benutzerdefinierten Typ für das ID-Feld und verwenden Sie ihn im ProductType:
type ProductIdType = `${string}-${string}-${string}-${string}`
Nach dem Login kopieren

Bei Bedarf können Sie auch unterschiedliche Typen für jede Zeichenfolge erstellen und darauf verweisen oder auf andere verweisen, die Sie zuvor erstellt haben. Schließlich würden Sie den neuen Typ als solchen verwenden:

(productId : ProductIdType) => {...}
Nach dem Login kopieren
  • Oder Sie können auf den ID-Eintrag des ProductType verweisen:
(productId : ProductType['id']) => {...}
Nach dem Login kopieren

Beide Ansätze würden Problem zwei lösen: Wo auch immer Sie ProductIdType oder ProductType['id'] finden würden, würden Sie wissen, dass Sie es mit der ID eines Produkts zu tun haben und wissen, dass Sie diese ersetzen sollten.

Die erste Lösung mag benutzerfreundlicher erscheinen, aber Sie hätten jetzt eine zweiteilige Struktur, bei der Sie einen Typ für das Produkt und einen anderen für die ID haben, die unabhängig voneinander verwendet werden können. Hier ist eine Beispieldarstellung dieser Struktur:

Improving Coupling in your Project

Dies ist zweifellos ein kleineres Problem, aber wenn Sie den ID-Eintrag des ProductType ändern/löschen, würde sich diese Änderung nicht in Ihrem gesamten Projekt widerspiegeln.

Der letzte Ansatz ist jedoch der, den ich normalerweise verfolge, weil er die Kopplung Ihrer Daten erhöht (mangels eines besseren Wortes). Alle Ihre Verweise auf die Produktdaten verweisen jetzt direkt auf den ProductType:

Improving Coupling in your Project


Abschluss

Ich sage nicht, dass Sie immer Typen für alle Ihre Daten erstellen sollten. Immer wenn ich sehe, dass ich Verweise auf denselben Datentyp wiederhole, entscheide ich mich normalerweise für den Zugriff auf das Original, wie beim zweiten Ansatz.

Bonus-Tipp 1:Sie können die gleiche Logik für Konstanten anwenden: Wenn Sie sehen, dass Sie dieselbe magische Zahl oder Zeichenfolge an mehreren Stellen wiederholen, geben Sie ihr am besten eine geeignete Bezeichnung und verwenden Sie sie.

Bonus-Tipp 2:Verwenden Sie „Auswählen“, „Auslassen“ und „Ausschließen“ und andere Dienstprogrammtypen, wenn Sie mehr als einen Eintrag eines Typs auswählen/ausschließen möchten, anstatt sie zu wiederholen.

Das ist alles! Ich hoffe, Ihnen hat mein Beitrag gefallen. Hinterlassen Sie gerne Ihr Feedback zu diesem Thema.

Das obige ist der detaillierte Inhalt vonVerbessern Sie die Kopplung in Ihrem Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage