Momentan arbeite ich gerade zusammen mit simpleTechs an einem Webprojekt, bei welchem JavaScript eine starke Rolle spielt. Da ich bei diesem Projekt mit dem Bau einer Hilfsklasse für diverse JavaScript-Funktionen beschäftigt bin, habe ich nochmal über Entwurfsmuster (engl. design patterns) für JavaScript-Objekte nachgedacht.
Für den Entwurf von Objekten, die eine Abhängigkeit zu anderen Objekten (bspw. jQuery) haben, gefällt mir dieses Design besonders gut:
(function($) { window.simpleTechs = function() { var helloWorld = 'Hello World'; return { test: function() { alert(helloWorld); }, Utilities: { jQueryVersion: function() { alert($().jquery); } } }; }(); })(jQuery); |
Es lässt sich in den zurückgegebenen Funktionen auch mit dem Schlüsselwort this
arbeiten:
(function($) { window.simpleTechs = function() { var helloWorld = 'Hello World'; return { test: function() { alert(helloWorld); }, Utilities: { alertjQueryVersion: function() { this.jQueryVersion(); }, jQueryVersion: function() { alert($().jquery); } } }; }(); })(jQuery); |
Das globale simpleTechs
-Objekt unterstützt in diesem Fall folgende Aufrufe: simpleTechs.test()
und simpleTechs.Utilities.jQueryVersion()
.
Vorteile:
- Das vorherige Laden von jQuery wird erzwungen
- Das Objekt kann private Variablen besitzen (Bsp.
helloWorld
) - Das Objekt kann Sub-Objekte enthalten (Bsp.
Utilities
) - Das Schlüsselwort
this
wird innerhalb derreturn
-Funktionen unterstützt
Ebenfalls ein sehr schönes Entwurfsmuster, jedoch weniger auf Abhängigkeiten ausgelegt, ist Folgendes:
var simpleTechs = simpleTechs || {}; simpleTechs.Utilities = function(context) { context.text = 'Hello World'; return { isHexColorCode: function(string) { var regex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/g; return regex.test(string); } }; }(this); |