Bringen Sie Ihnen bei, wie Sie wartbaren JS-Code schreiben

Was ist wartbarer Code?

Wartbarer Code muss die folgenden Merkmale aufweisen.

1. Verständlichkeit – Andere können den Code verwenden und seine Absicht und seinen allgemeinen Pfad verstehen.
2. Intuitive Bedienung – Der Code sollte auf den ersten Blick verständlich sein, egal wie komplex die Operation ist.
3. Anpassungsfähigkeit – Der Code wird so geschrieben, dass bei Datenänderungen kein vollständiger Neuschreiben erforderlich ist.
4. Skalierbarkeit – Die Code-Architektur wurde so konzipiert, dass eine zukünftige Erweiterung der Kernfunktionalität möglich ist.
5. Debuggbarkeit – Wenn etwas schief geht, liefert Ihnen der Code genügend Informationen, um das Problem schnell und direkt zu finden.

Code-Konventionen

Eine einfache Möglichkeit, Ihren Code wartungsfreundlich zu gestalten, besteht darin, einen Satz von Schreibkonventionen für JavaScript-Code zu entwickeln. Aufgrund der Anpassungsfähigkeit von JavaScript sind Codierungskonventionen wichtig. In den folgenden Unterabschnitten wird ein Überblick über die Codierungskonventionen gegeben.

1. Lesbarkeit

Damit Code wartbar ist, muss er zunächst lesbar sein. Die Lesbarkeit hängt größtenteils von der Codeeinrückung ab. Sauber eingerückter Code lässt auf einen Blick erkennen, zu welcher Funktion der Codeblock gehört. Eine sehr gängige Einrückungsgröße sind 4 Leerzeichen. Mittlerweile unterstützen die meisten Editoren auch die einzeilige Formatierung von Code. Ein weiterer Aspekt der Lesbarkeit sind Kommentare. Generell gibt es einige Stellen, die Kommentare benötigen.

• Funktionen und Methoden – Jede Methode oder Funktion sollte einen Kommentar enthalten, der ihren Zweck und den Algorithmus beschreibt, den sie zur Erfüllung der Aufgabe verwenden kann.
• Große Codeblöcke – mehreren Codezeilen, die eine einzelne Aufgabe erfüllen, sollte ein Kommentar vorangestellt werden, der die Aufgabe beschreibt.
• Komplexe Algorithmen: Verwenden Sie einzigartige Methoden zur Lösung eines Problems und erklären Sie die Vorgehensweise mit Anmerkungen.
• Verarbeitung der Hack-Browser-Kompatibilität.

2. Variablen und Funktionen benennen

Die größte Schwierigkeit bei der täglichen Entwicklung besteht in der Benennung, egal ob es sich um die Benennung von Klassen oder einiger Variablen und Methoden handelt. Daher müssen wir uns manchmal bei der Benennung auf Übersetzungssoftware verlassen. Die korrekte Benennung von Variablen und Funktionen ist sehr wichtig, um die Verständlichkeit und Wartbarkeit Ihres Codes zu verbessern. Die Benennungsregeln lauten im Allgemeinen wie folgt:

• Variablennamen sollten Substantive wie „Auto“ oder „Person“ sein.
• Funktionsnamen sollten mit einem Verb beginnen, beispielsweise getName().
• Funktionen, die Boolesche Typen zurückgeben, beginnen normalerweise mit „is“, z. B. „isEnable()“.
• Konstanten sollten in Großbuchstaben geschrieben werden, z. B. MAX_LENGTH.

3. Transparente Variablentypen

Da Variablen in JavaScript lose typisiert sind, kann man leicht vergessen, welchen Datentyp eine Variable enthält. Eine entsprechende Benennung kann dieses Problem bis zu einem gewissen Grad lindern, reicht aber nicht in allen Fällen aus. Es gibt drei weitere Möglichkeiten, variable Daten zur Darstellung von Datentypen zu verwenden.

3.3.1 Initialisierung

Wenn eine Variable definiert wird, sollte sie mit einem Wert initialisiert werden, der angibt, wie sie in Zukunft verwendet werden soll.

