JavaScript beherrschen: Kreative Designmuster

Mar 21 2023

Von Singletons zu Fabriken: Ein umfassender Leitfaden zu Schöpfungsmustern

„[…] jedes Muster stellt unsere derzeit beste Vermutung dar, welche Anordnung der physischen Umgebung zur Lösung des dargestellten Problems geeignet ist.“ - Christopher Alexander et al.

Foto von Andrew Ridley auf Unsplash

„ […] jedes Muster stellt unsere derzeit beste Vermutung darüber dar, welche Anordnung der physischen Umgebung zur Lösung des dargestellten Problems geeignet ist. ” – Christopher Alexander et al. (Eine Mustersprache, S. xv)

Das folgende Zitat scheint nichts mit Softwaremustern zu tun zu haben, ist aber ein Baustein für die Bibel der Softwareentwicklungsmuster: „Design Patterns“ von der Viererbande. Entdecken Sie, wie dieses Buch zu einem Klassiker der Branche wurde!

Was ist ein Designmuster?

Obwohl es viele Definitionen gibt, kann ein Entwurfsmuster als ein bewährtes Konzept verstanden werden, das unter Berücksichtigung positiver und negativer Faktoren die bekannteste Lösung für ein Problem bietet.

Verwenden Sie zum Entwerfen von Softwaredienstebenen das Modular Pattern . Verwenden Sie beim Umgang mit komplexen Objekten das Fassadenmuster (z. B. jQuery zusätzlich zu kompliziertem DOM). Um bestimmte Beobachter über eine Zustandsänderung in einem beobachteten Objekt zu benachrichtigen, verwenden Sie das Observer-Muster (z. B. RxJS , React Router ).

Zusammenfassend lässt sich sagen, dass ein Muster als die Fähigkeit definiert ist, ein Problem durch ein bewährtes Konzept zu lösen, das Beziehungen beschreibt . Dies ist kein einfacher Weg und erfordert häufig mehrere Neuverkabelungen. Auch der menschliche Faktor kommt ins Spiel, wobei Methoden eingesetzt werden sollen, die sich bereits als wirksam erwiesen haben .

Um die Übersichtlichkeit zu erhöhen, werden Entwurfsmuster in JavaScript basierend auf ihrer Funktion in drei Gruppen eingeteilt: Kreations- , Struktur- und Verhaltensmuster .

Kreatives Designmuster

Im Allgemeinen handelt es sich bei einem Creational Design Pattern um ein Designmuster, das sich mit Objekterstellungsmechanismen befasst. In JavaScript bezieht es sich auf den Prozess der Erstellung neuer Objekte.

Singleton-Muster

Wird verwendet, um ein Objekt auf nur eine Instanz zu beschränken:

var Person = (function() {
   var person = null;

   function create() {
      return new Object({
         name: 'John',
         age: 29
      });
   }

   return {
      getInstance: function() {
         if (!person) {
            person = create();
         }

         return person;
      }
   }
})();

var instance1 = Person.getInstance();
var instance2 = Person.getInstance();

console.log(instance1 === instance2);

module.exports = Person();
// or we can also instantiate an object with the 'new' keyword
module.exports = new Person;
// CommonJS caches the 'Person' property

Wird verwendet, um neue Objekte mit dem Gültigkeitsbereich ihres Objekts zu erstellen:

// Creating constructor's functions
var Person = function(firstName, lastName) {
   // Bind 'this' to the new object scope
   this.firstName = firstName;
   this.lastName = lastName;

   // Implicitly return 'this'
}

// Using prototype to avoid creating new instance for each object
Person.prototype.toString = function() {
   return this.firstName + " " + this.lastName;
}

// Creating new objects
// Link objects to an Object's prototype
var p1 = new Person('John', "Doe");
var p2 = new Person('Johana', 'Smith');

console.log('Person 1: ', p1.toString());
console.log('Person 2: ', p2.toString());

class Person {
   constructor(firstName, lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
   }

   toString() {
      return this.firstName + " " + this.lastName;
   }
}

var p1 = new Person('John', "Doe");
var p2 = new Person('Johana', 'Smith');

console.log('Person 1: ', p1.toString());
console.log('Person 2: ', p2.toString());

Wird verwendet, um einen gekapselten Code in seinem Kontext zu erstellen:

// usersDB.js (controller)
var usersDB = (function() {
   // Creating it's own context
   // Database is secured in this module (context)

   // Instantiate database connection here...

   var get = function(id) {
      return {
         id,
         firstName: 'John',
         lastName: 'Doe'
      }
   }

   var save = function(user) {
      console.log("Saving user: ", user.toString());
   }

   // Revealing Module Pattern
   return {
      get,
      save
   }
})();

// Person.js (model)
var Person = function(data) {
   this.active = false;
   this.firstName = data.firstName;
   this.lastName = data.lastName;
}

Person.prototype.toString = function() {
   return this.firstName + " " + this.lastName;
}

Person.prototype.activate = function() {
   this.active = true;
   this.save();
}

Person.prototype.save = function() {
   usersDB.save(this);
}

// index.js (view)
var p1 = new Person({
   firstName: "Johana",
   lastName: "Smith"
});
var p2 = new Person(usersDB.get(2));
p2.activate();

console.log('Person 1: ', p1.toString());
console.log('Person 2: ', p2.toString());

Fabrikmuster

Wird zur Vereinfachung der Objekterstellung verwendet:


// userDB.js (controller)
var userDB = (function() {
   // database records...
   var users = [{
      id: 0,
      firstName: 'John',
      lastName: 'Doe'
   }, {
      id: 1,
      firstName: 'Johana',
      lastName: 'Smith'
   }]

   var get = function(id) {
      return {
         ...users[id]
      };
   }

   return {
      get
   }
})();

// taskDB.js (controller)
var taskDB = (function() {
   var get = function(id) {
      return {
         id,
         name: 'Learn Factory Pattern',
         completed: false
      }
   }

   var save = function(user) {
      console.log("Saving task assinged to user: ", user.firstName, user.task);
   }

   return {
      get,
      save
   }
})();

// Person.js (model)
var Person = function(data) {
   this.firstName = data.firstName;
   this.lastName = data.lastName;
   this.task = null;
}

Person.prototype.save = function() {
   taskDB.save(this);
}

// Factroy for dbs
var dbFactory = function() {
   var dbs = this;

   var dbList = [{
      name: 'user',
      source: userDB
   }, {
      name: 'task',
      source: taskDB
   }];

   dbList.forEach(function(db) {
      dbs[db.name] = db.source;
   })
}

// index.js (view)
var factory = new dbFactory();

var p1 = new Person(factory.user.get(0));
var p2 = new Person(factory.user.get(1));

var t1 = factory.task.get(1);

p1.task = t1;
p1.save();

console.log('Person 1: ', p1);
console.log('Person 2: ', p2);

In diesem Artikel werden kreative Entwurfsmuster behandelt, die bei Bedarf die Erstellung von Objektinstanzen ermöglichen. Wir haben uns eine Auswahl dieser Muster angesehen, darunter: