JavaScript Academy · Oppitunti

Moduulimalli (IIFE)

Kapseloikaa koodia välittömästi kutsuttavilla funktioilla.

Oppitunti 3/413 vaihetta

Moduulimalli (IIFE) on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mihin moduulikuvio ratkaisee

Ennen ES-moduuleja moduulikuvion avulla saattoi koota toisiinsa liittyvän tilan ja toiminnallisuuden yhteen, pitää sisäiset osat yksityisinä ja tarjota selkeän julkisen API:n. Se perustuu sulkeumiin.

IIFE

IIFE (Immediately Invoked Function Expression) on funktio, joka suoritetaan heti määrittelyn jälkeen. Kun funktio ympäröidään sulkeilla ja kutsutaan, se luo välittömästi yksityisen näkyvyysalueen.

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

Miksi suorittaa heti

IIFE tarjoaa kertaluonteisen yksityisen näkyvyysalueen ilman, että nimetty funktio jää tarpeettomasti määritellyksi. Kaikki sen sisällä oleva on eristetty globaalista nimiavaruudesta.

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

Julkisen API:n palauttaminen

Moduulikuvio on IIFE, joka palauttaa olion. Olion metodit ovat yksityisten muuttujien muodostamia sulkeumia ja muodostavat julkisen rajapinnan.

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

Yksityinen ja julkinen

Kaikki sisällä määritelty, mutta palauttamatta jätetty, pysyy yksityisenä. Käytettävissä on vain se, mitä palautettuun olioon lisätään.

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

Yksityiset apufunktiot

Apufunktiot voivat olla moduulin sisällä julkisten metodien käytettävissä ilman, että niitä koskaan asetetaan saataville ulkopuolelle.

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

Paljastava moduulikuvio

Suositussa muunnelmassa kaikki funktiot määritellään yksityisinä, minkä jälkeen palautetaan olio, joka ”paljastaa” viittaukset julkisiin funktioihin. Näin julkisen API:n luettelo pysyy selkeänä koodin lopussa.

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

Singletonit

Koska IIFE suoritetaan kerran, moduuli on käytännössä singleton: olemassa on täsmälleen yksi instanssi ja yksi yksityisen tilan kokonaisuus.

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"

Riippuvuuksien välittäminen

Voitte välittää globaalit muuttujat tai muut moduulit IIFE:n argumentteina. Näin riippuvuudet tulevat näkyviksi ja minifiointi on turvallista.

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

Globaalin nimiavaruuden saastumisen välttäminen

Tarkoituksena on käyttää yhtenä globaalina nimenä moduulia kymmenien irrallisten muuttujien sijaan. Tämä estää nimien yhteentörmäykset komentosarjojen välillä.

Suhde ES-moduuleihin

Nykyään import/export tarjoavat todellisen moduulikohtaisen näkyvyysalueen kielitasolla ja ovat suurelta osin korvanneet tämän kuvion. IIFE-moduulien ymmärtäminen selventää kuitenkin yksityisyyden ja kapseloinnin toimintaa, ja niitä näkee edelleen vanhassa koodissa.

Pikatesti

Moduulikuvio ja IIFE:t.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Moduulikuvio käyttää IIFE:tä yksityisen näkyvyysalueen luomiseen ja palauttaa olion, jonka metodit ovat piilotetun tilan muodostamia sulkeumia. Sisäiset osat pysyvät yksityisinä; vain palautetut jäsenet ovat julkisia. Paljastavan moduulikuvion kaltaiset muunnelmat selkeyttävät API:a, ja moduulit toimivat singletonteina. ES:n import/export korvaavat nykyään tämän kuvion, mutta perustuvat samoihin ajatuksiin.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Moduulimalli (IIFE)” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Moduulimalli (IIFE)”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Moduulimalli (IIFE)”?

Kapseloikaa koodia välittömästi kutsuttavilla funktioilla. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Moduulimalli (IIFE)”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy