Koncept modulov izhaja iz paradigme modularnega programiranja. Ta paradigma predlaga, da mora biti programska oprema sestavljena iz ločenih, zamenljivih komponent, imenovanih »moduli« z razčlenitvijo programskih funkcij v samostojne datoteke, ki lahko delujejo ločeno ali združene v aplikacija.
Modul je samostojna datoteka, ki zajema kodo za izvajanje določene funkcionalnosti ter spodbuja ponovno uporabo in organizacijo.
Tukaj boste obravnavali sisteme modulov, ki se uporabljajo v aplikacijah JavaScript, vključno z vzorcem modulov, sistemom modulov CommonJS, ki se uporablja v večini aplikacij Node.js, in sistemom modulov ES6.
Vzorec modula
Pred uvedbo izvornih modulov JavaScript je bil vzorec oblikovanja modula uporabljen kot sistem modulov za obseg spremenljivk in funkcij v eno datoteko.
To je bilo izvedeno z uporabo takojšnjih funkcijskih izrazov, popularno znanih kot IIFE. IIFE je funkcija, ki je ni mogoče ponovno uporabiti in se zažene takoj, ko je ustvarjena.
Tukaj je osnovna struktura IIFE:
(funkcijo () {
// koda tukaj
})();(() => {
// koda tukaj
})();
(asinh () => {
// koda tukaj
})();
Zgornji blok kode opisuje IIFE, ki se uporabljajo v treh različnih kontekstih.
IIFE so bili uporabljeni, ker so spremenljivke, deklarirane znotraj funkcije, omejene na funkcijo, zaradi česar so samo dostopen znotraj funkcije, in ker vam funkcije omogočajo vrnitev podatkov (jih objavite javno dostopen).
Na primer:
konst foo = (funkcijo () {
konst sayName = (ime) => {
konzola.log(`Hej, ime mi je ${name}`);
};
//Izpostavitev spremenljivk
vrnitev {
callSayName: (ime) => sayName (ime),
};
})();
//Dostop do izpostavljenih metod
foo.callSayName("Bar");
Zgornji blok kode je primer, kako so bili moduli ustvarjeni pred uvedbo izvornih modulov JavaScript.
Zgornji kodni blok vsebuje IIFE. IIFE vsebuje funkcijo, ki jo naredi dostopno tako, da jo vrne. Vse spremenljivke, deklarirane v IIFE, so zaščitene pred globalnim obsegom. Tako je metoda (reciName) je dostopen samo prek javne funkcije, callSayName.
Upoštevajte, da je IIFE shranjen v spremenljivko, foo. To je zato, ker brez spremenljivke, ki kaže na svojo lokacijo v pomnilniku, bodo spremenljivke po zagonu skripta nedostopne. Ta vzorec je možen zaradi zapiranje JavaScripta.
Sistem modulov CommonJS
Sistem modulov CommonJS je format modula, ki ga je definirala skupina CommonJS za reševanje težav z obsegom JavaScript z izvajanjem vsakega modula v njegovem imenskem prostoru.
Sistem modulov CommonJS deluje tako, da module prisili, da eksplicitno izvozijo spremenljivke, ki jih želijo izpostaviti drugim modulom.
Ta sistem modulov je bil ustvarjen za JavaScript na strani strežnika (Node.js) in kot taka ni privzeto podprta v brskalnikih.
Če želite implementirati module CommonJS v svoj projekt, morate najprej inicializirati NPM v svoji aplikaciji tako, da zaženete:
npm init -y
Spremenljivke, izvožene po sistemu modulov CommonJS, je mogoče uvoziti takole:
//randomModule.js
//nameščen paket
konst InstallImport = zahtevati("ime-paketa");
//lokalni modul
konst localImport = zahtevati("/path-to-module");
Moduli so uvoženi v CommonJS z uporabo zahtevati stavek, ki prebere datoteko JavaScript, izvede prebrano datoteko in vrne izvoz predmet. The izvoz objekt vsebuje vse razpoložljive izvoze v modulu.
Spremenljivko lahko izvozite po sistemu modula CommonJS z uporabo poimenovanih izvozov ali privzetih izvozov.
Imenovan izvoz
Poimenovani izvozi so izvozi, identificirani z imeni, ki so jim bila dodeljena. Poimenovani izvozi omogočajo več izvozov na modul, za razliko od privzetih izvozov.
Na primer:
//main.js
exports.myExport = funkcijo () {
konzola.log("To je primer od a imenovan izvoz");
};
exports.anotherExport = funkcijo () {
konzola.log("To je še en primer od a imenovan izvoz");
};
V zgornjem bloku kode izvažate dve imenovani funkciji (myExport in anotherExport), tako da jih pritrdite na izvoz predmet.
Podobno lahko izvozite funkcije takole:
konst mojizvoz = funkcijo () {
konzola.log("To je primer od a imenovan izvoz");
};
konst anotherExport = funkcijo () {
konzola.log("To je še en primer od a imenovan izvoz");
};
modul.izvoz = {
myExport,
drug izvoz,
};
V zgornjem bloku kode nastavite izvoz nasprotuje imenovanim funkcijam. Dodelite lahko le izvoz objekt na nov predmet prek modul predmet.
Vaša koda bi povzročila napako, če bi to poskušali narediti na ta način:
//napačen način
izvoz = {
myExport,
drug izvoz,
};
Imenovane izvoze lahko uvozite na dva načina:
1. Uvozite vse izvoze kot en sam objekt in dostopajte do njih ločeno z uporabo zapis pike.
Na primer:
//otherModule.js
konst foo = zahtevati("./glavni");
foo.myExport();
foo.anotherExport();2. Destrukturiranje izvoza iz izvoz predmet.
Na primer:
//otherModule.js
konst {myExport, anotherExport} = zahtevati("./glavni");
mojIzvoz();
anotherExport();
Ena stvar je skupna vsem metodam uvoza, uvoziti jih je treba z istimi imeni, s katerimi so bili izvoženi.
Privzeti izvozi
Privzeti izvoz je izvoz, označen s poljubnim imenom po vaši izbiri. Na modul imate lahko samo en privzeti izvoz.
Na primer:
//main.js
razredFoo{
bar() {
konzola.log("To je primer od a privzetoizvoz");
}
}
modul.izvoz = Foo;
V zgornjem bloku kode izvažate razred (Foo) s prerazporeditvijo izvoz nasprotovati temu.
Uvažanje privzetih izvozov je podobno uvozu poimenovanih izvozov, le da lahko za njihov uvoz uporabite poljubno ime.
Na primer:
//otherModule.js
konst Bar = zahtevati("./glavni");
konst objekt = novo Bar();
predmet.bar();
V zgornjem kodnem bloku je bil poimenovan privzeti izvoz Bar, čeprav lahko uporabite katero koli ime po svoji izbiri.
Sistem modulov ES6
Sistem modulov ECMAScript Harmony, popularno znan kot moduli ES6, je uradni sistem modulov JavaScript.
Module ES6 podpirajo brskalniki in strežniki, čeprav morate pred njihovo uporabo nekaj konfigurirati.
V brskalnikih morate določiti vrsta kot modul v oznaki za uvoz skripta.
takole:
//index.html
<skript src="./app.js" vrsta="modul"></script>
V Node.js morate nastaviti vrsta do modul v tvojem package.json mapa.
takole:
//package.json
"vrsta":"modul"
Spremenljivke lahko izvozite tudi s sistemom modulov ES6 z uporabo poimenovanih izvozov ali privzetih izvozov.
Imenovan izvoz
Podobno kot poimenovani uvozi v modulih CommonJS so identificirani z imeni, ki so jim bila dodeljena, in omogočajo več izvozov na modul.
Na primer:
//main.js
izvozkonst mojizvoz = funkcijo () {
konzola.log("To je primer od a imenovan izvoz");
};
izvozkonst anotherExport = funkcijo () {
konzola.log("To je še en primer od a imenovan izvoz");
};
V sistemu modulov ES6 se poimenovani izvozi izvozijo tako, da se spremenljivki doda predpona izvoz ključna beseda.
Poimenovane izvoze je mogoče uvoziti v drug modul v ES6 na enak način kot CommonJS:
- Destrukturiranje zahtevanega izvoza iz izvoz predmet.
- Uvažanje vseh izvozov kot enega predmeta in dostop do njih ločeno z uporabo zapisa s piko.
Tukaj je primer destrukturiranja:
//otherModule.js
uvoz { myExport, anotherExport } od "./main.js";
mojIzvoz()
anotherExport()
Tukaj je primer uvoza celotnega predmeta:
uvoz * kot foo od './main.js'
foo.myExport()
foo.anotherExport()
V zgornjem kodnem bloku je zvezdica (*) pomeni "vse". The kot ključna beseda dodeli izvoz nasprotuje nizu, ki mu sledi, v tem primeru foo.
Privzeti izvozi
Podobno kot privzeti izvozi v CommonJS so označeni s katerim koli imenom po vaši izbiri in imate lahko samo en privzeti izvoz na modul.
Na primer:
//main.js
razredFoo{
bar() {
konzola.log("To je primer od a privzetoizvoz");
}
}
izvozprivzeto Foo;
Privzeti izvozi se ustvarijo z dodajanjem privzeto ključna beseda za izvoz ključno besedo, ki ji sledi ime izvoza.
Uvažanje privzetih izvozov je podobno uvozu poimenovanih izvozov, le da lahko za njihov uvoz uporabite poljubno ime.
Na primer:
//otherModule.js
uvoz Bar od "./main.js";
Mešani izvozi
Standard modula ES6 vam omogoča, da imate privzete izvoze in poimenovane izvoze v enem modulu, za razliko od CommonJS.
Na primer:
//main.js
izvozkonst mojizvoz = funkcijo () {
konzola.log("To je še en primer od a imenovan izvoz");
};
razredFoo{
bar() {
konzola.log("To je primer od a privzetoizvoz");
}
}
izvozprivzeto Foo;
Pomen modulov
Če kodo razdelite na module, jih ni le lažje brati, temveč jo je mogoče večkrat uporabiti in tudi vzdrževati. Zaradi modulov v JavaScriptu je tudi vaša koda manj nagnjena k napakam, saj se vsi moduli privzeto izvajajo v strogem načinu.
