JavaScript Academy · Lektion

Modulmønstret (IIFE)

Indkapsle kode med funktioner, der kaldes med det samme.

Lektion 3 af 413 trin

Modulmønstret (IIFE) er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad modulmønstret løser

Før ES-moduler gjorde modulmønstret det muligt at samle relateret tilstand og adfærd, holde de interne detaljer private og eksponere en overskuelig offentlig API. Det er bygget på lukninger.

IIFE

En IIFE (øjeblikkeligt kaldt funktionsudtryk) er en funktion, der kører i det øjeblik, den bliver defineret. Når du omslutter den med parenteser og kalder den, opretter du straks et privat område.

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

Hvorfor køre den med det samme

En IIFE giver dig et privat område, der kun oprettes én gang, uden at efterlade en navngiven funktion. Alt indeni er isoleret fra det globale navnerum.

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

Returnering af en offentlig API

Modulmønstret er en IIFE, der returnerer et objekt. Objektets metoder er lukninger over de private variable og udgør den offentlige grænseflade.

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

Privat kontra offentlig

Alt, der erklæres indeni, men ikke returneres, forbliver privat. Kun det, du placerer på det returnerede objekt, er tilgængeligt.

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 hjælpefunktioner

Hjælpefunktioner kan ligge inde i modulet og bruges af offentlige metoder uden nogensinde at blive eksponeret.

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 afslørende modulmønster

En populær variant definerer alle funktioner privat og returnerer derefter et objekt, der "afslører" referencer til de offentlige funktioner. Den holder listen over den offentlige API tydelig nederst.

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

Fordi IIFE'en kun kører én gang, er et modul i praksis en singleton: Der findes præcis én instans med ét sæt private variable.

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"

Overførsel af afhængigheder

Du kan overføre globale værdier eller andre moduler som IIFE-argumenter. Det gør afhængigheder eksplicitte og muliggør sikker minificering.

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

Undgå forurening af det globale navnerum

Hele pointen er ét globalt navn, nemlig modulet, i stedet for dusinvis af fritstående variable. Det forhindrer navnekollisioner på tværs af scripts.

Forholdet til ES-moduler

I dag giver import/export et ægte modulområde på sprogniveauet og har i vid udstrækning afløst dette mønster. Men forståelsen af IIFE-moduler tydeliggør, hvordan privathed og indkapsling fungerer, og du vil stadig møde dem i ældre kode.

Hurtig kontrol

Modulmønstret og IIFE'er.

Besvar den i den interaktive lektion

Opsamling

Modulmønstret bruger en IIFE til at oprette et privat område og returnerer et objekt, hvis metoder er lukninger over skjult tilstand. Interne detaljer forbliver private; kun de returnerede medlemmer er offentlige. Varianter som det afslørende modulmønster tydeliggør API'en, og moduler fungerer som singletons. ES-import/export har nu afløst mønstret, men bygger på de samme idéer.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Modulmønstret (IIFE)” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Modulmønstret (IIFE)”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Modulmønstret (IIFE)”?

Indkapsle kode med funktioner, der kaldes med det samme. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Modulmønstret (IIFE)”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy