senäh

17senäh und so…

Code Snippet Thumb

HTML/CSS/JS
15. Feb 2012
Kommentare: 0

Code Snippet: OOP und JavaScript – Klassenstruktur

Kategorien: HTML/CSS/JS | 15. Feb 2012 | Kommentare: 0

Eigentlich komme ich programmiertechnisch ja aus der OOP-Ecke. Hier fühl ich mich wohl, hier kenn‘ ich mich aus. Hoffe ich zumindest 😉 Bekanntermaßen(?) ist JavaScript eine objektorientierte, aber klassenlose Sprache. Wie bitte? Vor JavaScript wusste ich nicht, dass man ohne Klassen objektorientiert programmieren kann. Für mich waren Klassen das Fundament von OOP. Umso schwieriger viel mir der Einstieg in JavaScript. Wie konnte ich gewonnene Erfahrungen nur in JavaScript weiter verwenden?

Mittlerweile bin ich um einige Erkenntnisse in JavaScript reicher und weiß das man dank Closures bestimmte OOP-Eigenheiten emulieren kann. Da ich in meinem täglichen Workflow immer wieder auf folgende „klassenartige“ Struktur zurück greife, wollte ich sie hier mit euch teilen. Vielleicht hilft es dem ein oder anderen JavaScript-Einsteiger. Aber immer daran denken: Es ist nur klassenartig und keine echte Klasse! Aber ihr bekommt statische und nicht-statische, sowie private und öffentliche Methoden und Attribute.

window.Namespace.Class = (function() {

    /**
    * PRIVATE STATIC
    */

   var privateStaticAttribute = true;

   var privateStaticMethod = function() {
      return true;
   };

   /**
    * CONSTRUCTOR
    * @param param
    */
   var ClassConstructor = function(param) {

      /**
       * PRIVATE INSTANCE
       */

      var privateAttribute = true;

      var privateMethod = function() {
         return true;
      };

      /**
       * PUBLIC INSTANCE
       * (ClassConstructor.prototype shared by all instances.)
       */

      ClassConstructor.prototype.publicPrototypeAttribute = true;

      ClassConstructor.prototype.publicPrototypeMethod = function() {
         return true;
      };

      this.publicAttribute = true;

      this.publicMethod = function() {
         return true;
      };
   };

   /**
    * PUBLIC STATIC
    */

   ClassConstructor.publicStaticAttribute = true;

   ClassConstructor.publicStaticMethod = function() {
      return true;
   };

   /**
    * RETURN CONSTRUCTOR
    */
   return ClassConstructor;
})();

An einem späteren Zeitpunkt (sprich: wenn ich damit zufrieden bin), gebe ich vielleicht noch einmal ein Code Snippet zu Vererbung in JavaScript frei 😉

Falls es etwas schneller gehen soll, empfehle ich euch das Buch JavaScript: Objektorientierung und Entwurfsmuster: Stabilen und sicheren Code mit JavaScript entwickeln, welches mir beim Umstieg ziemlich geholfen hat. Der Link führt übrigens zu Amazon. Solltet ihr euch entscheiden das Buch über diesen Link zu kaufen, unterstützt ihr unseren kleinen Blog 🙂

Autor: Pipo

...kommt ursprünglich aus der Designerecke, ist aber im Laufe seines Studiums in die Webentwicklung gestolpert. Kann sich seit dem nicht so richtig entscheiden wo er hingehört und wagt deswegen vielleicht die Flucht nach vorne in ein komplett neues Gebiet. Vielleicht Management? Niemand weiß es. Auch er nicht.