fischlak: Große JS-Dateien

Beitrag lesen

Hallo Rolf!

Mir geht es ja nur darum, die Übersicht im Falle einer Erweiterung/Änderung/Revision/Refraktorierung nicht zu verlieren.

Es läuft doch immer so: Wenn ich erweitern/ändern möchte, dann springe ich durch eine Kette von aufgerufenen Funktionen. Und je länger und umfangreicher diese Kette ist, desto schneller verliert man die Übersicht. Wer kennt das nicht?

Ich habe diesbezüglich folgende Erfahrung gemacht: Je größer ein Projekt wird, desto mehr Code entsteht logischerweise. Auch dann, wenn ich mich an die bekannten Dogmen halte. Der Vorsatz, Funktionalität in möglichst kleine Einheiten zu erlegen, sodass jede Einheit nur 1 Sache tut, führt zwangsläufig zu größerer Fragmentierung. Auch OOP kann das nicht verhindern, sonden im Gegenteil – OOP vergrößert die Fragmentierung noch.

Ich hatte eine Zeit, da hab ich jede Kleinigkeit gleich in eine Hilfsfunktion gepackt, weil die Funktionalität "1 Sache" tat. Hatte nur den Erfolg, dass ich noch mehr springen musste, wenn es etwas zu Erweitern/Ergänzen gab. Solange ich nur debugge – kein Problem. Der Debugger hüpft ja von ganz alleine zu den Stellen.

Aber wenn ich ändern will, dann muss ich den Code erstmal verstehen. In den Moment, in dem ich den Code schreibe, befindet er sich im "organischen Hauptspeicher" und ist sehr präsent. Dann ist jede Code-Ecke bekannt und klar zu sehen. Aber was ist 6 Monate später? Wer kennt diesen Moment nicht, sich in seinen eigenen Code wieder hineinversetzen zu müssen. Und genau dann, wenn ich mich wieder hineinversetzen muss, hüpfe ich im Code hin- und her, um so nach und nach wieder zu verstehen, "wie es war". Davor schützt mich auch nicht, wenn ich mich an Dogmen halte, an OOP‑Traditionen, an Clean-Code- Maximen, an DRY-Minimalismus. Und wenn dann noch Team‑Konventionen hinzukommen, dann ist die Fragmentierung maximal.

Der Aufbau einer JS-Datei ist doch immer gleich: oben Variablen, darunter Funktionen (und möglichst viele – für jede Sache eine eigene Funktion), darunter Event-Handler bzw. Listener und die Aufrufe. Alles linear, alles flach.

Große Funktionen verschlimmern es dann noch, weil wir Menschen nicht dazu gemacht sind "viel auf einmal" aufzufassen. Wir brauchen eben kleine Häppchen.

Dehalb ist mir Folding so wichtig. Wenn ich eine Funktion fertig hab, dann klappe ich sie ein und sehe ja an ihrem Namen, was sie macht. Das Funktions-Innere interessiert mich dann nicht mehr, sofern es funktioniert.

Ich stecke auch Hilfsfunktionen nicht wie früher "oben zu den Funktionen hin", sondern stecke sie lokal und inline an Ort und Stelle, möglichst dicht zum Funktionsaufruf hin. Dann klappe ich sie zu und der Raum, den der Code einnimmt, stört nicht mehr. Und dann, bei Bedarf, wenn ich wissen möchte, was in der Funktion läuft, klappe ich sie einfach wieder auf.

Ich gehe sogar so weit, dass ich semantisch zusammengehörende Abschnitte in eine Funktion kapsele, die nur den einen Grund hat: zu existieren, um zu kapseln. Das sieht dann prinzipiell so aus:

Vorher:

Codezeile 1
Codezeile 2
Codezeile 3
Codezeile 4

Nachher:

Codezeile 1

function xyz() {
  Codezeile 2
  Codezeile 3
}
xyz();

Codezeile 4

Wobei ich dann den Inhalt von xyz() mit Folding einklappe, sodass final rein visuell das zu sehen ist:

Codezeile 1

