Koncept modulov vychádza z modulárneho programovania. Táto paradigma navrhuje, že softvér by sa mal skladať zo samostatných, vzájomne zameniteľných komponentov tzv „moduly“ rozdelením funkcií programu do samostatných súborov, ktoré môžu fungovať samostatne alebo spojené v jednom aplikácie.

Modul je samostatný súbor, ktorý zapuzdruje kód, aby implementoval určitú funkčnosť a podporil opätovnú použiteľnosť a organizáciu.

Tu pokryjete modulové systémy používané v aplikáciách JavaScript, vrátane vzoru modulov, systému modulov CommonJS používaného vo väčšine aplikácií Node.js a systému modulov ES6.

Vzor modulu

Pred zavedením natívnych modulov JavaScriptu sa vzor návrhu modulu používal ako modulový systém na rozsah premenných a funkcií do jedného súboru.

Toto bolo implementované pomocou okamžite vyvolaných funkčných výrazov, všeobecne známych ako IIFE. IIFE je neopakovateľne použiteľná funkcia, ktorá sa spustí hneď po vytvorení.

Tu je základná štruktúra IIFE:

(funkciu () {
//kód tu
})();
(() => {
//kód tu
})();
(async () => {
//kód tu
})();
instagram viewer

Vyššie uvedený blok kódu popisuje IIFE používané v troch rôznych kontextoch.

IIFE boli použité, pretože premenné deklarované vo funkcii sú obmedzené na funkciu, takže sú iba prístupné vo vnútri funkcie a pretože funkcie vám umožňujú vrátiť údaje (zverejniť ich prístupný).

Napríklad:

konšt foo = (funkciu () {
konšt sayName = (meno) => {
konzoly.log('Hej, volám sa ${name}`);
 };
//Odhalenie premenných
vrátiť {
 callSayName: (meno) => sayName (meno),
 };
})();
//Prístup k exponovaným metódam
foo.callSayName("Bar");

Vyššie uvedený blok kódu je príkladom toho, ako boli moduly vytvorené pred zavedením natívnych modulov JavaScriptu.

Vyššie uvedený blok kódu obsahuje IIFE. IIFE obsahuje funkciu, ktorú sprístupňuje jej vrátením. Všetky premenné deklarované v IIFE sú chránené pred globálnym rozsahom. Metóda teda (povedzme meno) je prístupný len prostredníctvom verejnej funkcie, callSayName.

Všimnite si, že IIFE sa uloží do premennej, foo. Je to preto, že bez premennej ukazujúcej na jej umiestnenie v pamäti budú premenné po spustení skriptu neprístupné. Tento vzor je možný vďaka Uzávery JavaScriptu.

Modulový systém CommonJS

Systém modulov CommonJS je formát modulu definovaný skupinou CommonJS na riešenie problémov s rozsahom JavaScriptu spustením každého modulu v jeho mennom priestore.

Systém modulov CommonJS funguje tak, že moduly núti explicitne exportovať premenné, ktoré chcú vystaviť iným modulom.

Tento modulový systém bol vytvorený pre JavaScript na strane servera (Node.js) a ako taká nie je štandardne podporovaná v prehliadačoch.

Ak chcete implementovať moduly CommonJS vo svojom projekte, musíte najprv inicializovať NPM vo svojej aplikácii spustením:

npm init -y

Premenné exportované podľa systému modulov CommonJS možno importovať takto:

//randomModule.js
//nainštalovaný balík
konšt installImport = vyžadovať("názov-balíka");
//lokálny modul
konšt localImport = vyžadovať("/path-to-module");

Moduly sa importujú do CommonJS pomocou vyžadovať príkaz, ktorý načíta súbor JavaScript, vykoná súbor na čítanie a vráti súbor exportov objekt. The exportov obsahuje všetky dostupné exporty v module.

Premennú môžete exportovať podľa systému modulov CommonJS pomocou pomenovaných exportov alebo predvolených exportov.

Pomenované exporty

Pomenované exporty sú exporty identifikované priradenými názvami. Pomenované exporty umožňujú viacero exportov na modul, na rozdiel od predvolených exportov.

Napríklad:

//main.js
exports.myExport = funkciu () {
konzoly.log("Toto je príklad z pomenovaný export");
};
exports.anotherExport = funkciu () {
konzoly.log("Toto je ďalší príklad z pomenovaný export");
};

Vo vyššie uvedenom bloku kódu exportujete dve pomenované funkcie (myExport a inýExport) ich pripojením k exportov objekt.

Podobne môžete exportovať funkcie takto:

konšt myExport = funkciu () {
konzoly.log("Toto je príklad z pomenovaný export");
};
konšt inýExport = funkciu () {
konzoly.log("Toto je ďalší príklad z pomenovaný export");
};
modul.exportov = {
 myExport,
 inýExport,
};

Vo vyššie uvedenom bloku kódu nastavíte exportov objekt na pomenované funkcie. Môžete priradiť iba exportov objekt na nový objekt cez modul objekt.

Váš kód by vyvolal chybu, ak by ste sa to pokúsili urobiť týmto spôsobom:

//zlým smerom
exportov = {
 myExport,
 inýExport,
};

Existujú dva spôsoby, ako môžete importovať pomenované exporty:

1. Importujte všetky exporty ako jeden objekt a pristupujte k nim samostatne pomocou bodkový zápis.

Napríklad:

//otherModule.js
konšt foo = vyžadovať("./Hlavná");
foo.myExport();
foo.inýExport();

2. Deštrukturalizovať exporty z exportov objekt.

Napríklad:

//otherModule.js
konšt { myExport, otherExport } = vyžadovať("./Hlavná");
myExport();
dalsiExport();

Jedna vec je spoločná pre všetky spôsoby importu, musia byť importované s rovnakými názvami, s ktorými boli exportované.

Predvolené exporty

Predvolený export je export identifikovaný ľubovoľným názvom podľa vášho výberu. Pre každý modul môžete mať iba jeden predvolený export.

Napríklad:

//main.js
triedaFoo{
 bar() {
konzoly.log("Toto je príklad z a predvolenáexport");
 }
}
modul.exportov = Foo;

V bloku kódu vyššie exportujete triedu (Foo) opätovným priradením exportov namietať proti tomu.

Importovanie predvolených exportov je podobné importovaniu pomenovaných exportov s tým rozdielom, že na ich import môžete použiť ľubovoľný názov podľa vlastného výberu.

Napríklad:

//otherModule.js
konšt Bar = vyžadovať("./Hlavná");
konšt objekt = Nový Bar();
objekt.bar();

V bloku kódu vyššie bol pomenovaný predvolený export Bar, hoci môžete použiť ľubovoľné meno.

Modulový systém ES6

Modulový systém ECMAScript Harmony, ľudovo známy ako moduly ES6, je oficiálny modulový systém JavaScriptu.

Moduly ES6 sú podporované prehliadačmi a servermi, aj keď pred ich použitím potrebujete trochu konfigurácie.

V prehliadačoch musíte zadať typu ako modul v značke importu skriptu.

Ako:

//index.html
<skript src="./app.js" typ="modul"></script>

V Node.js musíte nastaviť typu do modul v tvojom package.json súbor.

Ako:

//package.json
"typu":"modul"

Premenné môžete tiež exportovať pomocou modulového systému ES6 pomocou pomenovaných exportov alebo predvolených exportov.

Pomenované exporty

Podobne ako pomenované importy v moduloch CommonJS sú identifikované podľa názvov, ktorým boli priradené, a umožňujú viacero exportov na modul.

Napríklad:

//main.js
exportkonšt myExport = funkciu () {
konzoly.log("Toto je príklad z pomenovaný export");
};
exportkonšt inýExport = funkciu () {
konzoly.log("Toto je ďalší príklad z pomenovaný export");
};

V systéme modulov ES6 sa pomenované exporty exportujú tak, že premennej sa predpona export kľúčové slovo.

Pomenované exporty je možné importovať do iného modulu v ES6 rovnakým spôsobom ako CommonJS:

  • Deštrukturalizácia požadovaných vývozov z exportov objekt.
  • Importovanie všetkých exportov ako jedného objektu a samostatný prístup k nim pomocou bodkovej notácie.

Tu je príklad deštruktúrovania:

//otherModule.js
importovať { myExport, otherExport } od "./main.js";
myExport()
dalsiExport()

Tu je príklad importovania celého objektu:

importovať * ako foo od './main.js'
foo.myExport()
foo.inýExport()

V bloku kódu vyššie je hviezdička (*) znamená „všetci“. The ako kľúčové slovo priraďuje exportov námietka proti reťazcu, ktorý za ním nasleduje, v tomto prípade foo.

Predvolené exporty

Podobne ako predvolené exporty v CommonJS sú identifikované ľubovoľným názvom podľa vášho výberu a na modul môžete mať iba jeden predvolený export.

Napríklad:

//main.js
triedaFoo{
 bar() {
konzoly.log("Toto je príklad z a predvolenáexport");
 }
}
exportpredvolená Foo;

Predvolené exporty sa vytvoria pridaním predvolená kľúčové slovo po export kľúčové slovo, za ktorým nasleduje názov exportu.

Importovanie predvolených exportov je podobné importovaniu pomenovaných exportov s tým rozdielom, že na ich import môžete použiť ľubovoľný názov podľa vlastného výberu.

Napríklad:

//otherModule.js
importovať Bar od "./main.js";

Zmiešaný vývoz

Štandard modulu ES6 vám na rozdiel od CommonJS umožňuje mať predvolené exporty aj pomenované exporty v jednom module.

Napríklad:

//main.js
exportkonšt myExport = funkciu () {
konzoly.log("Toto je ďalší príklad z pomenovaný export");
};
triedaFoo{
 bar() {
konzoly.log("Toto je príklad z a predvolenáexport");
 }
}
exportpredvolená Foo;

Význam modulov

Rozdelenie kódu do modulov nielenže uľahčuje ich čítanie, ale robí ho viac opakovane použiteľným a udržiavateľným. Moduly v JavaScripte tiež znižujú náchylnosť vášho kódu na chyby, pretože všetky moduly sa štandardne spúšťajú v prísnom režime.