JavaScript Academy · Lektion

Modulmönstret (IIFE)

Kapsla in kod med funktioner som anropas omedelbart.

Lektion 3 av 413 steg

Modulmönstret (IIFE) är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad modulmönstret löser

Före ES-moduler gjorde modulmönstret det möjligt att samla relaterat tillstånd och beteende, samtidigt som interna delar hölls privata och ett tydligt offentligt API exponerades. Mönstret bygger på closures.

IIFE:n

En IIFE (Immediately Invoked Function Expression) är en funktion som körs i samma ögonblick som den definieras. Om du omsluter den med parenteser och anropar den skapas ett privat scope direkt.

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

Varför köra den direkt

En IIFE ger dig ett privat scope som bara används en gång, utan att du behöver lämna kvar en namngiven funktion. Allt inuti är isolerat från den globala namnrymden.

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

Returnera ett offentligt API

Modulmönstret är en IIFE som returnerar ett objekt. Objektets metoder är closures över de privata variablerna och bildar det offentliga gränssnittet.

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

Privat kontra offentligt

Allt som deklareras inuti men inte returneras förblir privat. Endast det du lägger på det returnerade objektet är åtkomligt.

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

Privata hjälpfunktioner

Hjälpfunktioner kan ligga inuti modulen och användas av offentliga metoder utan att någonsin exponeras.

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

Det avslöjande modulmönstret

En populär variant definierar alla funktioner privat och returnerar sedan ett objekt som exponerar referenser till de offentliga funktionerna. Då blir listan över det offentliga API:t tydlig längst ned.

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

Singleton-moduler

Eftersom IIFE:n körs en gång fungerar en modul i praktiken som en singleton: det finns exakt en instans med en uppsättning privata tillstånd.

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"

Skicka in beroenden

Du kan skicka in globala objekt eller andra moduler som argument till IIFE:n. Då blir beroendena explicita och säker minifiering möjliggörs.

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

Undvika global nedskräpning

Hela poängen är att ha ett globalt namn, modulen, i stället för dussintals lösa variabler. Det förhindrar namnkonflikter mellan skript.

Förhållandet till ES-moduler

I dag ger import/export ett riktigt modulscope på språknivå och har till stor del ersatt det här mönstret. Men genom att förstå IIFE-moduler blir det tydligare hur privat åtkomst och inkapsling fungerar, och du kommer fortfarande att stöta på dem i äldre kod.

Snabb kontroll

Modulmönstret och IIFE:er.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Modulmönstret använder en IIFE för att skapa ett privat scope och returnerar ett objekt vars metoder är closures över dolt tillstånd. Interna delar förblir privata; endast de returnerade medlemmarna är offentliga. Varianter som det avslöjande modulmönstret gör API:t tydligare, och moduler fungerar som singletons. ES import/export har nu ersatt mönstret men bygger på samma idéer.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Modulmönstret (IIFE)” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Modulmönstret (IIFE)”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Modulmönstret (IIFE)”?

Kapsla in kod med funktioner som anropas omedelbart. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Modulmönstret (IIFE)”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy