Moodulite mõiste pärineb modulaarse programmeerimise paradigmast. See paradigma teeb ettepaneku, et tarkvara peaks koosnema eraldi, vahetatavatest komponentidest, mida nimetatakse "moodulid", jagades programmi funktsioonid eraldiseisvateks failideks, mis võivad töötada eraldi või koos rakendus.
Moodul on iseseisev fail, mis kapseldab koodi teatud funktsioonide rakendamiseks ning korduvkasutatavuse ja organiseerimise edendamiseks.
Siin käsitlete JavaScripti rakendustes kasutatavaid moodulsüsteeme, sealhulgas moodulite mustrit, enamikus Node.js rakendustes kasutatavat CommonJS moodulisüsteemi ja ES6 moodulisüsteemi.
Mooduli muster
Enne JavaScripti moodulite kasutuselevõttu kasutati mooduli kujundusmustrit moodulisüsteemina muutujate ja funktsioonide koondamiseks ühte faili.
Seda rakendati kohe kutsutavate funktsiooniavaldiste abil, mida tuntakse IIFE-dena. IIFE on korduvkasutatav funktsioon, mis käivitatakse kohe pärast selle loomist.
Siin on IIFE põhistruktuur:
(funktsiooni () {
//kood siin
})();(() => {
//kood siin
})();
(asünkr () => {
//kood siin
})();
Ülaltoodud koodiplokk kirjeldab kolmes erinevas kontekstis kasutatavaid IIFE-sid.
IIFE-sid kasutati, kuna funktsiooni sees deklareeritud muutujad kuuluvad funktsioonile, muutes need ainult funktsiooni sees juurdepääsetav ja kuna funktsioonid võimaldavad teil andmeid tagastada (teha need avalikuks juurdepääsetav).
Näiteks:
konst foo = (funktsiooni () {
konst sayName = (nimi) => {
konsool.log(`Hei, minu nimi on ${name}`);
};
//Muutujate paljastamine
tagasi {
callSayName: (nimi) => ütleNimi (nimi),
};
})();
//Juurdepääs eksponeeritud meetoditele
foo.callSayName("Baar");
Ülaltoodud koodiplokk on näide moodulite loomisest enne JavaScripti moodulite kasutuselevõttu.
Ülaltoodud koodiplokk sisaldab IIFE-d. IIFE sisaldab funktsiooni, mille ta tagastades muudab juurdepääsetavaks. Kõik IIFE-s deklareeritud muutujad on globaalse ulatuse eest kaitstud. Seega meetod (ütleNimi) on juurdepääsetav ainult avaliku funktsiooni kaudu, callSayName.
Pange tähele, et IIFE salvestatakse muutujasse, foo. Selle põhjuseks on asjaolu, et ilma muutujata, mis osutab selle asukohale mälus, on muutujad pärast skripti käitamist kättesaamatud. See muster on võimalik tänu JavaScripti sulgemised.
CommonJS moodulisüsteem
CommonJS-i moodulsüsteem on CommonJS-rühma poolt määratletud moodulivorming JavaScripti ulatuse probleemide lahendamiseks, käivitades iga mooduli selle nimeruumis.
CommonJS-i moodulsüsteem töötab, sundides mooduleid eksplitsiitselt eksportima muutujaid, mida nad soovivad teistele moodulitele avaldada.
See moodulsüsteem loodi jaoks serveripoolne JavaScript (Node.js) ja sellisena ei toetata seda brauserites vaikimisi.
CommonJS-i moodulite rakendamiseks oma projektis peate esmalt oma rakenduses NPM-i lähtestama, käivitades:
npm init -y
CommonJS-i moodulisüsteemi järgi eksporditud muutujaid saab importida järgmiselt:
//randomModule.js
//installitud pakett
konst installImport = nõuda("paketi nimi");
//kohalik moodul
konst localImport = nõuda("/path-to-module");
Moodulid imporditakse CommonJS-i kasutades nõuda lause, mis loeb JavaScripti faili, käivitab lugemisfaili ja tagastab eksporti objektiks. The eksporti objekt sisaldab kõiki moodulis saadaolevaid eksporte.
Saate eksportida muutuja CommonJS-i moodulisüsteemi järgi, kasutades kas nimega eksporte või vaikeekspordi.
Nimega Eksport
Nimega ekspordid on ekspordid, mis on identifitseeritud neile määratud nimede järgi. Nimega ekspordid võimaldavad erinevalt vaikeekspordist mitut eksporti mooduli kohta.
Näiteks:
//main.js
ekspordid.myExport = funktsiooni () {
konsool.log("See on näide kohta a nimeline eksportida");
};
eksport.teine Eksport = funktsiooni () {
konsool.log("See on veel üks näide kohta a nimeline eksportida");
};
Ülaltoodud koodiplokis ekspordite kahte nimega funktsiooni (myExport ja teine Eksport), kinnitades need külge eksporti objektiks.
Samamoodi saate funktsioone eksportida järgmiselt:
konst myExport = funktsiooni () {
konsool.log("See on näide kohta a nimeline eksportida");
};
konst otherExport = funktsiooni () {
konsool.log("See on veel üks näide kohta a nimeline eksportida");
};
moodul.eksporti = {
myExport,
teine eksport,
};
Ülaltoodud koodiplokis määrate eksporti objektiks nimetatud funktsioonidele. Saate määrata ainult eksporti objekti uue objekti kaudu moodul objektiks.
Teie kood annaks vea, kui proovite seda teha järgmiselt:
//vale suund
eksporti = {
myExport,
teine eksport,
};
Nimega eksporti saab importida kahel viisil.
1. Importige kõik ekspordid ühe objektina ja pääsete neile eraldi juurde, kasutades punktitähistus.
Näiteks:
//otherModule.js
konst foo = nõuda(./main");
foo.myExport();
foo.teine Eksport();2. De-struktureerige eksport alates eksporti objektiks.
Näiteks:
//otherModule.js
konst { myExport, otherExport } = nõuda(./main");
myExport();
otherExport();
Üks asi on kõigi impordimeetodite puhul ühine, need tuleb importida samade nimetustega, millega need eksporditi.
Vaikeekspordid
Vaikeeksport on teie valitud mis tahes nimega tähistatud eksport. Iga mooduli kohta saab olla ainult üks vaikimisi eksportimine.
Näiteks:
//main.js
klassFoo{
bar() {
konsool.log("See on näide kohta a vaikimisieksportida");
}
}
moodul.eksporti = Foo;
Ülaltoodud koodiplokis ekspordite klassi (Foo) määrates ümber eksporti sellele vastu.
Vaikeekspordi importimine sarnaneb nimega eksportimise importimisega, välja arvatud see, et saate nende importimiseks kasutada mis tahes oma valitud nime.
Näiteks:
//otherModule.js
konst Baar = nõuda(./main");
konst objekt = uus Baar();
objektiks.baar();
Ülaltoodud koodiplokis nimetati vaikeeksporti Baar, kuigi võite kasutada mis tahes oma valitud nime.
ES6 moodulsüsteem
ECMAScript Harmony moodulsüsteem, tuntud kui ES6 moodulid, on ametlik JavaScripti moodulisüsteem.
ES6 mooduleid toetavad brauserid ja serverid, kuigi enne nende kasutamist on vaja veidi konfigureerimist.
Brauserites peate määrama tüüp nagu moodul skripti impordi märgendis.
Nagu nii:
//index.html
<skript src="./app.js" tüüp="moodul"></script>
Programmis Node.js peate määrama tüüp juurde moodul sinus package.json faili.
Nagu nii:
//package.json
"tüüp":"moodul"
Muutujaid saate eksportida ka ES6 moodulsüsteemi abil, kasutades kas nimega eksporte või vaikeekspordi.
Nimega Eksport
Sarnaselt nimega importimisele CommonJS-i moodulites tuvastatakse need neile määratud nimede järgi ja võimaldavad mooduli kohta mitut eksporti.
Näiteks:
//main.js
eksportidakonst myExport = funktsiooni () {
konsool.log("See on näide kohta a nimeline eksportida");
};
eksportidakonst otherExport = funktsiooni () {
konsool.log("See on veel üks näide kohta a nimeline eksportida");
};
ES6 moodulisüsteemis eksporditakse nimega ekspordid, lisades muutuja ette eksportida märksõna.
Nimega eksporte saab importida teise ES6 moodulisse samamoodi nagu CommonJS:
- Nõutava ekspordi destruktureerimine eksporti objektiks.
- Importige kõik ekspordid ühe objektina ja pääsete neile eraldi juurde punktitähistusega.
Siin on näide destruktureerimisest:
//otherModule.js
importida { myExport, otherExport } alates "./main.js";
myExport()
otherExport()
Siin on näide kogu objekti importimisest:
importida * nagu foo alates './main.js'
foo.myExport()
foo.teine Eksport()
Ülaltoodud koodiplokis on tärn (*) tähendab "kõiki". The nagu märksõna määrab eksporti vastulause sellele järgnevale stringile, antud juhul foo.
Vaikeekspordid
Sarnaselt CommonJS-i vaikeekspordiga identifitseeritakse need mis tahes teie valitud nimega ja mooduli kohta saab olla ainult üks vaikeeksport.
Näiteks:
//main.js
klassFoo{
bar() {
konsool.log("See on näide kohta a vaikimisieksportida");
}
}
eksportidavaikimisi Foo;
Vaikeekspordid luuakse, lisades vaikimisi märksõna pärast eksportida märksõna, millele järgneb ekspordi nimi.
Vaikeekspordi importimine sarnaneb nimega eksportimise importimisega, välja arvatud see, et saate nende importimiseks kasutada mis tahes oma valitud nime.
Näiteks:
//otherModule.js
importida Baar alates "./main.js";
Segaeksport
ES6 mooduli standard võimaldab erinevalt CommonJS-ist ühes moodulis olla nii vaikeekspordid kui ka nimega ekspordid.
Näiteks:
//main.js
eksportidakonst myExport = funktsiooni () {
konsool.log("See on veel üks näide kohta a nimeline eksportida");
};
klassFoo{
bar() {
konsool.log("See on näide kohta a vaikimisieksportida");
}
}
eksportidavaikimisi Foo;
Moodulite tähtsus
Koodi jagamine mooduliteks mitte ainult ei muuda neid hõlpsamini loetavaks, vaid muudab selle korduvkasutatavamaks ja ka hooldatavamaks. JavaScripti moodulid muudavad teie koodi ka vähem veaohtlikuks, kuna kõik moodulid käivitatakse vaikimisi ranges režiimis.