JavaScript Academy · Lektion

Das Modulpattern (IIFE)

Kapseln Sie Code mit sofort ausgeführten Funktionen.

Das Modulpattern (IIFE) ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was das Module Pattern löst

Vor ES-Modulen ermöglichte das Module Pattern, zusammengehörigen Zustand und zugehöriges Verhalten zu bündeln, die Interna privat zu halten und eine klare öffentliche API bereitzustellen. Es basiert auf Closures.

Die IIFE

Eine IIFE (Immediately Invoked Function Expression) ist eine Funktion, die in dem Moment ausgeführt wird, in dem sie definiert wird. Wenn Sie sie in Klammern einschließen und aufrufen, erzeugen Sie sofort einen privaten Gültigkeitsbereich.

const result = (function () {
  return 42;
})();
console.log(result); // 42

Warum sie sofort ausgeführt wird

Die IIFE bietet einen einmalig verwendbaren privaten Gültigkeitsbereich, ohne eine benannte Funktion zurückzulassen. Alles darin ist vom globalen Namensraum isoliert.

(function () {
  const temp = "not global";
  console.log(temp);
})();
// temp is unreachable out here

Eine öffentliche API zurückgeben

Das Module Pattern ist eine IIFE, die ein Objekt zurückgibt. Die Objektmethoden sind Closures über den privaten Variablen und bilden die öffentliche Schnittstelle.

const counter = (function () {
  let count = 0; // private
  return {
    inc: () => ++count,
    value: () => count
  };
})();
counter.inc();
console.log(counter.value()); // 1

Privat und öffentlich

Alles, was innerhalb deklariert, aber nicht zurückgegeben wird, bleibt privat. Nur das, was Sie auf das zurückgegebene Objekt setzen, ist zugänglich.

const calc = (function () {
  const pi = 3.14159; // private constant
  return {
    area: (r) => pi * r * r
  };
})();
console.log(calc.area(2)); // 12.56636
console.log(calc.pi);      // undefined

Private Hilfsfunktionen

Hilfsfunktionen können innerhalb des Moduls liegen, von öffentlichen Methoden verwendet, aber niemals nach außen gegeben werden.

const validator = (function () {
  const clean = (s) => s.trim().toLowerCase(); // private
  return {
    isEmail: (s) => clean(s).includes("@")
  };
})();
console.log(validator.isEmail(" A@B.com ")); // true

Das Revealing Module Pattern

Eine beliebte Variante definiert alle Funktionen privat und gibt anschließend ein Objekt zurück, das Verweise auf die öffentlichen Funktionen „offenlegt“. Dadurch bleibt die Liste der öffentlichen API am Ende übersichtlich.

const store = (function () {
  let items = [];
  function add(x) { items.push(x); }
  function count() { return items.length; }
  return { add, count }; // reveal
})();
store.add("a");
console.log(store.count()); // 1

Singletons

Da die IIFE einmal ausgeführt wird, ist ein Modul effektiv ein Singleton: Es gibt genau eine Instanz mit genau einem privaten Zustand.

const config = (function () {
  let settings = { theme: "dark" };
  return {
    get: (k) => settings[k],
    set: (k, v) => { settings[k] = v; }
  };
})();
config.set("theme", "light");
console.log(config.get("theme")); // "light"

Abhängigkeiten übergeben

Sie können globale Objekte oder andere Module als Argumente an die IIFE übergeben. Dadurch werden Abhängigkeiten explizit und eine sichere Minifizierung ermöglicht.

const mathUtils = (function (M) {
  return { roundUp: (n) => M.ceil(n) };
})(Math);
console.log(mathUtils.roundUp(4.1)); // 5

Globale Verschmutzung vermeiden

Der eigentliche Zweck besteht darin, einen globalen Namen, das Modul, statt Dutzender einzelner Variablen zu verwenden. So verhindern Sie Namenskollisionen zwischen Skripten.

Beziehung zu ES-Modulen

Heute bieten import/export echten Modul-Gültigkeitsbereich auf Sprachebene und ersetzen dieses Muster weitgehend. Das Verständnis von IIFE-Modulen verdeutlicht jedoch, wie Privatsphäre und Kapselung funktionieren, und in älterem Code werden Sie ihnen weiterhin begegnen.

Kurztest

Das Module Pattern und IIFEs.

Zusammenfassung

Das Module Pattern verwendet eine IIFE, um einen privaten Gültigkeitsbereich zu erzeugen, und gibt ein Objekt zurück, dessen Methoden Closures über den verborgenen Zustand sind. Die Interna bleiben privat, nur die zurückgegebenen Elemente sind öffentlich. Varianten wie das Revealing Module Pattern machen die API übersichtlicher, und Module verhalten sich wie Singletons. ES-import/export haben das Muster inzwischen abgelöst, basieren aber auf denselben Grundideen.

Häufig gestellte Fragen

Ist die Lektion „Das Modulpattern (IIFE)“ kostenlos?

Ja — der vollständige Text von „Das Modulpattern (IIFE)“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Das Modulpattern (IIFE)“?

Kapseln Sie Code mit sofort ausgeführten Funktionen. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Das Modulpattern (IIFE)“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy