Astăzi, JavaScript joacă un rol important în dezvoltarea site-ului web. Dezvoltatorii front-end folosesc JavaScript pentru a crea aplicații web interactive. Ca urmare, a existat o creștere a cererii pentru dezvoltatorii JavaScript.
Cu siguranță, JavaScript a evoluat de-a lungul anilor. ES6 a introdus multe funcții noi în limbaj. Una dintre acestea este o modalitate de a partaja cu ușurință coduri între fișierele JavaScript.
Importul și exportul de funcții pentru JavaScript sunt caracteristici noi care vă vor face un dezvoltator mai bun. Iată cum funcționează aceste caracteristici.
Ce este un modul JavaScript?
Un modul JavaScript este un fișier JavaScript care conține o colecție de cod pe care să-l utilizați. Modulele sunt de obicei scrise în fișiere separate și importate folosind import cuvânt cheie. Economisește timp și efort, deoarece îl poți reutiliza mai târziu.
De exemplu, dacă aveți o funcție numită calculateSum(), îl puteți include într-un alt fișier și îl puteți face disponibil oriunde în proiectul dvs. folosind
export și import JavaScript funcționează fără niciun fel de agitație.Unul dintre avantajele utilizării modulelor este că vă ajută să vă mențineți codul organizat. De asemenea, vă face codul mai ușor de gestionat și mai ușor de depanat.
Pentru a utiliza un fișier JavaScript ca modul, trebuie să creați un script în documentul HTML cu a tip="modul".
<tip de script="modul" src="fileName.js"></script>
Există două tipuri de module:
- Module ECMAScript: module JavaScript standard și sunt acceptate de toate browserele majore.
- Modulele CommonJS: sunt mai vechi și nu sunt acceptate pe scară largă.
Ne vom concentra pe modulele ECMAScript aici. Dacă este necesar, consultați introducere în JavaScript pentru a perfecționa elementele de bază.
Cum să exportați funcții în JavaScript
În JavaScript, funcțiile sunt obiecte de primă clasă care pot fi transmise ca argumente în plus față de a fi utilizate singure. Exportarea funcțiilor este o modalitate bună de a le transfera în alte programe. Este folosit și atunci când doriți să creați biblioteci reutilizabile.
Exportarea funcțiilor în JavaScript se face folosind export funcţie. The export funcția exportă o funcție dată pentru a fi utilizată de un alt fișier sau script. Prin export propriile noastre funcții, le putem folosi liber în alte fișiere sau scripturi fără a ne face griji cu privire la problemele de licențiere.
Există două moduri de a utiliza export functioneaza eficient. Vom trece peste acestea cu exemple de cod.
Să presupunem că aveți un fișier getPersonalDetails.js care are o funcție care returnează numele complet al unui utilizator după o introducere promptă. Funcția arată astfel:
funcţiegetFullName(Numele complet){
fullName = prompt('Care este prenumele tau');
consolă.log (nume complet);
}
- Puteți exporta această funcție folosind pur și simplu export cuvânt cheie urmat de numele funcției între paranteze. Arata cam asa:
export {getFullName}; - A doua metodă este să adăugați export cuvânt cheie chiar înainte de declararea funcției.
exportfuncţiegetFullName (Numele complet){...}
Puteți exporta mai multe funcții utilizând prima metodă. Acest lucru se face prin includerea numelor funcțiilor dorite în paranteză. Funcțiile sunt separate prin virgulă.
De exemplu: Să presupunem că aveți trei funcții în nostru getPersonalDetails.js fişier - getFullName(),getEmail(), getDob(). Puteți exporta funcțiile adăugând următoarea linie de cod:
exportați {getFullName, getEmail, getDob};
Cum se importă funcții în JavaScript
Pentru a utiliza un modul, mai întâi trebuie să-l importați. Orice funcție poate fi importată folosind o referință de cale completă.
Importarea funcțiilor este destul de simplă. JavaScript are o caracteristică încorporată pentru a vă importa propriile funcții din alte fișiere. Dacă doriți să accesați acele funcții din alte module, este o idee bună să includeți o declarație de funcție pentru fiecare dintre utilitățile dumneavoastră.
O funcție care urmează să fie importată este deja exportată în fișierul său original.
Puteți importa funcții dintr-un fișier diferit folosind import funcționalitatea cuvintelor cheie. Import vă permite să alegeți ce parte a unui fișier sau modul să încărcați.
Iată cum ne importați getFullName functia de la getPersonalDetails.js:
import {getFullName} din „./getPersonalDetails.js”Aceasta va face această funcție disponibilă pentru utilizare în fișierul nostru curent.
Pentru a importa mai multe funcții, funcțiile de importat sunt incluse în acolade. Fiecare este separat prin virgulă (,).
import {getFullName, getEmail, getDob} din „./getPersonalDetails.js”Există o altă modalitate de a utiliza import funcţionalitate. Acest lucru ne permite să importăm toate exporturile dintr-un anumit fișier. Se face folosind import * ca sintaxă.
Puteți importa toate exporturile în nostru getPersonalDetails.js prin adăugarea următoarei linii de cod:
import * la fel de PersonalDetailsModule din „./getPersonalDetails.js”Cele de mai sus vor crea un obiect numit PersonalDetailsModule.
Acesta este doar un nume de variabilă, îl puteți numi orice.
Acest obiect conține toate exporturile din nostru getPersonalDetails.js. Funcțiile sunt stocate în acest obiect și pot fi accesate așa cum accesați orice proprietate a obiectului.
De exemplu, putem accesa getFullName funcția prin adăugarea următoarei linii de cod
PersonalDetailsModule.getFullName();Ce este exportul implicit?
Export implicit este o funcționalitate excepțională de export. Acesta este utilizat dacă dintr-un fișier este exportată o singură variabilă. Este, de asemenea, folosit pentru a crea o valoare de rezervă pentru un fișier sau modul.
Mai jos este un exemplu în care am folosit getFullName functioneaza implicit:
exportMod implicitfuncţiegetFullName (Numele complet){...}Nu puteți avea mai mult de o valoare implicită în fiecare modul sau fișier.
O funcție folosită ca implicit este importată diferit. Iată cum să importați getFullName functie folosita implicit:
import Numele complet din „./getPersonalDetails.js”Iată diferențele:
- Nu există acolade în jurul valorii importate, Numele complet.
- Numele complet aici este doar un nume de variabilă. Stochează valoarea oricarei funcții implicite.
Încărcați-vă funcțiile JavaScript
Modulele JavaScript sunt bucăți de cod care pot fi reutilizate în alte părți ale codului dvs., folosind funcțiile de import și export JavaScript. De obicei, sunt scrise în fișiere separate și importate folosind cuvântul cheie import. Unul dintre avantajele utilizării modulelor este că vă ajută să vă mențineți codul organizat. De asemenea, vă face codul mai ușor de gestionat și mai ușor de depanat.
