Übersicht, Durchblick bzgl. Code behalten

[Rolf B]

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