Danas JavaScript igra veliku ulogu u razvoju web stranice. Front-end programeri koriste JavaScript za izradu interaktivnih web aplikacija. Kao rezultat toga, došlo je do porasta potražnje za JavaScript programerima.
Svakako, JavaScript se razvijao tijekom godina. ES6 je uveo mnogo novih značajki u jezik. Jedan od njih je način jednostavnog dijeljenja kodova između JavaScript datoteka.
Uvoz i izvoz funkcija za JavaScript nove su značajke koje će vas učiniti boljim programerom. Evo kako te značajke funkcioniraju.
Što je JavaScript modul?
JavaScript modul je JavaScript datoteka koja sadrži kolekciju koda koju možete koristiti. Moduli se obično pišu u zasebne datoteke i uvoze pomoću uvoz ključna riječ. Štedi vrijeme i trud jer ga kasnije možete ponovno upotrijebiti.
Na primjer, ako imate funkciju tzv izračunajZbroj(), možete ga uključiti u drugu datoteku i učiniti dostupnim bilo gdje u vašem projektu pomoću izvoz i uvoz JavaScript funkcionira bez ikakvih problema.
Jedna od prednosti korištenja modula je ta što pomaže da vaš kod bude organiziran. Također čini vaš kod lakšim za rukovanje i lakšim za otklanjanje pogrešaka.
Da biste koristili JavaScript datoteku kao modul, trebate izraditi skriptu u svom HTML dokumentu s a tip="modul".
<vrsta skripte="modul" src="naziv datoteke.js"></script>
Postoje dvije vrste modula:
- ECMAScript moduli: standardni JavaScript moduli i podržavaju ih svi glavni preglednici.
- CommonJS moduli: stariji su i nisu široko podržani.
Ovdje ćemo se usredotočiti na ECMAScript module. Ako je potrebno, pogledajte naše uvod u JavaScript obnoviti osnove.
Kako izvesti funkcije u JavaScriptu
U JavaScriptu su funkcije prvorazredni objekti koji se mogu proslijediti kao argumenti osim što se mogu koristiti sami. Izvoz funkcija je dobar način za njihov prijenos u druge programe. Također se koristi kada želite stvoriti biblioteke za višekratnu upotrebu.
Izvoz funkcija u JavaScriptu vrši se pomoću izvoz funkcija. The izvoz funkcija izvozi datu funkciju da bi je koristila druga datoteka ili skripta. Izvozom naše vlastite funkcije, možemo ih slobodno koristiti u drugim datotekama ili skriptama bez brige o problemima s licenciranjem.
Postoje dva načina za korištenje izvoz funkcionirati učinkovito. Proći ćemo kroz njih s primjerima koda.
Pretpostavimo da imate datoteku getPersonalDetails.js koji ima funkciju koja vraća puno ime korisnika nakon brzog unosa. Funkcija izgleda ovako:
funkcijagetFullName(puno ime){
puno ime = upit('Kako se zoveš');
konzola.log (puno ime);
}
- Ovu funkciju možete izvesti jednostavnim korištenjem izvoz ključnu riječ iza koje slijedi naziv funkcije u vitičastim zagradama. Ovako izgleda:
izvoz {getFullName}; - Druga metoda je dodavanje izvoz ključna riječ neposredno prije deklariranja funkcije.
izvozfunkcijagetFullName (puno ime){...}
Pomoću prve metode možete izvesti više funkcija. To se postiže uključivanjem naziva željenih funkcija u vitičastu zagradu. Funkcije su odvojene zarezom.
Na primjer: Pretpostavimo da imate tri funkcije u našem getPersonalDetails.js datoteka - getFullName(),getEmail(), getDob(). Funkcije možete izvesti dodavanjem sljedećeg retka koda:
izvoz {getFullName, getEmail, getDob};
Kako uvesti funkcije u JavaScript
Da biste koristili modul, prvo ga morate uvesti. Bilo koja se funkcija može uvesti pomoću reference pune putanje.
Uvoz funkcija je prilično jednostavan. JavaScript ima ugrađenu značajku za uvoz vlastitih funkcija iz drugih datoteka. Ako želite pristupiti tim funkcijama iz drugih modula, dobra je ideja uključiti deklaraciju funkcije za svaki od vaših pomoćnih programa.
Funkcija koju treba uvesti već je izvezena u izvornoj datoteci.
Možete uvesti funkcije iz druge datoteke pomoću uvoz funkcionalnost ključne riječi. Uvoz omogućuje vam da odaberete koji dio datoteke ili modula želite učitati.
Evo kako uvozite naše getFullName funkcija iz getPersonalDetails.js:
uvoz {getFullName} iz './getPersonalDetails.js'Ovo će učiniti ovu funkciju dostupnom za korištenje u našoj trenutnoj datoteci.
Kako biste uvezli više funkcija, funkcije koje se uvoze uključene su u vitičaste zagrade. Svaki je odvojen zarezom (,).
uvoz {getFullName, getEmail, getDob} iz './getPersonalDetails.js'Postoji još jedan način korištenja uvoz funkcionalnost. To nam omogućuje uvoz svih izvoza u određenu datoteku. To se radi pomoću uvoz * kao sintaksa.
Možete uvesti sav izvoz u naš getPersonalDetails.js dodavanjem sljedećeg retka koda:
uvoz * kao personalDetailsModule iz './getPersonalDetails.js'Gore navedeno će stvoriti objekt pod nazivom personalDetailsModule.
Ovo je samo naziv varijable, možete ga imenovati bilo kako.
Ovaj objekt sadrži sve izvoze u našem getPersonalDetails.js. Funkcije su pohranjene u ovom objektu i može im se pristupiti na način na koji pristupate bilo kojem svojstvu objekta.
Na primjer, možemo pristupiti getFullName funkciju dodavanjem sljedećeg retka koda
personalDetailsModule.getFullName();Što je zadano za izvoz?
Zadani izvoz je izuzetna izvozna funkcionalnost. Ovo se koristi ako se samo jedna varijabla izvozi iz datoteke. Također se koristi za stvaranje rezervne vrijednosti za datoteku ili modul.
Ispod je primjer gdje smo koristili getFullName funkcionira kao zadana:
izvozzadanofunkcijagetFullName (puno ime){...}Ne možete imati više od jedne vrijednosti kao zadane u svakom modulu ili datoteci.
Funkcija koja se koristi kao zadana uvozi se drugačije. Evo kako uvesti naš getFullName funkcija koja se koristi kao zadana:
uvoz puno ime iz './getPersonalDetails.js'Evo razlika:
- Oko uvezene vrijednosti nema vitičastih zagrada, puno ime.
- puno ime ovdje je samo naziv varijable. Pohranjuje vrijednost bilo koje zadane funkcije.
Nadopunite svoje JavaScript funkcije
JavaScript moduli su dijelovi koda koji se mogu ponovno upotrijebiti u drugim dijelovima vašeg koda, pomoću funkcija uvoza i izvoza JavaScripta. Obično su zapisani u zasebnim datotekama i uvezeni pomoću ključne riječi import. Jedna od prednosti korištenja modula je ta što pomaže da vaš kod bude organiziran. Također čini vaš kod lakšim za rukovanje i lakšim za otklanjanje pogrešaka.