function xyz() {
xyz();

Codezeile 4

So hab ich mir angewöhnt, "folding-orientiert" zu coden. Hat riesengroße Vorteile, weil man dann nicht mehr so viel hüpfen muss. Folding "kapselt" eine Funkktionalität rein visuell. Sowas kann ich mit Funktionen, die irgendwo oben im Code stehen, nicht erreichen. Auch OOP schützt Dich nicht vor Fragmentierung, denn ob die Funktionalität in der aktuellen Datei in einer Funktion steht oder in einer extra Datei als Klasse – im Falle einer Änderung musst Du hinhüpfen.

Folding ist nicht einfach nur Zuklappen, wie die meisten meinen. Wenn Du Folding aktiv als Strukturprinzip einsetzt, dann wirst Du automatisch "folding-orientiert" Coden. Und das ist ein vollkommen anderes Coden als ohne Folding.

Wiederverwendbaren Code kann man mit Folding natürlich nicht "vor Ort" kapseln. Das sind dann die Situationen, wo man mit dem Hüpfen leben muss.

Leider gibt es nicht sehr viele Editoren, die Folding visuell gut darstellen. Deshalb ja meine Frage, ob jemand diesbezüglich gute Erfahrungen gemacht hat.

Gruß, fischlak

PS: Sorry für die vergessene Anrede in meinem ersten Posting, hatte ich im Eifer des Gefechts vergessen. Wollte ich gerade ändern, aber "Bearbeiten" geht nicht mehr...

0 70

Große JS-Dateien

fischlak
  • javascript
  • software
  1. 0
    Rolf B
    1. 0
      fischlak
      1. 0
        Rolf B
        1. 0
          fischlak
          1. 0
            Felix Riesterer
            1. 0
              fischlak
              1. 0
                Felix Riesterer
                1. 0
                  fischlak
                  1. 1
                    Rolf B
                    1. 0
                      fischlak
                      1. 0
                        Rolf B
                        1. 0
                          fischlak
                    2. 0
                      Hawk
                      1. 0
                        Rolf B
                        1. 0
                          fischlak
                        2. 0
                          Hawk
                        3. 0
                          fischlak
                          1. 0
                            Rolf B
                            1. 0
                              fischlak
                              1. 0
                                Felix Riesterer
                              2. 0
                                Felix Riesterer
                            2. 0
                              fischlak
                              1. 1
                                Rolf B
                                1. 0
                                  fischlak
                                  1. 0
                                    Felix Riesterer
                                    1. 0
                                      fischlak
                                      1. 0
                                        Felix Riesterer
                                        1. 0
                                          fischlak
                                        2. 0
                                          fischlak
                                      2. 0
                                        Rolf B
                                        1. 0
                                          fischlak
                                        2. 0
                                          Robert B.
                                          • javascript
                                  2. 0
                                    Robert B.
                                    • javascript
                                    • performance
                                    • software
                                    1. 0
                                      fischlak
                                      1. 0
                                        Felix Riesterer
                                        1. 0
                                          fischlak
                                        2. 0
                                          fischlak
                                          1. 0
                                            Julius
                                            • editor
                                            • microsoft
                                            • software
                                            1. 0
                                              fischlak
                                          2. 0
                                            encoder
                                            1. 0
                                              fischlak
                                              1. 1
                                                Felix Riesterer
                                                1. 0
                                                  fischlak
                                                2. 0
                                                  fischlak
                                                3. 0
                                                  fischlak
  2. 0
    encoder
    1. 0
      fischlak
      1. 0
        Felix Riesterer
        1. 0
          Rolf B
          1. 0
            Gunnar Bittersmann
            • css
            • html
            • test
            1. 0
              Rolf B
              1. 0
                Gunnar Bittersmann
        2. 0
          fischlak
          1. 0
            Rolf B
    2. 0
      fischlak
      1. 0
        Felix Riesterer
        1. 0
          fischlak
      2. 0
        Rolf B
        1. 0
          fischlak
          1. 1
            Rolf B
            1. 0
              fischlak
              1. 0
                Rolf B
                1. 0
                  fischlak
                  1. 0
                    Felix Riesterer
                    1. 0
                      fischlak
                      1. 0
                        Felix Riesterer
                        1. 0
                          fischlak
            2. 0
              MudGuard
        2. 0
          ottogal