Conceptul de module provine din paradigma de programare modulară. Această paradigmă propune ca software-ul să fie compus din componente separate, interschimbabile numite „module” prin defalcarea funcțiilor programului în fișiere autonome care pot funcționa separat sau cuplate într-un aplicarea.
Un modul este un fișier autonom care încapsulează cod pentru a implementa anumite funcționalități și pentru a promova reutilizarea și organizarea.
Aici veți acoperi sistemele de module utilizate în aplicațiile JavaScript, inclusiv modelul de module, sistemul de module CommonJS utilizat în majoritatea aplicațiilor Node.js și sistemul de module ES6.
Modelul Modulului
Înainte de introducerea modulelor JavaScript native, modelul de proiectare al modulelor a fost folosit ca sistem de module pentru a defini variabilele și funcțiile într-un singur fișier.
Acest lucru a fost implementat folosind expresii de funcție invocate imediat, cunoscute în mod popular sub numele de IIFE. Un IIFE este o funcție nereutilizabilă care rulează imediat ce este creată.
Iată structura de bază a unui IIFE:
(funcţie () {
//cod aici
})();(() => {
//cod aici
})();
(asincron () => {
//cod aici
})();
Blocul de cod de mai sus descrie IIFE-urile utilizate în trei contexte diferite.
IIFE-urile au fost folosite deoarece variabilele declarate în interiorul unei funcții sunt încadrate în funcție, făcându-le doar accesibile în interiorul funcției și pentru că funcțiile vă permit să returnați date (făcându-le public accesibil).
De exemplu:
const foo = (funcţie () {
const sayName = (nume) => {
consolă.Buturuga(„Hei, numele meu este ${name}`);
};
//Expunerea variabilelor
întoarcere {
callSayName: (nume) => spuneNume (nume),
};
})();
//Accesarea metodelor expuse
foo.callSayName("Bar");
Blocul de cod de mai sus este un exemplu al modului în care au fost create modulele înainte de introducerea modulelor native JavaScript.
Blocul de cod de mai sus conține un IIFE. IIFE conține o funcție pe care o face accesibilă prin returnarea acesteia. Toate variabilele declarate în IIFE sunt protejate de domeniul global. Astfel, metoda (spune Nume) este accesibil numai prin intermediul funcției publice, apelațiSayName.
Observați că IIFE este salvat într-o variabilă, foo. Acest lucru se datorează faptului că, fără o variabilă care să indice locația sa în memorie, variabilele vor fi inaccesibile după rularea scriptului. Acest model este posibil datorită Închideri JavaScript.
Sistemul de module CommonJS
Sistemul de module CommonJS este un format de modul definit de grupul CommonJS pentru a rezolva problemele legate de domeniul JavaScript prin executarea fiecărui modul în spațiul său de nume.
Sistemul de module CommonJS funcționează forțând modulele să exporte în mod explicit variabilele pe care doresc să le expună altor module.
Acest sistem de module a fost creat pentru JavaScript pe partea serverului (Node.js) și, ca atare, nu este acceptat implicit în browsere.
Pentru a implementa module CommonJS în proiectul dvs., trebuie mai întâi să inițializați NPM în aplicația dvs. rulând:
npm init -y
Variabilele exportate după sistemul de module CommonJS pot fi importate astfel:
//randomModule.js
//pachetul instalat
const installImport = cere("numele pachetului");
//modul local
const localImport = cere("/path-to-module");
Modulele sunt importate în CommonJS folosind cere instrucțiunea, care citește un fișier JavaScript, execută fișierul citit și returnează exporturi obiect. The exporturi obiectul conține toate exporturile disponibile în modul.
Puteți exporta o variabilă urmând sistemul de module CommonJS utilizând fie exporturi denumite, fie exporturi implicite.
Exporturi denumite
Exporturile denumite sunt exporturi identificate după numele cărora le-au fost atribuite. Exporturile denumite permit exporturi multiple pe modul, spre deosebire de exporturile implicite.
De exemplu:
//main.js
exports.myExport = funcţie () {
consolă.log("Acesta este un exemplu de un numit export");
};
exports.notherExport = funcţie () {
consolă.log("Acesta este un alt exemplu de un numit export");
};
În blocul de cod de mai sus, exportați două funcții numite (myExport și altExport) prin atașarea acestora la exporturi obiect.
În mod similar, puteți exporta funcțiile astfel:
const myExport = funcţie () {
consolă.log("Acesta este un exemplu de un numit export");
};
const anotherExport = funcţie () {
consolă.log("Acesta este un alt exemplu de un numit export");
};
modul.exporturi = {
myExport,
un alt export,
};
În blocul de cod de mai sus, setați exporturi obiect la funcțiile numite. Puteți atribui doar exporturi obiect la un obiect nou prin intermediul modul obiect.
Codul dvs. ar arunca o eroare dacă ați încerca să faceți acest lucru:
//Direcţia greşită
exporturi = {
myExport,
un alt export,
};
Există două moduri prin care puteți importa exporturi denumite:
1. Importați toate exporturile ca un singur obiect și accesați-le separat folosind notația cu puncte.
De exemplu:
//otherModule.js
const foo = cere("./principal");
foo.myExport();
foo.altExport();2. Destructurați exporturile din exporturi obiect.
De exemplu:
//otherModule.js
const { myExport, anotherExport } = cere("./principal");
myExport();
altExport();
Un lucru este comun în toate metodele de import, acestea trebuie importate folosind aceleași nume cu care au fost exportate.
Exporturi implicite
Un export implicit este un export identificat prin orice nume la alegere. Puteți avea doar un export implicit pentru fiecare modul.
De exemplu:
//main.js
clasăFoo{
bar() {
consolă.log("Acesta este un exemplu de A Mod implicitexport");
}
}
modul.exporturi = Foo;
În blocul de cod de mai sus, exportați o clasă (Foo) prin reatribuirea exporturi obiectează la aceasta.
Importarea exporturilor implicite este similară cu importul exporturilor denumite, cu excepția faptului că puteți utiliza orice nume dorit pentru a le importa.
De exemplu:
//otherModule.js
const Bar = cere("./principal");
const obiect = nou Bar();
obiect.bar();
În blocul de cod de mai sus, exportul implicit a fost numit Bar, deși puteți folosi orice nume la alegere.
Sistemul de module ES6
Sistemul de module ECMAScript Harmony, cunoscut sub numele de module ES6, este sistemul oficial de module JavaScript.
Modulele ES6 sunt acceptate de browsere și servere, deși aveți nevoie de puțină configurare înainte de a le utiliza.
În browsere, trebuie să specificați tip la fel de modul în eticheta de import de script.
Ca astfel:
//index.html
<script src="./app.js" tip="modul"></script>
În Node.js, trebuie să setați tip la modul în dumneavoastră pachet.json fişier.
Ca astfel:
//package.json
"tip":"modul"
De asemenea, puteți exporta variabile folosind sistemul de module ES6 utilizând fie exporturi denumite, fie exporturi implicite.
Exporturi denumite
Similar importurilor cu nume din modulele CommonJS, acestea sunt identificate după numele cărora le-au fost atribuite și permit exporturi multiple pe modul.
De exemplu:
//main.js
exportconst myExport = funcţie () {
consolă.log("Acesta este un exemplu de un numit export");
};
exportconst anotherExport = funcţie () {
consolă.log("Acesta este un alt exemplu de un numit export");
};
În sistemul de module ES6, exporturile denumite sunt exportate prin prefixarea variabilei cu export cuvânt cheie.
Exporturile denumite pot fi importate într-un alt modul în ES6 în aceleași moduri ca CommonJS:
- Destructurarea exporturilor necesare din exporturi obiect.
- Importul tuturor exporturilor ca un singur obiect și accesarea lor separat folosind notația punct.
Iată un exemplu de destructurare:
//otherModule.js
import { myExport, anotherExport } din „./main.js”;
myExport()
anotherExport()
Iată un exemplu de importare a întregului obiect:
import * la fel de foo din „./main.js”
foo.myExport()
foo.altExport()
În blocul de cod de mai sus, asteriscul (*) înseamnă „toate”. The la fel de cuvântul cheie atribuie exporturi obiect la șirul care îl urmează, în acest caz, foo.
Exporturi implicite
Similar cu exporturile implicite în CommonJS, acestea sunt identificate prin orice nume la alegere și puteți avea doar un export implicit per modul.
De exemplu:
//main.js
clasăFoo{
bar() {
consolă.log("Acesta este un exemplu de A Mod implicitexport");
}
}
exportMod implicit Foo;
Exporturile implicite sunt create prin adăugarea Mod implicit cuvânt cheie după export cuvânt cheie, urmat de numele exportului.
Importarea exporturilor implicite este similară cu importul exporturilor denumite, cu excepția faptului că puteți utiliza orice nume dorit pentru a le importa.
De exemplu:
//otherModule.js
import Bar din „./main.js”;
Exporturi mixte
Standardul modulului ES6 vă permite să aveți atât exporturi implicite, cât și exporturi denumite într-un singur modul, spre deosebire de CommonJS.
De exemplu:
//main.js
exportconst myExport = funcţie () {
consolă.log("Acesta este un alt exemplu de un numit export");
};
clasăFoo{
bar() {
consolă.log("Acesta este un exemplu de A Mod implicitexport");
}
}
exportMod implicit Foo;
Importanța modulelor
Împărțirea codului în module nu numai că le face mai ușor de citit, dar îl face mai reutilizabil și, de asemenea, mai ușor de întreținut. Modulele din JavaScript fac codul mai puțin predispus la erori, deoarece toate modulele sunt executate implicit în mod strict.