Koncept modula dolazi iz paradigme modularnog programiranja. Ova paradigma predlaže da softver treba biti sastavljen od zasebnih, međusobno zamjenjivih komponenti tzv "module" rastavljanjem programskih funkcija u samostalne datoteke koje mogu raditi odvojeno ili spojene u primjena.
Modul je samostalna datoteka koja enkapsulira kod za implementaciju određene funkcionalnosti i promicanje ponovne upotrebe i organizacije.
Ovdje ćete pokriti sustave modula koji se koriste u JavaScript aplikacijama, uključujući obrazac modula, sustav modula CommonJS koji se koristi u većini aplikacija Node.js i sustav modula ES6.
Uzorak modula
Prije uvođenja izvornih JavaScript modula, uzorak dizajna modula korišten je kao sustav modula za opseg varijabli i funkcija u jednu datoteku.
Ovo je implementirano pomoću odmah pozvanih funkcijskih izraza, popularno poznatih kao IIFE. IIFE je funkcija koja se ne može ponovno koristiti i pokreće se čim se stvori.
Evo osnovne strukture IIFE-a:
(funkcija () {
//kodirajte ovdje
})();(() => {
//kodirajte ovdje
})();
(asinkroni () => {
//kodirajte ovdje
})();
Gornji blok koda opisuje IIFE-ove koji se koriste u tri različita konteksta.
IIFE-ovi su korišteni jer su varijable deklarirane unutar funkcije ograničene na funkciju, što ih čini samo dostupni unutar funkcije, a budući da vam funkcije omogućuju vraćanje podataka (objavljujući ih pristupačan).
Na primjer:
konst foo = (funkcija () {
konst reciName = (ime) => {
konzola.log(`Hej, ja sam ${name}`);
};
//Izlaganje varijabli
povratak {
callSayName: (ime) => reciName (ime),
};
})();
//Pristup izloženim metodama
foo.callSayName("Bar");
Gore navedeni blok koda primjer je načina na koji su moduli stvoreni prije uvođenja izvornih JavaScript modula.
Gornji blok koda sadrži IIFE. IIFE sadrži funkciju koju čini dostupnom vraćanjem. Sve varijable deklarirane u IIFE zaštićene su od globalnog opsega. Dakle, metoda (reciName) dostupan je samo putem javne funkcije, nazoviReciIme.
Primijetite da je IIFE spremljen u varijablu, fuj. To je zato što, bez varijable koja pokazuje na svoju lokaciju u memoriji, varijable će biti nedostupne nakon pokretanja skripte. Ovaj obrazac je moguć zbog JavaScript zatvaranja.
Sustav modula CommonJS
Sustav modula CommonJS je format modula definiran od strane grupe CommonJS za rješavanje problema opsega JavaScripta izvršavanjem svakog modula u njegovom prostoru imena.
Sustav modula CommonJS funkcionira tako da tjera module da eksplicitno izvoze varijable koje žele izložiti drugim modulima.
Ovaj sustav modula stvoren je za JavaScript na strani poslužitelja (Node.js) i kao takav nije standardno podržan u preglednicima.
Da biste implementirali CommonJS module u svoj projekt, prvo morate inicijalizirati NPM u svojoj aplikaciji pokretanjem:
npm init -y
Varijable izvezene prema sustavu modula CommonJS mogu se uvesti ovako:
//randomModule.js
//instalirani paket
konst instaliranImport = zahtijevati("ime-paketa");
//lokalni modul
konst lokalni uvoz = zahtijevati("/path-to-module");
Moduli se uvoze u CommonJS pomoću zahtijevati iskaz, koji čita JavaScript datoteku, izvršava pročitanu datoteku i vraća izvozi objekt. The izvozi objekt sadrži sve dostupne izvoze u modulu.
Varijablu možete izvesti prema sustavu modula CommonJS koristeći ili imenovane izvoze ili zadane izvoze.
Nazvan Izvoz
Imenovani izvozi su izvozi identificirani nazivima koji su im dodijeljeni. Imenovani izvozi dopuštaju višestruke izvoze po modulu, za razliku od zadanih izvoza.
Na primjer:
//main.js
exports.myExport = funkcija () {
konzola.log("Ovo je primjer od imenovani izvoz");
};
izvozi.anotherExport = funkcija () {
konzola.log("Ovo je još jedan primjer od imenovani izvoz");
};
U gornjem bloku koda izvozite dvije imenovane funkcije (mojIzvoz i anotherExport) pričvršćujući ih na izvozi objekt.
Slično, možete izvesti funkcije na sljedeći način:
konst mojIzvoz = funkcija () {
konzola.log("Ovo je primjer od imenovani izvoz");
};
konst anotherExport = funkcija () {
konzola.log("Ovo je još jedan primjer od imenovani izvoz");
};
modul.izvozi = {
moj izvoz,
još jedan izvoz,
};
U gornjem bloku koda postavljate izvozi objekt na imenovane funkcije. Možete samo dodijeliti izvozi objekt na novi objekt kroz modul objekt.
Vaš bi kod izbacio pogrešku ako biste to pokušali učiniti na ovaj način:
//pogrešan način
izvozi = {
moj izvoz,
još jedan izvoz,
};
Dva su načina na koje možete uvesti imenovane izvoze:
1. Uvezite sve izvoze kao jedan objekt i pristupite im zasebno koristeći notacija točka.
Na primjer:
//otherModule.js
konst foo = zahtijevati("./glavni");
fuj.myExport();
fuj.drugiIzvoz();2. Destrukturirati izvoz iz izvozi objekt.
Na primjer:
//otherModule.js
konst { myExport, anotherExport } = zahtijevati("./glavni");
mojIzvoz();
anotherExport();
Jedna je stvar zajednička u svim metodama uvoza, moraju se uvoziti koristeći ista imena s kojima su izvezeni.
Zadani izvozi
Zadani izvoz je izvoz identificiran bilo kojim imenom po vašem izboru. Možete imati samo jedan zadani izvoz po modulu.
Na primjer:
//main.js
razredafuj{
bar() {
konzola.log("Ovo je primjer od a zadanoizvoz");
}
}
modul.izvozi = Foo;
U gornjem bloku koda izvozite klasu (fuj) preraspodjelom izvozi prigovoriti tome.
Uvoz zadanih izvoza sličan je uvozu imenovanih izvoza, osim što možete koristiti bilo koje ime po svom izboru za njihov uvoz.
Na primjer:
//otherModule.js
konst Bar = zahtijevati("./glavni");
konst objekt = novi Bar();
objekt.bar();
U gornjem bloku koda imenovan je zadani izvoz Bar, iako možete koristiti bilo koje ime po svom izboru.
Sustav modula ES6
Sustav modula ECMAScript Harmony, popularno poznat kao ES6 moduli, službeni je sustav JavaScript modula.
ES6 module podržavaju preglednici i poslužitelji, iako je potrebno malo konfiguracije prije njihove upotrebe.
U preglednicima morate navesti tip kao modul u oznaci uvoza skripte.
ovako:
//index.html
<skripta src="./app.js" vrsta="modul"></script>
U Node.js, morate postaviti tip do modul u vašem paket.json datoteka.
ovako:
//package.json
"tip":"modul"
Također možete izvesti varijable pomoću ES6 modularnog sustava koristeći ili imenovane izvoze ili zadane izvoze.
Nazvan Izvoz
Slično imenovanim uvozima u CommonJS modulima, identificiraju se nazivima koji su im dodijeljeni i dopuštaju više izvoza po modulu.
Na primjer:
//main.js
izvozkonst mojIzvoz = funkcija () {
konzola.log("Ovo je primjer od imenovani izvoz");
};
izvozkonst anotherExport = funkcija () {
konzola.log("Ovo je još jedan primjer od imenovani izvoz");
};
U sustavu modula ES6, imenovani izvozi izvoze se tako da se varijabli doda prefiks izvoz ključna riječ.
Imenovani izvozi mogu se uvesti u drugi modul u ES6 na isti način kao i CommonJS:
- Destrukturiranje potrebnog izvoza iz izvozi objekt.
- Uvoz svih izvoza kao jednog objekta i pristupanje njima zasebno pomoću oznake točka.
Evo primjera destrukturiranja:
//otherModule.js
uvoz { myExport, anotherExport } iz "./main.js";
mojIzvoz()
anotherExport()
Evo primjera uvoza cijelog objekta:
uvoz * kao fuj iz './main.js'
fuj.myExport()
fuj.drugiIzvoz()
U gornjem bloku koda, zvjezdica (*) znači "sve". The kao ključna riječ dodjeljuje izvozi objekt na niz koji slijedi, u ovom slučaju, fuj.
Zadani izvozi
Slično zadanim izvozima u CommonJS-u, identificirani su bilo kojim imenom po vašem izboru, a možete imati samo jedan zadani izvoz po modulu.
Na primjer:
//main.js
razredafuj{
bar() {
konzola.log("Ovo je primjer od a zadanoizvoz");
}
}
izvozzadano Foo;
Zadani izvozi stvaraju se dodavanjem zadano ključna riječ nakon izvoz ključnu riječ, iza koje slijedi naziv izvoza.
Uvoz zadanih izvoza sličan je uvozu imenovanih izvoza, osim što možete koristiti bilo koje ime po svom izboru za njihov uvoz.
Na primjer:
//otherModule.js
uvoz Bar iz "./main.js";
Mješoviti izvoz
Standard modula ES6 omogućuje vam da imate i zadane izvoze i imenovane izvoze u jednom modulu, za razliku od CommonJS-a.
Na primjer:
//main.js
izvozkonst mojIzvoz = funkcija () {
konzola.log("Ovo je još jedan primjer od imenovani izvoz");
};
razredafuj{
bar() {
konzola.log("Ovo je primjer od a zadanoizvoz");
}
}
izvozzadano Foo;
Važnost modula
Dijeljenje koda na module ne samo da ih čini lakšim za čitanje, već ga čini višekratnim korištenjem i održavanjem. Moduli u JavaScriptu također čine vaš kod manje sklonim pogreškama jer se svi moduli prema zadanim postavkama izvršavaju u strogom načinu rada.
