funktionen in zwei Dateien geht nicht, in einer Datei gehen sie???

[Rolf B]

Hallo Franz,

doch, das muss gehen. Im gezeigten Script liegt der Fehler nicht, höchstens in der Art der Einbindung.

Du musst schon spezielle Maßnahmen ergreifen, damit eine Funktion nicht global sichtbar wird. Von diesen Maßnahmen weißt Du mutmaßlich überhaupt nichts und hast sie darum auch nicht ergriffen.

Guck in die Entwicklerwerkzeuge. In die Konsole und den Netzwerktrace. Gibt es Ladefehler? Gibt es JavaScript-Fehlermeldungen?

Sehen deine beiden .js Dateien genau so aus wie die beiden Codeblöcke da oben? Oder ist da noch mehr? Bindest Du die rechnen-Funktion immer noch über onkeyup="rechnen()" an? (was übrigens falsch wäre, das sollte `oninput="rechnen()" sein um auch ein Copy+Paste mit der Maus zu unterstützen)

---

Das Aufteilen von Code in viele kleine Dateien ist für eine Browserseite allerdings ein zweischneidiges Schwert. Wenn Du getInputAsFloat von vielen Stellen aus benutzt, dann kann es sinnvoll sein, sie in einer zentralen Toolbox-Datei unterzubringen. Wenn zwei Funktionen dagegen wirklich zusammengehören, also z.B. die Funktion x nur von der Funktion y aufgerufen wird, dann können die beiden auch in einer Datei liegen.

Pro:

• klare Strukturierung
• keine Riesendateien im Editor

Contra:

• Es kostet VIEL Zeit, diese Häppchen zu laden.
• Man muss im Editor häufig zu einer anderen Datei wechseln.

Profi-Entwickler machen es so, dass sie Funktionen thematisch zu .js Dateien gruppieren und während der Entwicklung diese Dateien auch einzeln laden. Für das Deployment auf den Produktionsserver werden sie aber mittels eines speziellen Tools gebündelt. D.h. alle Scripte, die auf einer Seite geladen werden, werden aneinander gehängt. Ein weiteres Tool kann sie dann auch noch minifizieren, d.h. lange Variablennamen in kurze umwandeln und bestimmte Formulierungen im Code kürzer machen. Das Ergebnis ist total hässlich und unlesbar, weshalb man solche Tools auch „uglifier“ nenne.

Wenn man nur zwei bis fünf Funktionen hat, sollte man sich um Minifizierung und Codeverteilung überhaupt keine Gedanken machen. Einfach in eine Datei und gut ist. Wenn das Projekt größer wird, sollte man aber - nicht zu spät - mit Strukturierung und Modularisierung anfangen. Leider beherrscht der Internet Explorer die mit ECMAScript 6 eingeführte native Modularisierung nicht (Artikel bei Mozilla), wenn Du den also unterstützen willst, brauchst Du Tools wie require.js als reiner Module Loader, oder große Transpiler wie Babel oder TypeScript; die können das als Nebeneffekt, haben aber erstmal eine steile Lernkurve.

Rolf