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:

{
    "name": "NameDerAnwendung",
    "version": "0.1.0",
    "description": "Kurzbeschreibung der Anwendung.",
    "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-contrib-jshint": "~0.10.0",
        "grunt-contrib-nodeunit": "~0.4.1",
        "grunt-contrib-uglify": "~0.5.0",
        "grunt-contrib-concat": "~0.5.0",
    }
}

{

"name": "NameDerAnwendung",

"version": "0.1.0",

"description": "Kurzbeschreibung der Anwendung.",

"devDependencies": {

"grunt": "~0.4.5",

"grunt-contrib-jshint": "~0.10.0",

"grunt-contrib-nodeunit": "~0.4.1",

"grunt-contrib-uglify": "~0.5.0",

"grunt-contrib-concat": "~0.5.0",

}

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:

var grunt = require('grunt');
module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';'
            },
            dist: {
                src: ['src/**/*.js'],
                dest: 'dist/<%= pkg.name %>.js'
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
            },
            dist: {
                files: {
                    'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
                }
            }
        },
        jshint: {
            files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
            options: {
                // options here to override JSHint defaults
                globals: {
                    jQuery: true,
                    console: true,
                    module: true,
                    document: true
                }
            }
        }        
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-concat');

    grunt.registerTask('test', ['jshint', 'qunit']);

    grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

};
grunt.tasks(['default']);

var grunt = require('grunt');

module.exports = function(grunt) {

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

concat: {

options: {

separator: ';'

dist: {

src: ['src/**/*.js'],

dest: 'dist/<%= pkg.name %>.js'

}

uglify: {

options: {

banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'

dist: {

files: {

'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']

}

jshint: {

files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],

options: {

// options here to override JSHint defaults

globals: {

jQuery: true,

console: true,

module: true,

document: true

}

});

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-concat');

grunt.registerTask('test', ['jshint', 'qunit']);

grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

};

grunt.tasks(['default']);

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?

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

Staratnights Blog

Mein erweitertes Gedächtnis – free for all

JavaScript Code gut strukturieren

Schreibe einen Kommentar Antworten abbrechen