In meinen nächsten Blogposts möchte ich auf modules Javascript und den dazu gehörigen Aufbau bzw. Organisation eingehen. Vorher aber stelle ich euch Euch ein wichtiges Werkzeug dafür vor, nämlich requirejs.Heutige Webanwendungen verwenden eine vielzahl von Javascripts. Bei einem nicht modularen Vorgehen würde man die ganzen Funktionen und Scripte einfach in einer Datei sammeln. Bei umfangreichen Webprojekten wird diese Datei schnell mehrere Tausend Zeilen groß. Das verlangsamt auch gleichzeitig die Ladezeit der Seite. Es ist dann auch oft so das nicht alle Funktionen immer sofort gebraucht werden. Hier würde es Sinn machen die Dateien sinnvoll zu splitten und erst bei Bedarf nachzuladen. Requirejs ist hierfür das ideale Tool.
Ein ausführliches Beispiel für ein Modul folgt in einem späteren Blogpost. Heute zunächst die Grundlagen. Zunächst einmal requirejs herunterladen und die Seite integrieren. Dies erfolgt per Scrip-Tag im Head
<script data-main="js/main" src="js/require.js"></script>
Zusätzlich ist im Script-Tag das Data-Attribt main hinzugefügt. Das wäre die erste Datei die von requirejs geladen wird. Hier können sich die Funktionen befinden, die man für den Aufruf der Seite dringend benötigt. Möchte man weitere Dateien nachladen, kann dies per requirejs folgendermaßen gemacht werden.
require(["demo.js"], function(js) {
// callback wenn demo.js geladen wurde
});Dieses Script-Snippet lädt die Datei demos.js aus dem js Ordner nach und führt im erfolgsfall den Callback aus.
Das zunächst als erstes Beispiel wie requirejs funktioniert. Weitere Beispiele wie man nun damit modulares Javascript schreibt folgenden bei meinen weiteren Blogpost.