Große JS-Dateien

[fischlak]

Hallo Rolf, Code in geschweifte Klammern zu setzen, um sie einklappen zu können, würde nicht das Ziel erreichen, das ich anstrebe, weil der Editor dann nur den Klammerbereich verbirgt, und ich wüßte nicht, was dahintersteckt, während ein sprechender Funktionsname sehr oft schon ohne Kommentar auskommt. Auch reicht es nicht, z.B. einen if-Block einzuklappen, weil ich auch hier nicht weiß, was da passiert. Das entscheidende ist: Eine Funktion hat einen Namen, der nach dem Einklappen stehen bleibt. Der Inhalt der Funktion ist dann für mich eine Blackbox. Ich muss nicht wissen, was da passiert, sondern nur, was ich bekomme. Und was ich bekomme, steht im Funktionsnamen. Deshalb ist es wichtig, für sowas Funktionen zu nehmen und das Folding nicht als "einfach zuklappen" zu verstehen, sondern als Methode der visuellen Strukturierung, als Coding-Strategie. Vielleicht sollte ich mal ein praktisches Beispiel aus meinem Projekt nehmen – Bilder sagen ja mehr als 1000 Worte.

Ich hab eine Hilfsfunktion, die ich normalerweise "oben zur Gruppe Funktionen" platzieren würde. Aber das würde, falls ich mal in diese Funktion reisehen möchte, dazu führen, dass ich unnötig STRG+F, dann zur Funktion springen, danach wieder zurück springen oder scrollen. Solches Hüpfen lässt sich deutlich reduzieren, wenn ich die Funktion lokal und inline setze. Hier mal herauskopiert aus einer größeren Funktion:

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

    function fitIntoBox(boxWidth, boxHeight) { // Bild in einen Bereich einpassen (seitenverhältniserhaltend)
        const boxRatio = boxWidth / boxHeight;

        let renderWidth, renderHeight;

        if (LOGO_ASPECT_RATIO > boxRatio) {
            // Bild ist "breiter" → Breite begrenzt
            renderWidth = boxWidth;
            renderHeight = boxWidth / LOGO_ASPECT_RATIO;
        } else {
            // Bild ist "höher" → Höhe begrenzt
            renderHeight = boxHeight;
            renderWidth = boxHeight * LOGO_ASPECT_RATIO;
        }

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

Ich brauch fitIntoBox() nur an dieser einen Stelle (letzte Zeile im Code). In der Praxis klappe ich sie dann ein und sehe im Editor nur die Zeile mit der Funktionsdeklaration: Den eingeklappten Zustand merkt Kate sich, wenn man die JS-Datei in eine "Sitzung" legt. Es geht nicht darum, einfach nur "einzuklappen". Es geht darum, eine Funktionalität visuell zu kapseln, anstatt sie irgendwo im Skript abzulegen oder in externe Dateien. Durch diese lokale Nähe ergibt sich dann: weniger Springen-müssen.

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.

Dass ich mit let und const den lokalen Scope nutzen kann, ist mir bekannt. Aber nur zu verbergen allein, ist ja nicht Sinn der Sache. Und eine lokale anonyme IIFE bringt ja in diesem Sinne nichts, weil ich sie dann "von außen" nicht aufrufen kann.

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.

Im Prinzip ist Folding-basiertes Coden nichts anderes, als Funktionen, die sonst zu lang werden würden, kurz zu halten. Aber eben nicht, indem man Funktionsblöcke irgendwo hinschreibt (wie z.B. die Hilfsfunktion), sondern lokal in visueller Nähe hält, mit dem Zweck, dann nicht mehr wie bescheuert hin- und herhüpfen zu müssen.

Ich glaub, das kann man nur verstehen, wenn man es mal praktisch anwendet.

Gruß, fischlak