Archiv für Allgemein

Ein einfaches JavaScript Routing

Eine vernünftige Architektur auf der Clientseite wird oft sehr vernachlässigt. JavaScript wird in der Verwendung reduziert auf seine Skript-Funktionalitäten. Dabei lässt sich durch ein paar Handgriffe eine sehr gute Architektur einbauen, die bereits ein mini-MVC Framework implementiert.

Die Grundlage dabei bilden die Routen. Eine Route repräsentiert dabei eine statische Seite unter einer URL. Der Ablauf ist folgender:

  1. Definition der Routen
  2. Der Dispatcher wird gestartet
  3. Dieser sucht für die aktuelle URL eine konfigurierte Route
  4. Der Controller wird aus der Route geholt und initialisiert
  5. Der Controller-Code wird ausgeführt

 

Definition der Routen

 

1
2
3
4
5
6
7
8
9
10
11
12
class Route {
constructor(url, controllerClass) {
this._url = url;
this._controllerClass = controllerClass;
}
matches(currentUrl) {
return currentUrl.match(this._url).length > 0;
}
getControllerClass() {
return this._controllerClass;
}
}

Diese Klasse repräsentiert eine einzelne Route. Es wird die URL als regulärer Ausdruck übergeben und die Referenz der Controller-Klasse.

Mit der Methode matches wird untersucht, ob die Route auf die URL passt.

 

Verwalten der Routen und Suchen der aktuellen Route:

 

1
2
3
4
5
6
7
8
9
const Routing = {
_routes: [],
registerRoute(route) {
this._routes.push(route);
},
getCurrentRoute(currentUrl) {
return this._routes.find((route) => route.matches(currentUrl));
}
}

Dieses Singleton Objekt verwaltet alle definierten Routen und sucht nach der ersten passenden Routendefinition zu einer URL.

 

Der Dispatcher

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Dispatcher {
constructor() {
window.addEventListener('popstate', () => this.onRouteChanged());
this.onRouteChanged();
}
onRouteChanged() {
const url = `${window.location.pathname}${window.location.hash}`;
const route = Routing.getCurrentRoute(url);

let controllerInstance = null;
if(route) {
const controllerClass = route.getControllerClass();
controllerInstance = new controllerClass();
}

const event = new Event('routeDispatched');
event.controller = controllerInstance;
window.dispatchEvent(event);
}
}

Der Dispatcher sucht für die aktuelle URL die passende Route. Wenn eine vorliegt, dann wird der Controller instanziiert und ein Event auf window getriggert. Das Event enthält die Controller-Instanz für den Fall, dass jemand den Controller benötigt. Aber vor allem lässt das Event eine asynchrone Steuerung zu.
 

Anwendungs-Beispiel

 

1
2
3
4
5
6
7
8
class ControllerA {
constructor() {
alert('It works!');
}
}

Routing.registerRoute(new Route('', ControllerA));
const dispatcher = new Dispatcher();

 

Fazit

 

Mit ein paar Handgriffen ist ein einfaches Dispatching gebaut. Natürlich fehlen noch einige Dinge; Fehlerbehandlung, eine Model- und eine View-Schicht. Wenn man weiterhin mit Promises arbeitet, kann man auf einfachem Wege asynchrone Initialisierungen implementieren. So lässt sich beispielsweise eine “initialize” Methode im Controller einbauen, die Daten asynchron vom Server lädt. Model und View Klassen lassen sich bequem über die Route hinzufügen. Man kann Basisklassen für alle Ebenen verwenden, um gemeinsame Funktionalitäten zu kapseln.

Weitere Links:

Reflexion

Jeder kennt es, wenn man vor dem Spiegel steht und sich betrachtet. Man findet seine Nase hässlich, oder entdeckt, dass die Frisur nicht gut ist. Kurzum, man findet immer etwas an einem selbst, was man nicht mag.

Wir haben alle mindestens einen Spiegel in unserer Wohnung. Damit prüfen wir tagtäglich, ob wir geschmacklisch gekleidet sind, ob die Frisur sitzt – ob wir uns unter „die Leute“ wagen können. Das Körperliche liegt uns sehr am Herzen.

Weiterlesen

Die Bedeutung des Lebens

Wer hat sich nicht schon gefragt, was die Bedeutung des Lebens ist? Hier ist ein Zitat, über das es sich wohl lohnt, nachzudenken:

Fecisti nos ad te et inquietum est cor nostrum, donec requiescat in te.

Du hast uns für Dich erschaffen und unser Herz ist ruhelos, bis es wieder in Dir ruht.

(Augustinus, Confessiones 1,1)

Ich sehe dahinter auch die Aussage, dass wir im Leben nicht angetrieben werden von Hoffnungen und Wünschen, sondern ursprünglich von der Sehnsucht als Sinnsuche des Lebens. Wo kommen wir her? Was machen wir hier? Wo wollen wir hin?

Was ist Eure Meinung dazu?

Literatur: