Jeder der schon seit längerer Zeit Web Entwicklung macht ist früher oder später mit JavaScript in Kontakt gekommen. Einige lieben es, einige hassen es, die meisten benutzen es zusammen mit jQuery um einige DOM Manipulationen zu machen. Doch seit JavaScript immer mehr auf dem Vormarsch in neue Bereiche ist, wie zum Beispiel mit Node.js auf dem Server, um so wichtiger ist es Konzepte anzuwenden um Code besser zu strukturieren und wiederzuverwenden.

Mit JavaScript kann man auch Windows 8 Apps nativ entwickeln. Doch nicht jeder Web Entwickler der mit jQuery erfahren ist, hat auch gleich das Handwerkszeug um eine App zu entwickeln. Vor allem die Strukturierung von Code scheint nicht so weit verbreitet zu sein, zumindest ist das mein subjektives Empfinden nachdem ich in einigen Projekten mitgearbeitet und gereviewed habe.

Klassen definieren

Die WinJS, eine Bibliothek die JavaScript Entwicklern beim erstellen einer App zur Verfügung stseht, bietet einige Hilfskonstrukte um Code zu strukturieren. Das erste Konstrukt das ich vorstellen möchte ist WinJS.Class.

Damit lässt sich eine Klasse modellieren. Die erste Funktion ist der Konstruktor, danach die Objektdefinition im Object Literal Format.

(function() {

"use strict";

var Person = WinJS.Class.define(
// Konstruktor Funktion
function( firstname, lastname ) {
this.firstname = firstname,
this.lastname = lastname
},

// Member Definitionen
{
// eine Funktion
getFullname: function() {
return this.firstname + " " + this.lastname;
},

// das gleiche als Eigenschaft
Fullname: {
get: function() {
return this.getFullname();
}
}

}
);

})();

Die Klasse lässt sich nun im gleichen Scope instanzieren und nutzen:
 
var myPerson = new Person("Dariusz", "Parys");

console.log( myPerson.getFullname() );
console.log( myPerson.Fullname );

 

Namensbereiche definieren

Die Klasse oben ist innerhalb einer Funktion definiert und von außen per se erstmal nicht ansprechbar. Einige JavaScript Entwickler neigen dazu alles im globalen Kontext zu definieren und überall referenzieren zu können. Das mag für kleinere übersichtliche Situationen noch in Ordnung sein, schwieriger wird es wenn man wirklich eine Single Page App entwickelt, das ist letztlich eine Windows 8 App. Hier sollten globale Definition möglichst nicht benutzt werden. Abhilfe schafft hier ein Module Pattern welches über einen Namensbereich implementiert wird. Die WinJS bietet uns hierfür die Funktion WinJS.Namespace an.

Mit Hilfe der Funktion kann man Namensbereiche frei definieren und Variablen, Funktionen und Instanzen an diese heften. Um die obige Klasse in einem Namensbereich zu packen definiert man diesen.

WinJS.Namespace.define("mein.code", {
PersonenKlasse: Person
});

Dabei wird nun die Variable Person über den kompletten Pfad mein.code.PersonenKlasse zugänglich gemacht. Nun lässt sich die Klasse auch von außerhalb instanzieren und nutzen:
var myPerson = new mein.code.PersonenKlasse("Dariusz", "Parys");

console.log(myPerson.Fullname);

Schon mit diesen simplen Mitteln kann man den JavaScript Code in einer Windows 8 App schön strukturieren und entsprechend auch pflegen.

Prototypen Vererbung

JavaScript Prototyping erlaubt es Code wiederverwendbar zu machen. Mit Hilfe der Funktion WinJS.Class.derive lässt sich Funktionalität auf der anderen aufbauen

var Human = WinJS.Class.derive( Person, 
function(firstname, lastname, age) {
Person.call(this, firstname, lastname);
this.age = age;
}), {

Age: {
get: function() {
return this.firstname + " ist " + this.age + " Jahre alt."
}
}
});

Human erbt von Person und ruft dessen Konstruktor auf. Zusätzlich definiert Human eine neue Funktion. Die Verwendung sieht dann so aus:

var myHuman = new Human( "Dariusz", "Parys", 40 );

console.log( myHuman.Age );

// output --> Dariusz ist 40 Jahre alt.

Mixins

Möchte man Objekte kurz um Funktionalität anreichern so kann man hierzu das Mixin Konstrukt hernehmen. So kann man Funktionalität hinzufügen ohne gleich eine Ableitung machen zu müssen, ähnlich den Extensions Methods in .NET oder den Mixins in Ruby

var Info = {
about: function( name ) {
return "Die About Me Seite von " + name;
}
};

var AnotherPerson = WinJS.Class.mix( Person, Info );

var instance = new AnotherPerson( "Dariusz", "Parys" );

console.log( instance.about(instance.Fullname) );

// output --> Die About Me Seite von Dariusz Parys

Code Strukturieren

Mit diesen einfachen Hilfsmitteln lässt sich in JavaScript eine Windows 8 App gut strukturieren und der globale Namensbereich sauber verwalten. Der Code wird wartbarer und Änderungen lassen sich leichter implementieren.