Moduļu jēdziens nāk no modulārās programmēšanas paradigmas. Šī paradigma ierosina, ka programmatūra jāsastāv no atsevišķiem, savstarpēji aizvietojamiem komponentiem, ko sauc “moduļus”, sadalot programmas funkcijas atsevišķos failos, kas var darboties atsevišķi vai savienoti pieteikumu.
Modulis ir atsevišķs fails, kas iekapsulē kodu, lai ieviestu noteiktu funkcionalitāti un veicinātu atkārtotu izmantošanu un organizēšanu.
Šeit tiks apskatītas JavaScript lietojumprogrammās izmantotās moduļu sistēmas, tostarp moduļu modelis, CommonJS moduļu sistēma, ko izmanto lielākajā daļā Node.js lietojumprogrammu, un ES6 moduļu sistēma.
Moduļa modelis
Pirms vietējo JavaScript moduļu ieviešanas moduļa dizaina modelis tika izmantots kā moduļu sistēma, lai iekļautu mainīgos un funkcijas vienā failā.
Tas tika ieviests, izmantojot nekavējoties izsauktas funkciju izteiksmes, ko tautā sauc par IIFE. IIFE ir atkārtoti neizmantojama funkcija, kas darbojas, tiklīdz tā ir izveidota.
Šeit ir norādīta IIFE pamatstruktūra:
(funkciju () {
//kods šeit
})();(() => {
//kods šeit
})();
(asinhrons () => {
//kods šeit
})();
Iepriekš minētais koda bloks apraksta IIFE, ko izmanto trīs dažādos kontekstos.
IIFE tika izmantoti, jo funkcijā deklarētie mainīgie tiek attiecināti uz funkciju, padarot tos tikai ir pieejama funkcijā, un tāpēc, ka funkcijas ļauj atgriezt datus (padarot tos publiski pieejams).
Piemēram:
konst foo = (funkciju () {
konst sayName = (vārds) => {
konsole.log(`Čau, mani sauc ${name}`);
};
//Mainīgo parādīšana
atgriezties {
callSayName: (vārds) => sakiVārds (vārds),
};
})();
//Piekļuve atklātajām metodēm
foo.callSayName("Bārs");
Iepriekš minētais koda bloks ir piemērs tam, kā moduļi tika izveidoti pirms vietējo JavaScript moduļu ieviešanas.
Iepriekš minētajā koda blokā ir IIFE. IIFE satur funkciju, kuru tas padara pieejamu, to atgriežot. Visi IIFE deklarētie mainīgie ir aizsargāti no globālās darbības jomas. Tādējādi metode (sakiVārds) ir pieejams tikai, izmantojot publisko funkciju, callSayName.
Ievērojiet, ka IIFE tiek saglabāts mainīgajā, foo. Tas ir tāpēc, ka bez mainīgā lieluma, kas norāda uz tā atrašanās vietu atmiņā, mainīgie pēc skripta palaišanas būs nepieejami. Šis modelis ir iespējams, jo JavaScript slēgšana.
CommonJS moduļu sistēma
CommonJS moduļu sistēma ir CommonJS grupas definēts moduļa formāts, lai atrisinātu JavaScript tvēruma problēmas, izpildot katru moduli tā nosaukumvietā.
CommonJS moduļu sistēma darbojas, piespiežot moduļus nepārprotami eksportēt mainīgos, kurus tie vēlas pakļaut citiem moduļiem.
Šī moduļu sistēma tika izveidota servera puses JavaScript (Node.js) un tādējādi tas pēc noklusējuma netiek atbalstīts pārlūkprogrammās.
Lai savā projektā ieviestu CommonJS moduļus, vispirms savā lietojumprogrammā ir jāinicializē NPM, izpildot:
npm init -y
Mainīgos, kas eksportēti, izmantojot CommonJS moduļu sistēmu, var importēt šādi:
//randomModule.js
//instalēta pakotne
konst InstalledImport = pieprasīt("pakotnes nosaukums");
//vietējais modulis
konst localImport = pieprasīt("/path-to-module");
Moduļi tiek importēti CommonJS, izmantojot pieprasīt paziņojums, kas nolasa JavaScript failu, izpilda lasīšanas failu un atgriež eksportu objektu. The eksportu objekts satur visus modulī pieejamos eksportus.
Varat eksportēt mainīgo, izmantojot CommonJS moduļu sistēmu, izmantojot vai nu nosaukto eksportēšanu, vai noklusējuma eksportēšanu.
Nosaukts Eksports
Nosauktie eksporti ir eksporti, kas identificēti pēc tiem piešķirtajiem nosaukumiem. Atšķirībā no noklusējuma eksportēšanas, ar nosaukumu eksportēšana ļauj veikt vairākus eksportus vienam modulim.
Piemēram:
//main.js
eksports.myExport = funkciju () {
konsole.log("Šis ir piemērs no nosaukts eksportēt");
};
eksports.citsEksports = funkciju () {
konsole.log("Šis ir vēl viens piemērs no nosaukts eksportēt");
};
Iepriekš esošajā koda blokā jūs eksportējat divas nosauktas funkcijas (myExport un citsEksports), pievienojot tos eksportu objektu.
Līdzīgi varat eksportēt funkcijas, piemēram:
konst myExport = funkciju () {
konsole.log("Šis ir piemērs no nosaukts eksportēt");
};
konst citsEksports = funkciju () {
konsole.log("Šis ir vēl viens piemērs no nosaukts eksportēt");
};
modulis.eksportu = {
myExport,
cits eksports,
};
Iepriekš esošajā koda blokā jūs iestatāt eksportu iebilst pret nosauktajām funkcijām. Jūs varat piešķirt tikai eksportu iebilst pret jaunu objektu, izmantojot modulis objektu.
Jūsu kods radīs kļūdu, ja mēģinātu to izdarīt šādi:
//nepareizi
eksportu = {
myExport,
cits eksports,
};
Ir divi veidi, kā importēt nosauktos eksportus:
1. Importējiet visu eksportu kā vienu objektu un piekļūstiet tiem atsevišķi, izmantojot punktu apzīmējums.
Piemēram:
//otherModule.js
konst foo = pieprasīt(./galvenais");
foo.myExport();
foo.citsEksports();2. Destrukturējiet eksportu no eksportu objektu.
Piemēram:
//otherModule.js
konst { myExport, otherExport } = pieprasīt(./galvenais");
myExport();
citsEksports();
Viena lieta ir izplatīta visās importēšanas metodēs, tās ir jāimportē, izmantojot tos pašus nosaukumus, ar kuriem tie tika eksportēti.
Noklusējuma eksportēšana
Noklusējuma eksportēšana ir eksportēšana, kas apzīmēta ar jebkuru jūsu izvēlētu nosaukumu. Katram modulim var būt tikai viens noklusējuma eksports.
Piemēram:
//main.js
klasēFoo{
bārs() {
konsole.log("Šis ir piemērs no a noklusējumaeksportēt");
}
}
modulis.eksportu = Foo;
Iepriekš esošajā koda blokā jūs eksportējat klasi (Foo), piešķirot no jauna eksportu iebilst pret to.
Noklusējuma eksporta importēšana ir līdzīga nosaukto eksportu importēšanai, izņemot to, ka to importēšanai varat izmantot jebkuru nosaukumu pēc savas izvēles.
Piemēram:
//otherModule.js
konst Bārs = pieprasīt(./galvenais");
konst objekts = jauns Bārs();
objektu.bārs();
Iepriekš esošajā koda blokā noklusējuma eksportam tika nosaukts nosaukums Bārs, lai gan varat izmantot jebkuru nosaukumu pēc savas izvēles.
ES6 moduļu sistēma
ECMAScript Harmony moduļu sistēma, tautā pazīstama kā ES6 moduļi, ir oficiālā JavaScript moduļu sistēma.
ES6 moduļus atbalsta pārlūkprogrammas un serveri, lai gan pirms to izmantošanas ir nepieciešama neliela konfigurācija.
Pārlūkprogrammās ir jānorāda veids kā modulis skripta importēšanas tagā.
Tā kā:
//index.html
<skripts src="./app.js" tips="modulis"></script>
Programmā Node.js jums ir jāiestata veids uz modulis tavā pack.json failu.
Tā kā:
//package.json
"veids":"modulis"
Varat arī eksportēt mainīgos, izmantojot ES6 moduļu sistēmu, izmantojot nosaukto eksportu vai noklusējuma eksportu.
Nosaukts Eksports
Līdzīgi kā CommonJS moduļu importēšana ar nosaukumiem, tie tiek identificēti pēc tiem piešķirtajiem nosaukumiem un ļauj veikt vairākus eksportus vienā modulī.
Piemēram:
//main.js
eksportētkonst myExport = funkciju () {
konsole.log("Šis ir piemērs no nosaukts eksportēt");
};
eksportētkonst citsEksports = funkciju () {
konsole.log("Šis ir vēl viens piemērs no nosaukts eksportēt");
};
ES6 moduļu sistēmā nosauktie eksporti tiek eksportēti, pievienojot mainīgajam prefiksu ar eksportēt atslēgvārds.
Nosauktos eksportus var importēt citā ES6 modulī tādā pašā veidā kā CommonJS:
- Nepieciešamā eksporta destrukturizācija no eksportu objektu.
- Importēt visus eksportētos failus kā vienu objektu un piekļūt tiem atsevišķi, izmantojot punktu apzīmējumu.
Šeit ir destrukturizācijas piemērs:
//otherModule.js
imports { myExport, otherExport } no "./main.js";
myExport()
otherExport()
Šeit ir visa objekta importēšanas piemērs:
imports * kā foo no './main.js'
foo.myExport()
foo.citsEksports()
Iepriekš esošajā koda blokā zvaigznīte (*) nozīmē “viss”. The kā atslēgvārds piešķir eksportu iebilst pret virkni, kas tai seko, šajā gadījumā foo.
Noklusējuma eksportēšana
Līdzīgi kā CommonJS noklusējuma eksportam, tie tiek identificēti ar jebkuru jūsu izvēlētu nosaukumu, un katram modulim var būt tikai viens noklusējuma eksports.
Piemēram:
//main.js
klasēFoo{
bārs() {
konsole.log("Šis ir piemērs no a noklusējumaeksportēt");
}
}
eksportētnoklusējuma Foo;
Noklusējuma eksportēšana tiek izveidota, pievienojot noklusējuma atslēgvārds pēc eksportēt atslēgvārdu, kam seko eksportētā produkta nosaukums.
Noklusējuma eksporta importēšana ir līdzīga nosaukto eksportu importēšanai, izņemot to, ka to importēšanai varat izmantot jebkuru nosaukumu pēc savas izvēles.
Piemēram:
//otherModule.js
imports Bārs no "./main.js";
Jauktais eksports
ES6 moduļa standarts atšķirībā no CommonJS ļauj vienā modulī veikt gan noklusējuma eksportus, gan eksportēt ar nosaukumu.
Piemēram:
//main.js
eksportētkonst myExport = funkciju () {
konsole.log("Šis ir vēl viens piemērs no nosaukts eksportēt");
};
klasēFoo{
bārs() {
konsole.log("Šis ir piemērs no a noklusējumaeksportēt");
}
}
eksportētnoklusējuma Foo;
Moduļu nozīme
Sadalot kodu moduļos, tie ir ne tikai vieglāk lasāmi, bet arī vairāk izmantojami un arī apkopjami. JavaScript moduļi arī samazina jūsu kodu kļūdu iespējamību, jo visi moduļi pēc noklusējuma tiek izpildīti stingrā režīmā.
