JavaScript include – Skripte verknüpfen

Oft möchte man den JavaScript-Code einer Anwendung auf mehrere Dateien aufteilen. Nach der Aufteilung müssen einzelne Skripte beim Laden der Website wieder zusammengeführt werden. Hier wünscht man sich als Entwickler oft ein aus anderen Programmiersprachen bekanntes Sprachkonstrukt wie die include-Funktion in PHP oder „using“ in C#.

JavaScript kann diese Funktionalität leider nicht bieten.

Hinweis: Wir gehen im Folgenden von clientseitigem JavaScript aus. Serverseitig bietet NodeJS hierfür die require-Funktion.

JavaScript-Dateien im HTML händisch zusammenführen

Auf einzelne Dateien verteilte Skripte müssen in der richtigen Reihenfolge im HTML-Dokument eingebunden werden. Die „richtige Reihenfolge“ ergibt sich aus den Abhängigkeiten der Dateien zueinander. Benötigt ein Skript zum Beispiel Funktionen aus einer anderen Bibliothek, so muss die Bibliothek vor dem abhängigen Skript eingebunden werden. Ein gängiges Beispiel hierfür ist das Einbinden der jQuery-Bibliothek.

<script src="jquery.js"></script>
<script src="mein_programm.js"></script>

Einzelne JavaScript-Dateien dynamisch nachladen

Per JavaScript kann man andere JavaScript-Dateien zur Laufzeit dynamisch nachladen. Auch hier muss auf das korrekte Auflösen aller Code-Abhängigkeiten – das Dependency Management – geachtet werden.

Oft sind es nur einzelne Skripte, die bei Bedarf nachgeladen werden sollen. In diesem Beispiel wird davon ausgegangen, dass der Nutzer eine Fotogalerie auf der Website starteten möchte. Der Code für die Galerie ist in der Datei „foto_galerie.js“ enthalten, die nun nachgeladen werden soll. Erst wenn die Datei komplett geladen ist, können ihre Funktionen genutzt werden.

function foto_galerie_starten() {
    alert('start');
}

var galerieSkript = document.createElement('script');
galerieSkript.type = 'text/javascript';
galerieSkript.src = 'foto_galerie.js';
// Galerie starten sobald Skript geladen
galerieSkript.onload = foto_galerie_starten;
// in den <head> Bereich einfügen
document.getElementsByTagName('head')[0].appendChild(galerieSkript);

Dasselbe lässt sich mit jQuery erreichen:

$.getScript('foto_galerie.js', function () {
    // foto_galerie.js wurde geladen
    // Die Funktionen sind jetzt nutzbar
    foto_galerie_starten();
});

Komplexere Abhängigkeiten

Im Beispiel wurde nur eine einzelne Datei nachgeladen. Bei größeren Anwendungen mit einer Vielzahl von JavaScript-Dateien, die dynamisch nachgeladen werden sollen und möglicherweise in komplexen Abhängigkeiten zueinander stehen, ist diese Lösung oft nicht mehr ausreichend.

Eine interessante Alternative sind Frameworks wie require.js (http://requirejs.org/). Hierbei werden JavaScript-Dateien als Module definiert. Für jedes Modul werden dessen Abhängigkeiten zu anderen Modulen angegeben. Das Framework kümmert sich um das Auflösen aller Abhängigkeiten und lädt entsprechende Dateien selbstständig nach.

define(
    // Name des Moduls
    "mein_program",

    // Abhängigkeiten
    ["foto_galerie"],

    // Funktion, die nach dem Laden der Abhängikeiten ausgeführt wird
    function (foto_galerie) {
        // starte die Galerie
    }
);

Wie auch immer man das Fehlen einer include-Funktion in JavaScript löst – letztendlich sollte man dabei die Performanz seiner Webanwendung nicht außer Acht lassen. Oft ist besser, auf das dynamische Nachladen einzelner Dateien zu verzichten und stattdessen alle Skripte in einer einzigen Datei zusammenzufassen oder sogar direkt inline in das HTML-Dokument einzubinden (siehe Googles Empfehlungen für das schnellere Laden von Webseiten).

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project