Begrebet moduler kommer fra det modulære programmeringsparadigme. Dette paradigme foreslår, at software skal være sammensat af separate, udskiftelige komponenter kaldet "moduler" ved at opdele programfunktioner i selvstændige filer, der kan arbejde separat eller koblet i en Ansøgning.
Et modul er en selvstændig fil, der indkapsler kode for at implementere visse funktioner og fremme genanvendelighed og organisering.
Her vil du dække de modulsystemer, der bruges i JavaScript-applikationer, inklusive modulmønsteret, CommonJS-modulsystemet, der bruges i de fleste Node.js-applikationer, og ES6-modulsystemet.
Modulmønsteret
Før introduktionen af native JavaScript-moduler blev moduldesignmønsteret brugt som et modulsystem til at scope variabler og funktioner til en enkelt fil.
Dette blev implementeret ved hjælp af umiddelbart påkaldte funktionsudtryk, populært kendt som IIFE'er. En IIFE er en funktion, der ikke kan genbruges, og som kører, så snart den er oprettet.
Her er den grundlæggende struktur for en IIFE:
(fungere () {
//kode her
})();(() => {
//kode her
})();
(asynkron () => {
//kode her
})();
Kodeblokken ovenfor beskriver IIFE'er brugt i tre forskellige sammenhænge.
IIFE'er blev brugt, fordi variabler erklæret inde i en funktion er scoped til funktionen, hvilket gør dem kun tilgængelig inde i funktionen, og fordi funktioner giver dig mulighed for at returnere data (gør dem offentligt tilgængelig).
For eksempel:
konst foo = (fungere () {
konst sayName = (navn) => {
konsol.log('Hej, jeg hedder ${name}`);
};
//Eksponering af variablerne
Vend tilbage {
callSayName: (navn) => sigNavn (navn),
};
})();
//Adgang til udsatte metoder
foo.callSayName("Bar");
Kodeblokken ovenfor er et eksempel på, hvordan moduler blev oprettet før introduktionen af native JavaScript-moduler.
Kodeblokken ovenfor indeholder en IIFE. IIFE indeholder en funktion, som den gør tilgængelig ved at returnere den. Alle de variabler, der er deklareret i IIFE, er beskyttet fra det globale omfang. Således er metoden (sig Navn) er kun tilgængelig via den offentlige funktion, kaldSayName.
Bemærk, at IIFE er gemt i en variabel, foo. Dette er fordi, uden at en variabel peger på dens placering i hukommelsen, vil variablerne være utilgængelige efter scriptet er kørt. Dette mønster er muligt pga JavaScript-lukninger.
CommonJS-modulsystemet
CommonJS-modulsystemet er et modulformat defineret af CommonJS-gruppen for at løse JavaScript-omfangsproblemer ved at udføre hvert modul i dets navneområde.
CommonJS-modulsystemet virker ved at tvinge moduler til eksplicit at eksportere variabler, de ønsker at eksponere til andre moduler.
Dette modulsystem er skabt til server-side JavaScript (Node.js) og er som sådan ikke understøttet som standard i browsere.
For at implementere CommonJS-moduler i dit projekt, skal du først initialisere NPM i din applikation ved at køre:
npm init -y
Variabler, der eksporteres efter CommonJS-modulsystemet, kan importeres på følgende måde:
//randomModule.js
//installeret pakke
konst installeretImport = kræve("pakkenavn");
//lokalt modul
konst localImport = kræve("/path-to-module");
Moduler importeres i CommonJS ved hjælp af kræve sætning, som læser en JavaScript-fil, udfører den læste fil og returnerer eksport objekt. Det eksport objektet indeholder alle tilgængelige eksporter i modulet.
Du kan eksportere en variabel efter CommonJS-modulsystemet ved at bruge enten navngivne eksporter eller standardeksporter.
Navngivne eksporter
Navngivne eksporter er eksporter identificeret ved de navne, de blev tildelt. Navngivne eksporter tillader flere eksporter pr. modul, i modsætning til standardeksporter.
For eksempel:
//main.js
exports.myExport = fungere () {
konsol.log("Dette er et eksempel af en navngiven eksport");
};
exports.anotherExport = fungere () {
konsol.log("Dette er et andet eksempel af en navngiven eksport");
};
I kodeblokken ovenfor eksporterer du to navngivne funktioner (myExport og en anden eksport) ved at fastgøre dem til eksport objekt.
På samme måde kan du eksportere funktionerne således:
konst myExport = fungere () {
konsol.log("Dette er et eksempel af en navngiven eksport");
};
konst anotherExport = fungere () {
konsol.log("Dette er et andet eksempel af en navngiven eksport");
};
modul.eksport = {
min eksport,
anden eksport,
};
I kodeblokken ovenfor indstiller du eksport gøre indsigelse mod de navngivne funktioner. Du kan kun tildele eksport genstand til et nyt objekt gennem modul objekt.
Din kode ville give en fejl, hvis du forsøgte at gøre det på denne måde:
//forkerte vej
eksport = {
min eksport,
anden eksport,
};
Der er to måder, du kan importere navngivne eksporter på:
1. Importer alle eksporterne som et enkelt objekt og få adgang til dem separat ved hjælp af priknotationen.
For eksempel:
//otherModule.js
konst foo = kræve("./main");
foo.myExport();
foo.anden Eksport();2. Destrukturere eksporten fra eksport objekt.
For eksempel:
//otherModule.js
konst { myExport, anotherExport } = kræve("./main");
myExport();
anotherExport();
Én ting er fælles i alle metoderne til import, de skal importeres med de samme navne som de blev eksporteret med.
Standard eksporter
En standardeksport er en eksport identificeret med et hvilket som helst navn efter eget valg. Du kan kun have én standardeksport pr. modul.
For eksempel:
//main.js
klasseFoo{
bar() {
konsol.log("Dette er et eksempel af -en Standardeksport");
}
}
modul.eksport = Foo;
I kodeblokken ovenfor eksporterer du en klasse (Foo) ved at omtildele eksport gøre indsigelse mod det.
Import af standardeksporter svarer til import af navngivne eksporter, bortset fra at du kan bruge et hvilket som helst navn efter eget valg til at importere dem.
For eksempel:
//otherModule.js
konst Bar = kræve("./main");
konst objekt = ny Bar();
objekt.bar();
I kodeblokken ovenfor blev standardeksporten navngivet Bar, selvom du kan bruge et hvilket som helst navn efter eget valg.
ES6-modulsystemet
ECMAScript Harmony-modulsystem, populært kendt som ES6-moduler, er det officielle JavaScript-modulsystem.
ES6-moduler understøttes af browsere og servere, selvom du kræver en smule konfiguration, før du bruger dem.
I browsere skal du angive type som modul i script-import-tagget.
Ligesom:
//index.html
<script src="./app.js" type="modul"></script>
I Node.js skal du indstille type til modul i din package.json fil.
Ligesom:
//package.json
"type":"modul"
Du kan også eksportere variabler ved hjælp af ES6-modulsystemet ved at bruge enten navngivne eksporter eller standardeksporter.
Navngivne eksporter
I lighed med navngivne importer i CommonJS-moduler identificeres de ved de navne, de blev tildelt, og tillader flere eksporter pr. modul.
For eksempel:
//main.js
eksportkonst myExport = fungere () {
konsol.log("Dette er et eksempel af en navngiven eksport");
};
eksportkonst anotherExport = fungere () {
konsol.log("Dette er et andet eksempel af en navngiven eksport");
};
I ES6-modulsystemet eksporteres navngivne eksporter ved at sætte variablen foran eksport søgeord.
Navngivne eksporter kan importeres til et andet modul i ES6 på samme måde som CommonJS:
- Destrukturering af den nødvendige eksport fra eksport objekt.
- Import af alle eksporter som et enkelt objekt og adgang til dem separat ved hjælp af punktnotationen.
Her er et eksempel på destrukturering:
//otherModule.js
importere { myExport, anotherExport } fra "./main.js";
myExport()
anotherExport()
Her er et eksempel på import af hele objektet:
importere * som foo fra './main.js'
foo.myExport()
foo.anden Eksport()
I kodeblokken ovenfor er stjernen (*) betyder "alle". Det som nøgleordet tildeler eksport gøre indsigelse mod den streng, der følger efter den, i dette tilfælde, foo.
Standard eksporter
I lighed med standardeksporter i CommonJS identificeres de med et hvilket som helst navn efter eget valg, og du kan kun have én standardeksport pr. modul.
For eksempel:
//main.js
klasseFoo{
bar() {
konsol.log("Dette er et eksempel af -en Standardeksport");
}
}
eksportStandard Foo;
Standardeksporter oprettes ved at tilføje Standard søgeord efter eksport søgeord efterfulgt af navnet på eksporten.
Import af standardeksporter svarer til import af navngivne eksporter, bortset fra at du kan bruge et hvilket som helst navn efter eget valg til at importere dem.
For eksempel:
//otherModule.js
importere Bar fra "./main.js";
Blandet eksport
ES6-modulstandarden giver dig mulighed for at have både standardeksporter og navngivne eksporter i ét modul, i modsætning til CommonJS.
For eksempel:
//main.js
eksportkonst myExport = fungere () {
konsol.log("Dette er et andet eksempel af en navngiven eksport");
};
klasseFoo{
bar() {
konsol.log("Dette er et eksempel af -en Standardeksport");
}
}
eksportStandard Foo;
Betydningen af moduler
Opdeling af din kode i moduler gør dem ikke kun nemmere at læse, men det gør den mere genbrugelig og også vedligeholdelsesvenlig. Moduler i JavaScript gør også din kode mindre fejltilbøjelig, da alle moduler som standard udføres i strict mode.