JavaScript Academy · Lekcja

Wzorzec modułu (IIFE)

Proszę hermetyzować kod za pomocą funkcji wywoływanych natychmiast.

Wzorzec modułu (IIFE) to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Problemy rozwiązywane przez wzorzec modułu

Przed wprowadzeniem modułów ES wzorzec modułu pozwalał łączyć powiązany stan i powiązane zachowanie, zachowując szczegóły wewnętrzne jako prywatne i udostępniając przejrzyste publiczne API. Jest oparty na domknięciach.

IIFE

IIFE (Immediately Invoked Function Expression) to funkcja uruchamiana natychmiast po zdefiniowaniu. Umieszczenie jej w nawiasach i wywołanie tworzy od razu prywatny zakres.

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

Dlaczego uruchamiać ją natychmiast

IIFE zapewnia jednorazowy prywatny zakres bez pozostawiania nazwanej funkcji, która nie będzie już potrzebna. Wszystko wewnątrz jest odizolowane od globalnej przestrzeni nazw.

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

Zwracanie publicznego API

Wzorzec modułu to IIFE zwracająca obiekt. Metody obiektu są domknięciami obejmującymi prywatne zmienne i tworzą publiczny interfejs.

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

Prywatne a publiczne

Wszystko, co zostanie zadeklarowane wewnątrz, ale nie zostanie zwrócone, pozostaje prywatne. Dostępne jest wyłącznie to, co zostanie umieszczone w zwracanym obiekcie.

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

Prywatne funkcje pomocnicze

Funkcje pomocnicze mogą znajdować się wewnątrz modułu i być używane przez metody publiczne, ale nigdy nie muszą być udostępniane.

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

Wzorzec ujawniającego modułu

Popularny wariant definiuje wszystkie funkcje jako prywatne, a następnie zwraca obiekt, który „ujawnia” odwołania do funkcji publicznych. Dzięki temu lista publicznego API jest przejrzysta i znajduje się na dole.

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

Singletony

Ponieważ IIFE wykonuje się raz, moduł jest w praktyce singletonem: istnieje dokładnie jedna instancja z jednym zestawem prywatnego stanu.

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"

Przekazywanie zależności

Globalne obiekty lub inne moduły można przekazywać jako argumenty IIFE, dzięki czemu zależności są jawne, a bezpieczna minifikacja staje się możliwa.

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

Unikanie zanieczyszczania globalnego zakresu

Cały sens polega na użyciu jednej globalnej nazwy — modułu — zamiast dziesiątek luźnych zmiennych. Zapobiega to kolizjom nazw między skryptami.

Związek z modułami ES

Obecnie import/export zapewniają prawdziwy zakres modułu na poziomie języka, w dużej mierze zastępując ten wzorzec. Zrozumienie modułów IIFE wyjaśnia jednak działanie prywatności i enkapsulacji, a z tym wzorcem nadal można spotkać się w starszym kodzie.

Szybkie sprawdzenie

Wzorzec modułu i IIFE.

Podsumowanie

Wzorzec modułu korzysta z IIFE, aby utworzyć prywatny zakres, a następnie zwraca obiekt, którego metody są domknięciami obejmującymi ukryty stan. Szczegóły wewnętrzne pozostają prywatne; publiczne są tylko zwrócone elementy. Warianty, takie jak wzorzec ujawniającego modułu, porządkują API, a moduły działają jak singletony. Moduły ES import/export zastąpiły dziś ten wzorzec, ale opierają się na tych samych założeniach.

Często zadawane pytania

Czy lekcja „Wzorzec modułu (IIFE)” jest bezpłatna?

Tak — pełny tekst „Wzorzec modułu (IIFE)” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wzorzec modułu (IIFE)”?

Proszę hermetyzować kod za pomocą funkcji wywoływanych natychmiast. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Wzorzec modułu (IIFE)”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy