It’s #FrontendFriday – Facade-Pattern

24.04.2022

Es ist #FrontendFriday und wir führen unsere Blogreihe Coding Patterns JavaScript fort mit dem Facade-Pattern. Was das ist, wie und wann es eingesetzt werden soll, erfahrt ihr hier.

Was ist das Facade-Pattern?

Fassaden gibt es nicht nur an Gebäuden sondern auch in der Software-Entwicklung aber was genau ist der Unterschied? Schauen wir uns zunächst mal die Definition einer Gebäudefassade an:

Die Fassade (von französisch façade, über italienisch facciata, ursprünglich von lateinisch facies ‚Angesicht/Gesicht‘) ist ein gestalteter, oft repräsentativer Teil der sichtbaren Hülle (Gebäudehülle oder Außenhaut) eines Gebäudes. – Wikipedia [1]

Durch eine Fassade wird also das Gebäude verschönert. Das Facade-Pattern macht etwa das Gleiche in der Softwareentwicklung.
Hier dient es dazu ein Interface zu bilden um die meist komplexen Codeteile zu „verstecken“ und nur das zurückzugeben was wichtig ist für den Nutzer (in diesem Sinne wird von Entwickler gesprochen) der die Software in seinen Code verwendet möchten. Das Facade-Pattern verschönert sozusagen den Code und macht ihn übersichtlicher, da es nur die Werte und Funktionen freigibt, die auch wirklich gebraucht werden.

In Bildern gesprochen sieht das Ganze so aus:

Diagram JavaScript Façade Design Pattern

 

 

 

 

 

 

 

[2] Facade Diagram

Die Fassade gibt nach außen die Funktionen frei, die für die Sub-Systeme wichtig sind, ohne den ganzen Code zu zeigen.

Wann sollte das Facade-Pattern eingesetzt werden?

Wie bei jedem Pattern gilt: Mit Vorsicht und Bedacht verwenden!

Sinn ergibt  es immer dann, wenn Code verwendet werden soll von einem anderen Programm oder Entwickler. Auch beim Refactoring macht das Pattern Sinn. Um sich einen Überblick zu verschaffen und genau zu sehen, welche Funktion und welches Attribut verwendet wird.

Code-Example

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

var Mortgage = function (name) {
    this.name = name;
}

Mortgage.prototype = {

    applyFor: function (amount) {
        // access multiple subsystems...
        var result = "approved";
        if (!new Bank().verify(this.name, amount)) {
            result = "denied";
        } else if (!new Credit().get(this.name)) {
            result = "denied";
        } else if (!new Background().check(this.name)) {
            result = "denied";
        }
        return this.name + " has been " + result +
            " for a " + amount + " mortgage";
    }
}

var Bank = function () {
    this.verify = function (name, amount) {
        // complex logic ...
        return true;
    }
}

var Credit = function () {
    this.get = function (name) {
        // complex logic ...
        return true;
    }
}

var Background = function () {
    this.check = function (name) {
        // complex logic ...
        return true;
    }
}

function run() {
    var mortgage = new Mortgage("Joan Templeton");
    var result = mortgage.applyFor("$100,000");

    console.log(result);
}
[2] Code Example

Die Fassade in dem Beispiel ist die Funktion Mortgage. Die Funktionen Bank, Credit und Background beinhalten komplexe Logiken, die von Mortgage genutzt werden. Ein Nutzer benutzt aber nur die Fassade und muss sich nicht darum kümmern, was die komplexen Funktionen machen. Die Fassade regelt das für ihn und erwartet nur einen Namen und den amount bei der Funktion applyFor.

Relevanz in JavaScript

JavaScript kann durchaus sehr komplex werden. Um die Komplexität einzudämmen, macht die Verwendung vom Facade-Pattern Sinn.

 

Mehr über Java Programmierung erfahren

Quellen:

[1]: Fassade Definition – https://de.wikipedia.org/wiki/Fassade

[2]: JavaScript Facade – https://www.dofactory.com/javascript/design-patterns/facade

Zurück zur Übersicht

Kommentar verfassen

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

*Pflichtfelder

*