JavaScript Academy · leksjon

Modulmønsteret (IIFE)

Inkapsle kode med umiddelbart aktiverte funksjoner.

Leksjon 3 av 413 trinn

Modulmønsteret (IIFE) er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva løser modulmønsteret

Før ES-moduler gjorde modulmønsteret det mulig å samle relatert tilstand og atferd, samtidig som interne detaljer ble holdt private og et ryddig offentlig API ble eksponert. Det er bygget på closures.

IIFE

En IIFE (Immediately Invoked Function Expression) er en funksjon som kjøres i det øyeblikket den defineres. Når den pakkes inn i parenteser og kalles, opprettes et privat scope med én gang.

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

Hvorfor kjøre den umiddelbart

En IIFE gir deg et privat scope som bare eksisterer én gang, uten at en navngitt funksjon blir liggende ubrukt. Alt inni er isolert fra det globale navnerommet.

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

Returnere et offentlig API

Modulmønsteret er en IIFE som returnerer et objekt. Objektmetodene er closures over de private variablene og danner det offentlige grensesnittet.

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

Privat kontra offentlig

Alt som deklareres inni, men ikke returneres, forblir privat. Bare det du legger på det returnerte objektet, er tilgjengelig.

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 hjelpefunksjoner

Hjelpefunksjoner kan ligge inne i modulen og brukes av offentlige metoder uten å bli eksponert.

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

Revealing Module Pattern

En populær variant definerer alle funksjoner privat og returnerer deretter et objekt som «avslører» referanser til de offentlige funksjonene. Den gjør listen over det offentlige API-et 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

Singletoner

Fordi IIFE-en kjøres én gang, fungerer en modul i praksis som en singleton: Det finnes nøyaktig én instans med ett sett privat tilstand.

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"

Sende inn avhengigheter

Du kan sende inn globale verdier eller andre moduler som IIFE-argumenter. Da blir avhengighetene tydelige, og trygg minifisering blir mulig.

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

Unngå å forurense globalt scope

Hele poenget er å ha ett globalt navn, nemlig modulen, i stedet for dusinvis av løse variabler. Dette hindrer navnekollisjoner mellom skript.

Forholdet til ES-moduler

I dag gir import/export ekte modulscope på språknivå og har i stor grad erstattet dette mønsteret. Men forståelse av IIFE-moduler tydeliggjør hvordan privat tilgang og innkapsling fungerer, og du vil fortsatt møte dem i eldre kode.

Hurtigsjekk

Modulmønsteret og IIFE-er.

Besvar den i den interaktive leksjonen

Oppsummering

Modulmønsteret bruker en IIFE til å opprette et privat scope og returnerer et objekt der metodene er closures over skjult tilstand. Interne detaljer forblir private; bare de returnerte medlemmene er offentlige. Varianter som Revealing Module Pattern gjør API-et tydeligere, og moduler fungerer som singletoner. ES-import/export har nå erstattet mønsteret, men bygger på de samme ideene.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Modulmønsteret (IIFE)» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Modulmønsteret (IIFE)», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Modulmønsteret (IIFE)»?

Inkapsle kode med umiddelbart aktiverte funksjoner. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Modulmønsteret (IIFE)»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy