JavaScript Module Design Pattern: Strukturieren Sie Ihren Code

Das Modul-Designmuster in JavaScript ermöglicht es, Code in unabhängige Teile zu unterteilen und so gut strukturierten Code zu unterstützen. Wir zeigen Ihnen, wie es funktioniert.

In der Welt der JavaScript-Programmierung sind Module das Gebot der Stunde, wenn es darum geht, Teile Ihres Codes unabhängig von anderen Komponenten zu halten. Dies ermöglicht eine lose Kopplung und sorgt für gut strukturierten Code.

Für diejenigen, die mit objektorientierten Programmiersprachen vertraut sind, entsprechen Module den „Klassen“ in JavaScript. Eine der vielen Vorteile von Klassen ist die sogenannte „Encapsulation“ – das Schützen von Zuständen und Verhalten vor dem Zugriff durch andere Klassen. Das Modulmuster ermöglicht öffentliche und private Zugriffsebenen.

Module sollten als „Immediately-Invoked-Function-Expressions“ (IIFE) erstellt werden, um private Bereiche zu ermöglichen. Das bedeutet, dass Variablen und Methoden geschützt sind, und stattdessen ein Objekt anstelle einer Funktion zurückgegeben wird. Hier ist ein Beispiel:

(function() {
    // Deklariere private Variablen und/oder Funktionen
    return {
        // Deklariere öffentliche Variablen und/oder Funktionen
    }
})();

Lassen Sie uns dies anhand einer konkreten Implementierung verdeutlichen:

var HTMLChanger = (function() {
    var contents = 'Inhalte';

    var changeHTML = function() {
        var element = document.getElementById('attribute-to-change');
        element.innerHTML = contents;
    }

    return {
        callChangeHTML: function() {
            changeHTML();
            console.log(contents);
        }
    };
})();

HTMLChanger.callChangeHTML();       // Gibt aus: 'Inhalte'
console.log(HTMLChanger.contents);  // undefined

Beachten Sie, dass `callChangeHTML` an das zurückgegebene Objekt gebunden ist und im HTMLChanger-Namespace referenziert werden kann. Wenn Sie jedoch außerhalb des Moduls sind, können auf `contents` nicht zugegriffen werden.

Offenlegungsmuster (Revealing Module Pattern)

Eine Variation des Modulmusters wird als „Revealing Module Pattern“ bezeichnet. Der Zweck besteht darin, die Encapsulation beizubehalten und bestimmte in einem Objektliteral zurückgegebene Variablen und Methoden freizulegen. Die direkte Implementierung sieht so aus:

var Exposer = (function() {
    var privateVariable = 10;

    var privateMethod = function() {
        console.log('In einem privaten Methode!');
        privateVariable++;
    }

    var methodToExpose = function() {
        console.log('Dies ist eine Methode, die ich freilegen möchte!');
    }

    var otherMethodIWantToExpose = function() {
        privateMethod();
    }

    return {
        first: methodToExpose,
        second: otherMethodIWantToExpose
    };
})();

Exposer.first();        // Ausgabe: Dies ist eine Methode, die ich freilegen möchte!
Exposer.second();       // Ausgabe: In einem privaten Methode!
Exposer.methodToExpose; // undefined

Insgesamt bieten JavaScript-Module und das Revealing Module Pattern eine leistungsstarke Möglichkeit, Ihren Code zu strukturieren und zu schützen. Wählen Sie das Modell, das am besten zu Ihren Anforderungen passt, und profitieren Sie von besser strukturiertem und wartbarem Code.