Große JS-Dateien

[Felix Riesterer]

Lieber fischlak,

ich nutze gerne Code-Folding. Als Editor benutze ich Geany (unter Linux, früher Notepad++ unter Windows).

Wenn ich in Deinen Postings von „Funktionen“ lese, scheint es mir, dass Du kaum OOP betreibst. Ein Objekt hat nämlich keine Funktionen, sondern Methoden, wie man im OOP-Sprech sagt. Und von Klassen lese ich auch, aber nicht von Objektinstanzen, was auch dafür spricht, dass Du OOP nicht wirklich verwendest.

// ... Code
if (svgTyp === "rect") {
    const { x, y, width, height, alignment } = _KONFIG_;

    function fitIntoBox(boxWidth, boxHeight) {
        [...]
        return { renderWidth, renderHeight };
    }
    // Bild seitenverhältniserhaltend einpassen
    let { renderWidth, renderHeight } = fitIntoBox(width, height);
// ... Code

Klassiker. Da steht im Grunde eine IIFE, nur dass sie eben nicht so aussieht. Vorher Code, dann Funktionsdefinition, dann wieder Code. Das sieht für mich nach ziemlichem Kuddelmuddel aus.

Ich brauch fitIntoBox() nur an dieser einen Stelle (letzte Zeile im Code).

Funktionen oder Methoden definiere ich dann, wenn sie mehr als einmal verwendet werden. Wenn also Dein fitIntoBox nur ein einziges Mal im Code aufgerufen wird, dann wäre das für mich ein Grund, dass es regulär als eine Folge von nicht-gekapselten Anweisungen im Code steht. Dass Du es aber Kapseln möchtest, würde für mich ein Auslagern in eine eigene Klasse erzwingen. Diese kann dann (wenn es sein muss nur einmal) so verwendet werden:

class SVGImage {

  #aspectRatio = 1;

  constructor () {
    // was auch immer
  }

  getDimensions () {
    return {
      aspectRatio: this.#aspectRatio,
      height: this.#height,
      width: this.#width
    };
  }

  #height = 0;

  resizeToDimensions (width, height, keepAspectRatio) {
    // was auch immer
  }

  #width = 0;
}

const img = new SVGImage();
img.resizeToDimensions(width, height, true);

const imgDimensions = img.getDimensions();
console.log(imgDimensions.width);
console.log(imgDimensions.height);
console.log(imgDimensions.aspectRatio);

Für meine Programmierpraxis ist es ein Unding, wenn mir ein Funktionsaufruf mehrere Rückgabewerte liefert. Genau ein Wert darf zurückgegeben werden, der aber gerne (siehe getDimensions) ein Objekt mit mehreren Eigenschaften sein darf.

Vielleicht ist es nervig, wenn man im Code springen muss, aber wenn man wirklich mit Objekten arbeitet, dann weiß man ja in aller Regel die wichtigen Eigenschaften und Methoden, sodass man eben nicht springen muss. Und gute Editoren können beim Schreiben von Methodennamen bereits die Parameterliste anzeigen, damit man z.B. die Reihenfolge richtig notiert. Und wenn das kein Problem sein soll, dann verwendet man als Funktionsparameter eben Objekte, in denen die Variablen als Eigenschaften erwartet werden:

  resizeToDimensions (dimensions) {
    let height = 0, keepAspectRatio = true, width = 0;

    if (dimensions.hasOwnProperty("height")) {
      height = dimensions.height;
    }

    if (dimensions.hasOwnProperty("keepAspectRatio")) {
      keepAspectRatio = dimensions.keepAspectRatio;
    }

    if (dimensions.hasOwnProperty("width")) {
      width = dimensions.width;
    }

    // was auch immer
  }

OOP macht das auch: Du lagerst im Prinzip Funktionalität aus. Dich interessiert nicht, wie die Klasse das macht; Du musst nur wissen, WAS sie macht, was also die Rückgabe ist.

Das ist nur ein Teil der Wahrheit. Das Auslagern ist eher ein Nebeneffekt, der dadurch entsteht, dass die Instanzen ihren eigenen Variablenspeicher haben. Die Funktionen sind nun als Methoden an die Instanzen gebunden, was bedeutet, dass alle das Gleiche können, obwohl sie meist unterschiedlich sind. Und ja, man kann damit den Code schön falten, aber man kann ihn sogar in eine andere Datei auslagern! Und das hilft bei großen Projekten schon sehr beim Bewahren des Überblicks. Und beim Trennen von Zuständigkeiten hilft es auch. Gewisse Fehlerquellen können dann nicht mehr im Riesenkuddelmuddel sein, sondern in einer ganz bestimmten Klasse, die für z.B. SVG-Grafiken zuständig ist.

Wenn ich Folding richtig nutze, also nicht einfach nur zuklappen, sondern Folding als visuelles Strukturierungswerkzeug nutze, mit dem Ziel, allen Code möglichst lokal zu halten, dann kann ich (in eingeklapptem Zustand der einzelnen Funktionsblöcke) auch eine längere Funktion leicht überblicken.

Für mich hört sich das so an, als würdest Du schreiben, dass man Wege deshalb anlegt, damit man ihnen Randmarkierungen geben kann, weil Randmarkierungen für mehr Sicherheit bei der Benutzung der Wege bieten. Aber will man Wege nicht deswegen, weil man von A nach B kommen möchte, anstatt hauptsächlich deswegen, um Randmarkierungen anbringen zu können? Dein Folding klingt für mich wie die Randmarkierungen.

Liebe Grüße

Felix Riesterer