Entwurfstmuster für JavaScript-Objekte mit Abhängigkeiten

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 der return-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);

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.