//Variablentyp durch Initialisierung angeben var found=false; //Boolescher Typ var count=-1; //Zahlentyp var name=""; //Zeichenfolge var person=null; //Objekt

3.3.2. Variablentypen mit ungarischer Notation angeben

In der ungarischen Notation werden dem Variablennamen ein oder mehrere Zeichen vorangestellt, die den Datentyp angeben. Die traditionellste ungarische Notation in JS verwendet ein einzelnes Zeichen zur Darstellung grundlegender Typen: 0-Objekt, s-Zeichenfolge, i-Ganzzahl, f-Gleitkommazahl, b-Boolescher Typ.

// Ungarische Notation zum Angeben von Datentypen var bFound // Boolean var iCount; // Zahl var sName; // Zeichenfolge var oPerson; // Objekt

Die ungarische Notation hat den Vorteil, dass auch Funktionsparameter verwendet werden können, hat jedoch den Nachteil, dass der Code dadurch etwas unleserlich wird.

3.3.3. Verwenden von Typanmerkungen

Die letzte Möglichkeit, den Typ einer Variablen anzugeben, ist die Verwendung einer Typanmerkung. Typanmerkungen werden rechts neben dem Variablennamen, aber vor der Initialisierung platziert.

// Typannotation zum Festlegen von Typen var gefunden /*Boolean*/ = false;
Var-Anzahl /*int*/ = 10;
Variablenname /*Zeichenfolge*/ = "Tom";
var person /*Objekt*/ = null;

Nachteil: Mehrzeilige Kommentare geraten mit Codeblöcken in Konflikt

Diese drei gängigen Methoden zur Angabe variabler Datentypen haben jeweils ihre eigenen Vor- und Nachteile. Sie können sie anhand Ihres eigenen Projekts evaluieren und dann verwenden. Sie können auch lernen, TypeScript zu verwenden.

Lose Kopplung

Wenn ein Teil einer Anwendung zu stark von einem anderen Teil abhängig ist, ist der Code mitunter zu eng und schwer zu warten. Aufgrund der Web-Anwendungstechnologie gibt es viele Situationen, in denen es zu einer zu engen Kopplung kommen kann. Daher sollten Sie diese Situationen vermeiden und möglichst lose gekoppelten Code beibehalten.

1. HTML/JavaScript entkoppeln

JavaScript direkt in HTML, die Verwendung des <script>-Elements mit Inline-Code oder die Verwendung von HTML-Attributen zum Zuweisen einer Ereignisbehandlungsreihenfolge sind alle zu eng gekoppelt.

Schauen Sie sich den folgenden Code an

<button onclick="doSomeThing()">Klick mich</button>

In diesem Beispiel kann die Schaltfläche gedrückt werden, bevor die Funktion doSomeThing() verfügbar ist, was zu JS-Fehlern führt, da sich alle Änderungen am Schaltflächenverhalten sowohl auf HTML als auch auf JS auswirken und somit die Wartbarkeit beeinträchtigen.

Ebenso enthält js viel HTML

// HTML eng mit JS koppeln Funktion insertMessage(){
  document.getElementById('container').innerHTML='<div>Hallo Welt</div>'
}

Diese Codemethode generiert dynamisch einen Codeblock und fügt ihn in die Seite ein. Es ist oft schwierig, Fehler im Code zu finden.

Durch die Entkopplung von HTML und JavaScript lässt sich beim Debuggen Zeit sparen, die Fehlerquelle lässt sich leichter ermitteln und der Wartungsaufwand verringern: Zum Ändern des Verhaltens sind lediglich Änderungen in der JavaScript-Datei erforderlich, und zum Ändern des Markups sind lediglich Änderungen in der gerenderten Datei erforderlich.

2. Entkoppeln Sie CSS/JavaScript

Eine weitere Webebene ist CSS, das hauptsächlich für die Anzeige der Seite verantwortlich ist. Außerdem sind JavaScript und CSS sehr eng verwandt: Sie basieren beide auf HTML und werden daher häufig zusammen verwendet. Allerdings kann es, wie bei HTML und JavaScript, auch zwischen CSS und JavaScript zu einer zu engen Kopplung kommen. Das häufigste Beispiel für eine enge Kopplung ist die Verwendung von JavaScript zum Ändern einiger Stile, wie folgt:

// Enge Kopplung von CSS an JavaScript element.style.color = "red"; 
element.style.backgroundColor = "blau";

Wenn wir auf diese Art der direkten Änderung des CSS-Stils stoßen, können wir den Stil bequemer steuern, indem wir den Klassennamen des Element-Tags direkt ändern.

3. Entkoppeln Sie Anwendungslogik/Ereignishandler

Jede Webanwendung verfügt normalerweise über mehrere Ereignishandler, die auf zahlreiche unterschiedliche Ereignisse warten. Allerdings achten nur wenige darauf, die Anwendungslogik von den Ereignishandlern zu trennen. Betrachten Sie das folgende Beispiel:

Funktion handleKeyPress(Ereignis) {
        Ereignis = EventUtil.getEvent(Ereignis);
        wenn (event.keyCode == 13) {
            var Ziel = EventUtil.getTarget(Ereignis);
            var Wert = 5 * parseInt(Ziel.Wert);
            wenn (Wert > 10) {
                document.getElementById("Fehlernachricht").style.display = "Block";
            }
        }
    }

Dieser Eventhandler enthält nicht nur die Anwendungslogik, sondern verarbeitet auch Ereignisse. Dieser Ansatz hat zwei Probleme. Erstens gibt es keine andere Möglichkeit, Anwendungslogik auszuführen als über Ereignisse, was das Debuggen erschwert. Was passiert, wenn die erwarteten Ergebnisse nicht eintreten? Bedeutet dies, dass der Ereignishandler nicht aufgerufen wurde oder dass die Anwendungslogik fehlgeschlagen ist? Zweitens: Wenn ein nachfolgendes Ereignis dieselbe Anwendungslogik auslöst, muss der Funktionscode dupliziert oder in eine separate Funktion extrahiert werden. In jedem Fall nehmen Sie mehr Änderungen vor, als eigentlich notwendig sind.

Ein besserer Ansatz besteht darin, die Anwendungslogik und den Ereignishandler zu trennen, sodass jeder seine eigenen Aufgaben übernimmt. Ein Ereignishandler sollte relevante Informationen aus dem Ereignisobjekt extrahieren und diese Informationen an eine Methode übergeben, die die Anwendungslogik verarbeitet. Der vorherige Code könnte beispielsweise wie folgt umgeschrieben werden:

 Funktion validiereWert(Wert) {
        Wert = 5 * parseInt(Wert);
        wenn (Wert > 10) {
            document.getElementById("Fehlernachricht").style.display = "Block";
        }
    }

    Funktion handleKeyPress(Ereignis) {
        Ereignis = EventUtil.getEvent(Ereignis);
        wenn (event.keyCode == 13) {
            var Ziel = EventUtil.getTarget(Ereignis);
            validierenWert(Ziel.Wert);
        }
    }

Einige Prinzipien zur losen Kopplung zwischen Anwendung und Geschäftslogik:

• Übergeben Sie das Ereignisobjekt nicht an andere Methoden. Übergeben Sie nur die erforderlichen Daten vom Ereignisobjekt.
• Jede Aktion, die auf Anwendungsebene ausgeführt werden kann, sollte ohne Ausführung von Ereignishandlern möglich sein.
• Jeder Ereignishandler sollte das Ereignis verarbeiten und die Verarbeitung dann an die Anwendungslogik übergeben.

Wenn Sie diese wenigen Dinge im Hinterkopf behalten, können Sie die Wartbarkeit Ihres Codes erheblich verbessern und es eröffnen sich zahlreiche Möglichkeiten für weitere Tests und Entwicklungen.

Programmierpraxis

Beim Schreiben von wartungsfreundlichem JavaScript geht es nicht nur darum, wie Sie Ihren Code formatieren, sondern auch darum, was Ihr Code tut. An der Erstellung von Web-Anwendungen in Unternehmensumgebungen arbeiten häufig viele Personen gleichzeitig. Das Ziel besteht in diesem Fall darin, sicherzustellen, dass jeder konsistente und unveränderliche Regeln für seine Browserumgebung hat. Daher ist es besser, sich an einige der folgenden Programmierpraktiken zu halten.

1. Respektieren Sie den Objektbesitz

Aufgrund der dynamischen Natur von JavaScript können praktisch alle Elemente jederzeit geändert werden. Die vielleicht wichtigste Programmierpraxis in einer Unternehmensumgebung besteht darin, den Besitz von Objekten zu respektieren. Dies bedeutet, dass Sie keine Objekte ändern können, die Ihnen nicht gehören. Einfach ausgedrückt: Wenn Sie nicht für die Erstellung oder Wartung eines Objekts, seiner Objekte oder seiner Methoden verantwortlich sind, können Sie diese nicht ändern. Genauer gesagt:

• Fügen Sie Instanzen oder Prototypen keine Eigenschaften hinzu.
• Fügen Sie Instanzen oder Prototypen keine Methoden hinzu.
• Definieren Sie vorhandene Methoden nicht neu.

2. Vermeiden Sie globale Variablen

Eng verbunden mit der Achtung des Objekteigentums ist die Vermeidung globaler Variablen und Funktionen, wann immer dies möglich ist. Es geht auch darum, eine konsistente und wartbare Umgebung für die Skriptausführung zu schaffen. Erstellen Sie höchstens eine globale Variable, in der andere Objekte und Funktionen vorhanden sein können. Betrachten Sie das folgende Beispiel:

// Zwei Globale – vermeiden! !
var name = "Nicholas"; 
Funktion sayName(){ 
 Alarm(Name); 
}

Dieser Code enthält zwei globale Variablen: den Variablennamen und die Funktion sayName(). Tatsächlich können Sie ein Objekt erstellen, das beides enthält, wie im folgenden Beispiel gezeigt:

// Eine globale Variable – empfohlen var MyApplication = { 
 Name: "Nikolaus", 
 sageName: function(){ 
 Alarm (dieser Name); 
 } 
};

Dieser umgeschriebene Code führt ein einzelnes globales Objekt, MyApplication, ein, an das sowohl name als auch sayName() angehängt sind. Dadurch werden einige der Probleme beseitigt, die im vorherigen Code vorhanden waren. Erstens überschreibt der Variablenname die Eigenschaft window.name, die zu Konflikten mit anderen Funktionen führen kann. Zweitens trägt er dazu bei, Verwechslungen zwischen Funktionsbereichen zu vermeiden. Der Aufruf von MyApplication.sayName() impliziert logisch, dass etwaige Probleme mit dem Code durch Untersuchen des Codes identifiziert werden können, der MyApplication definiert.

3. Verwenden Sie Konstanten

Zur Definition mittels Konstanten eignen sich folgende Wertetypen:

• Wiederholte Werte – Jeder Wert, der an mehr als einer Stelle verwendet wird, sollte in eine Konstante extrahiert werden. Dadurch wird die Wahrscheinlichkeit von Fehlern begrenzt, die auftreten können, wenn sich ein Wert ändert, der andere jedoch nicht. Hierzu zählen auch CSS-Klassennamen.
• Zeichenfolgen der Benutzeroberfläche – Alle Zeichenfolgen, die dem Benutzer angezeigt werden, sollten extrahiert werden, um die Internationalisierung zu erleichtern.
• URLs – In Webanwendungen können sich Ressourcenstandorte leicht ändern. Daher empfiehlt es sich, alle URLs an einem gemeinsamen Ort zu speichern.
• Jeder Wert, der sich ändern könnte: Wenn Sie einen Literalwert verwenden, sollten Sie sich fragen, ob sich der Wert in Zukunft ändern könnte. Wenn die Antwort „ja“ lautet, sollte der Wert als Konstante extrahiert werden.

Oben finden Sie ausführliche Informationen zum Schreiben von wartbarem JS-Code. Weitere Informationen zum Schreiben von wartbarem JS-Code finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!