It’s #FrontendFriday – Adapter-Pattern

08.04.2022

In unserer Blogreihe Coding Patterns JavaScript ist heute das Adapter-Pattern an der Reihe. Was das ist, wie und wann es eingesetzt werden soll, erfahrt ihr hier.

Was ist das Adapter-Pattern?

Bei der Verwendung von Bibliotheken kommt es des Öfteren vor, dass Methoden bzw. Schnittstellen aktualisiert werden müssen. Nun steht der Nutzer vor der Wahl. Entweder er nutzt weiterhin die veraltete Bibliothek oder er passt seine Methoden an.

Da Bibliotheken normalerweise nicht ohne Grund aktualisiert werden, sollte die Wahl nicht weiter schwer sein. In der Regel sind es allerdings gleich mehrere Codestellen, die daraufhin angepasst werden müssen. Um nicht jede Schnittstelle einzeln anpassen zu müssen, kann das Adapter Pattern verwendet werden.

Das Adapter Entwurfsmuster fällt unter die Kategorie Strukturmuster (Structural Design Patterns) und kann verwendet werden, um Schnittstellen zu adaptieren. Nach außen hin bietet die Adapter-Komponente die gleichen Methoden an, innerhalb jedoch werden die Methoden des Clients auf die neue Methode gemappt.

Das Adapter-Pattern dient hierbei als Bindeglied zwischen Client und Adaptee (zum Beispiel eine Bibliothek).

Adapter Pattern

[3]

 

Der Einsatz des Adapter- Entwurfsmuster hat den Vorteil, dass immer nur der Adapter angepasst werden muss, sollte sich im Adaptee etwas ändern.

Ein Kollege meinte zu mir: „Das ist wie, wenn ich in ein anderes Land reise. Ich muss mir nicht extra ein neues Ladegerät kaufen, sondern kann mein altes Ladegerät mitnehmen. Ich brauche lediglich einen Adapter, damit ich weiterhin Strom für mein Handy bekomme.“ Ich finde, dieses Beispiel bringt es sehr gut auf den Punkt.

 

Code-Example

Wie sieht denn das Adapter-Pattern in Javascript aus? Hier ein Beispiel:

// old interface
class OldCoffeeMachine {
    constructor() {
      this.typeOfCoffees = function (size, typeOfCoffee) {
        switch (typeOfCoffee) {
          case 'Coffee':
            return size + 'Coffee'
          case 'Cappuccino':
            return size + 'Cappuccino'
          default:
            return null
        }
      }
    }
  }
  
  // new interface
  class NewCoffeeMachine {
    constructor() {
      this.coffee = function (size) {
        return size + 'Coffee'
      }
      this.cappuccino = function (size) {
        return size + 'Cappuccino'
      }
    }
  }


  // Adapter Class
class CoffeeAdapter {
    constructor() {
      const newCoffee = new NewCoffeeMachine()
  
      this.typeOfCoffees = function (size, typeOfCoffee) {
        switch (typeOfCoffee) {
          case 'Coffee':
            // using the new implementation under the hood
            return newCoffee.coffee(size)
          case 'Cappuccino':
            return newCoffee.cappuccino(size)
          default:
            return null
        }
      }
    }
  }
  
  // usage
  const oldCoffeeMachine = new OldCoffeeMachine()
  console.log(oldCoffeeMachine.typeOfCoffees('big', 'Coffee')) // 'big Coffee'
  
  const newCoffeeMachine = new NewCoffeeMachine()
  console.log(newCoffeeMachine.coffee('big')) // 'big Coffee'
  
  const adaptedCoffeeMachine = new CoffeeAdapter()
  console.log(adaptedCoffeeMachine.typeOfCoffees('big', 'Coffee')) // 'big Coffee'

Im obigen Beispiel gibt es ein altes Interface, welches 2 Parameter (Größe und Art des Kaffees) benötigt, um einen entsprechenden Kaffee auszugeben.

Das neue Interface benötigt nur noch den Parameter ‚size‘ und bietet anschließend entsprechende Methode für die Art des Kaffees an.

Die Adapterklasse ermöglicht es nun, weiterhin die alten Methoden mit 2 Parameter zu verwenden. Innerhalb der Klasse werden jedoch die Methoden des neuen Interfaces verwendet.

 

Relevanz in JavaScript

JavaScript ist sehr dynamisch und kann oft leicht zur Laufzeit angepasst werden. Hierbei muss der Anwender jedoch darauf achten, dass er keine ungewollten Nebenwirkungen verursacht. Bei steigender Komplexität macht der Einsatz des Adapter-Patterns durchaus Sinn.

 

Die Webfrontend-FG wünscht allen ein schönes Wochenende!

Mehr über Java Programmierung erfahren

 

Quellen:

Web:

[1] Jsmanifest – Adapter Pattern in JavaScript

[2] dofactory – JavaScript Adapter

[3] dofactory – JavaScript Adapter – Diagram

Literatur:

Professionell entwickeln mit JavaScript; Autor: Philip Ackermann

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*