ebody: Übersicht, Durchblick bzgl. Code behalten

Hallo,

ich habe vor ein paar Monaten ein privates Projekt begonnen, was ich objektorient programmiere. Bisher habe ich immer ohne Klassen und nur mit Funktionen "programmiert", was die meisten wohl als Spaghetticode bezeichnen würden.

Jetzt nach ca. 3 Monaten gucke ich mir den Code nochmal an (knapp 750 Codezeilen) und versuche wieder rein zu finden und das Projekt fortzuführen. Es ist eine .js Datei mit 3 Klassen, Vererbung und einigen Funktionen, die diese Klassen nutzen. Aber mir fällt es wirklich schwer meinen eigenen Code nachvollziehen zu können.

Was es alles gibt, Zusammenhänge u.a. Das liegt mit Sicherheit an der fehlenden Routine beim Programmieren, aber ich überlege jetzt wie ich zukünftig einen besseren Überblick behalten kann, schneller wieder verstehen kann, was ich da gemacht habe.

Ich kommentiere den Code, möglichst kurz, aber aussagekräftig. Klassennamen, Variablen, Funktionen sollen selbsterklärend sein.

Sollte ich ein Diagramm erstellen oder gibt es in VS Code eine Funktion, eine Erweiterung die mir alle Klassen zeigt, welche Funktionen sie hat, wo es Vererbungen gibt und die Kommentare dazu? Wenn ja, könnt ihr eine Erweiterung empfehlen?

Wie handhabt ihr das, um möglichst einfach und klar den Überblick zu behalten?

Sollte ich jede Klasse in eine .js Datei packen? Auch dann, wenn es eine Vererbung gibt?

Gruß ebody

  1. Hallo ebody,

    750 Zeilen sind - sorry - ein Klacks. Drei Klassen und "ein paar Funktionen" in 750 Zeilen sind wirklich überschaubar, das kann man noch von Hand bändigen. Da helfen Kommentare und sprechende Methodennamen gut weiter; und ein Blatt Papier (oder eine Datei), auf dem Du die Abhängigkeiten skizzierst.

    Und es wird auch nicht wirklich übersichtlicher, wenn Du aus der einen Datei 4 machst. Du bekommst dafür ein paar neue Probleme.

    Schau mal dies an:

    // in foo.js
    class Foo {
       construct(t) {
          this._wert = t;
       }
       get wert() { return this._wert; }
    }
    
    // in bar.js
    class Bar extends Foo {
       construct(t2) {
          super(t2)
       }
       get wert() { return this.wert() * 2; }
    }
    
    // application.js
    let b = new Bar(42);
    console.log(b.wert);
    

    Du musst jetzt darauf achten, dass Du die Scripte in der Reihenfolge foo.js, bar.js, application.js lädst. Andernfalls wirst Du irgendwo auf ein "Foo ist undefiniert" oder "Bar ist undefiniert" stoßen.

    Wenn Du sie stumpf hintereinander, ohne async oder defer lädst, bedeutet das für den Browser, dass er das Laden der Seite dreimal unterbrechen muss. Je Unterbrechung muss ein externes Script geholt und ausgeführt werden, erst dann geht's weiter.

    Verwendest Du defer, werden die Scripte parallel zum HTML Parser geladen und kurz vor dem DOMContentLoaded Event ausgeführt. Das DOMContentLoaded Event wartet wenn erforderlich.

    Du kannst auch Scripte mit type="module" verwenden (also ECMAScript-Module) und die abhängigen Scripte mit import hereinholen, dann achtet der Browser selbstständig auf die richtige Reihenfolge (und du hängst den Internet Explorer ab). Leider hatte ich bisher keine Zeit, einen Wikiartikel darüber zu schreiben, es gibt nur diesen Stub mit einem Link zu MDN.

    Starke Verteilung auf viele kleine Scripte ist für die produktive Webseite (also dort, wo dsa Publikum tobt) nicht gut. Man sollte seine Scripte nur in der Entwicklung getrennt halten und für die Produktion bündeln und uglifizieren, damit sie schneller verfügbar sind.

    Dafür gibt es Tools wie webpack oder rollup (und viele mehr), die das für Dich übernehmen. Es gibt auch Tools wie requirejs, die die Modularisierung im "klassischen Stil" unterstützen, also im Prinzip das, was wir im Wiki als "revealing module pattern" beschrieben haben.

    Aber wie gesagt - bei 750 Zeilen kannst Du von Hand bündeln. Bei 7500 Zeilen wird da was anderes draus. Sofern Du Libraries wie jQuery einsetzt, hast Du die natürlich schnell beisammen.

    Rolf

    --
    sumpsi - posui - obstruxi