JavaScript Code gut strukturieren

Nachdem ich nun JavaScript einigermaßen verstanden hatte, konnte ich mich dem eigentlichen Problem widmen. Wie also strukturiere ich den JavaScript Code sauber in einzelne „Klassen“ und Dateien?

Der Hauptpunkt ist, dass hinterher am besten alles wieder in einer, maximal zwei JavaScript Dateien zusammengeführt ist, damit der Browser beim Laden der Scripte nicht unendlich viele kleine Dateien laden muss.

Man kann nun also den Code in verschiedene Dateien aufteilen, also z.B. eine „Klasse“ in einer Datei. Stellen wir uns mal folgende Struktur für ein Spiel vor:

  • game.js
  • sprite.js
  • tile.js
  • player.js

 

In jeder dieser Dateien ist eine Objekt mit seinen Eigenschaften und Methoden definiert. Hinterher soll aber nur eine Datei greatgame.js übrigbleiben.

Um daraus ein einzelnes Script zu machen, habe ich Grunt verwendet. Grunt ist ein TaskRunner für JavaScript und führt dank umfangreichem Plugin-System schon sehr viele nützliche Funktionen aus.

Installation

Voraussetzung für Grunt ist node.js. Damit lassen sich JavaScripts auch serverseitig, also ohne einen Browser ausführen.

Zur Installation von node.js reicht es auf der Homepage den Installer herunterzuladen und entsprechend zu installieren.

Anschließend kann grunt komfortabel über den Nodejs Package Manager installiert werden. Dazu einfach auf der Kommandozeile folgendes eingeben:

npm install -g grunt-cli

Grunt wird daraufhin installiert.

Nun muss man nur noch eine Package-Definition hinterlegen um die Plugins bekannt zu machen und kann sein Grunt-Script schreiben.

 

Definition

Für die Package-Definition wird eine Datein package.json in das Hauptverzeichnis gelegt. Dies sieht in etwa folgendermaßen aus:

Wichtig: auch die Plugins müssen über den Node.js Package Manager installiert werden. Dazu entsprechend den obigen Aufruf anpassen, z.B.:

npm install -g grunt-contrib-nodeunit

Folgende Plugins werden verwendet:

  • grunt:
    das ist Grunt selbst, kein Plugin…muss aber auch definiert werden
  • grunt-contrib-jshint:
    jshint ist ein Werkzeug zur Prüfung der Code-Qualität des JavaScript-Codes. Details gibt es auf der JSHint Homepage.
  • grunt-contrib-nodeunit:
    Unit-Test-Runner. Habe ich faktisch noch nicht ausprobiert.
  • grunt-contrib-uglify:
    Uglify sorgt dafür, dass unser Java-Script von „unnützen“ Dingen befreit wird, etwa von Leerzeilen, Leezeichen, Kommentaren, … Das verkleinert die Datei und verkürzt die Ladezeit
  • grunt-contrib-concat:
    Concat erledigt unsere oben beschriebene Aufgabe und packt alle unsere Java-Script-Dateien zu einer zusammen.

 

Script

Das Skript selbst hört auf den Namen Gruntfile.js und liegt ebenfalls im Hauptverzeichnis.

Das Grunt-Script sieht nun folgendermaßen aus:

In dieser Datei werden zunächst die einzelnen Plugins konfiguriert.

  • pkg:
    • Einlesen der Package-Datei für die o.g. Definition
  • concat:
    • Seperator, der zwischen den einzelnen aneinanderzuhängenden Dateien ergänzt wird
    • src definiert den Filter der Quelldateien und dest das Verzeichnis der Ausgabedatei mit den aneinandergereihten JavaScript-Dateien. Dies sollte auf jeden Fall ein Unterverzeichnis sein, in dem sonst keine js-Dateien liegen, um sich nicht versehentlich eine Datei zu überschreiben.
  • uglify:
    • das Banner wird im Kopf der Ausgabedatei ausgegeben. Dient rein der Information.
    • files beschreibt zunächst die Ausgabedatei und dann die Quelldatei. Diese wird aus den Optionen des concat-Plugins ausgelesen.
  • jshint:
    • files gibt die zu prüfenden Dateien an
    • mit den Options kann man bestimmte Verhaltensweisen von jshint steuern. Etwa Prüfungen, deaktivieren, die man nicht einhalten kann oder will.

 

Nach der Konfiguration der Plugins werden nun die Aufrufe des Scripts festgelegt. Dazu werden die Module zunächst über node.js geladen.

Zum Schluss werden verschiedene „Profile“ definiert. Hier wird zunächst der Name des Profils angegeben und anschließend die Liste der Plugins, die ausgeführt werden sollen. Wird kein Profil angegeben, so wird „Default“ ausgeführt.

 

Aufruf

Nun ist alles definiert, aber wie rufe ich das Ganze nun auf?

  1. Über die Kommandozeile:
    [nodejs-Install-Verzeichnis]\nodejs\node.exe Gruntfile.js
  2. Über das NodeJS-Plugin von JetBrains für IntelliJ:
    Einfach per Rechtsklick auf die Gruntfile.js-Datei und „Run ‚Gruntfile.js'“ auswählen

 

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.