Danes ima JavaScript veliko vlogo pri razvoju spletnih strani. Front-end razvijalci uporabljajo JavaScript za ustvarjanje interaktivnih spletnih aplikacij. Posledično se je povečalo povpraševanje po razvijalcih JavaScript.
Seveda se je JavaScript skozi leta razvijal. ES6 je v jezik uvedel veliko novih funkcij. Eden od teh je način za preprosto deljenje kod med datotekami JavaScript.
Uvoz in izvoz funkcij za JavaScript sta novi funkciji, zaradi katerih boste boljši razvijalec. Tukaj je opisano, kako te funkcije delujejo.
Kaj je modul JavaScript?
Modul JavaScript je datoteka JavaScript, ki vsebuje zbirko kode, ki jo lahko uporabite. Moduli so običajno zapisani v ločenih datotekah in uvoženi z uporabo uvoz ključna beseda. Prihrani čas in trud, saj ga lahko pozneje ponovno uporabite.
Na primer, če imate poklicano funkcijo izračunaVsota(), ga lahko vključite v drugo datoteko in ga daste na voljo kjer koli v vašem projektu z uporabo izvoz in uvoz JavaScript deluje brez težav.
Ena od prednosti uporabe modulov je, da pomaga ohranjati organiziranost kode. Prav tako naredi vašo kodo bolj obvladljivo in lažjo za odpravljanje napak.
Če želite datoteko JavaScript uporabiti kot modul, morate v dokumentu HTML ustvariti skript z a tip="modul".
<vrsta skripta="modul" src="imedatoteke.js"></script>
Obstajata dve vrsti modulov:
- Moduli ECMAScript: standardni moduli JavaScript in jih podpirajo vsi glavni brskalniki.
- Moduli CommonJS: so starejši in niso splošno podprti.
Tu se bomo osredotočili na module ECMAScript. Če je potrebno, si oglejte naše uvod v JavaScript osvežiti osnove.
Kako izvoziti funkcije v JavaScript
V JavaScriptu so funkcije prvorazredni objekti, ki jih je mogoče posredovati kot argumente in jih uporabljati samostojno. Izvoz funkcij je dober način za njihov prenos v druge programe. Uporablja se tudi, ko želite ustvariti knjižnice za večkratno uporabo.
Izvoz funkcij v JavaScript se izvede z uporabo izvoz funkcijo. The izvoz funkcija izvozi dano funkcijo za uporabo v drugi datoteki ali skriptu. Z izvozom naše lastne funkcije, jih lahko prosto uporabljamo v drugih datotekah ali skriptih, ne da bi nas skrbelo težave z licenciranjem.
Obstajata dva načina za uporabo izvoz delujejo učinkovito. Pregledali jih bomo s primeri kode.
Recimo, da imate datoteko getPersonalDetails.js ki ima funkcijo, ki po pozivnem vnosu vrne polno ime uporabnika. Funkcija izgleda takole:
funkcijogetFullName(polno ime){
polno ime = poziv('Kako se imenuješ');
konzola.log (polno ime);
}
- To funkcijo lahko izvozite tako, da preprosto uporabite izvoz ključna beseda, ki ji sledi ime funkcije v zavitih oklepajih. Videti je takole:
izvoz {getFullName}; - Druga metoda je dodajanje izvoz ključno besedo tik pred deklaracijo funkcije.
izvozfunkcijogetFullName (polno ime){...}
S prvo metodo lahko izvozite več funkcij. To storite tako, da imena želenih funkcij vključite v zavit oklepaj. Funkcije so ločene z vejico.
Na primer: Recimo, da imate tri funkcije v našem getPersonalDetails.js mapa - getFullName(),getEmail(), getDob(). Funkcije lahko izvozite tako, da dodate naslednjo vrstico kode:
izvoz {getFullName, getEmail, getDob};
Kako uvoziti funkcije v JavaScript
Če želite uporabiti modul, ga morate najprej uvoziti. Katero koli funkcijo je mogoče uvoziti s sklicevanjem na celotno pot.
Uvoz funkcij je povsem preprost. JavaScript ima vgrajeno funkcijo za uvoz lastnih funkcij iz drugih datotek. Če želite dostopati do teh funkcij iz drugih modulov, je dobro, da vključite deklaracijo funkcije za vsakega od vaših pripomočkov.
Funkcija, ki jo želite uvoziti, je že izvožena v izvirni datoteki.
Funkcije lahko uvozite iz druge datoteke z uporabo uvoz funkcionalnost ključnih besed. Uvozi vam omogoča, da izberete, kateri del datoteke ali modula želite naložiti.
Tukaj je opisano, kako uvozite naše getFullName funkcijo od getPersonalDetails.js:
uvoz {getFullName} od './getPersonalDetails.js'S tem bo ta funkcija na voljo za uporabo v naši trenutni datoteki.
Če želite uvoziti več funkcij, so funkcije, ki jih želite uvoziti, vključene v zavite oklepaje. Vsak je ločen z vejico (,).
uvoz {getFullName, getEmail, getDob} od './getPersonalDetails.js'Obstaja še en način uporabe uvoz funkcionalnost. To nam omogoča uvoz vseh izvozov v določeno datoteko. Izvaja se z uporabo uvoz * kot sintaksa.
Ves izvoz lahko uvozite v naše getPersonalDetails.js z dodajanjem naslednje vrstice kode:
uvoz * kot personalDetailsModule od './getPersonalDetails.js'Zgornje bo ustvarilo objekt, imenovan personalDetailsModule.
To je samo ime spremenljivke, poimenujete jo lahko poljubno.
Ta objekt vsebuje vse izvoze v našem getPersonalDetails.js. Funkcije so shranjene v tem objektu in do njih lahko dostopate tako, kot dostopate do katere koli lastnosti objekta.
Na primer, lahko dostopamo do getFullName funkcijo z dodajanjem naslednje vrstice kode
personalDetailsModule.getFullName();Kaj je privzeti izvoz?
Izvozi privzeto je izjemna izvozna funkcionalnost. To se uporablja, če se iz datoteke izvaža samo ena spremenljivka. Uporablja se tudi za ustvarjanje nadomestne vrednosti za datoteko ali modul.
Spodaj je primer, kjer smo uporabili getFullName deluje kot privzeto:
izvozprivzetofunkcijogetFullName (polno ime){...}V vsakem modulu ali datoteki ne morete imeti več kot ene privzete vrednosti.
Funkcija, ki se uporablja kot privzeta, se uvozi drugače. Tukaj je opisano, kako uvozite naše getFullName privzeta funkcija:
uvoz polno ime od './getPersonalDetails.js'Tukaj so razlike:
- Okoli uvožene vrednosti ni zavitih oklepajev, polno ime.
- polno ime tukaj je samo ime spremenljivke. Shrani vrednost katere koli privzete funkcije.
Napolnite svoje funkcije JavaScript
Moduli JavaScript so deli kode, ki jih je mogoče znova uporabiti v drugih delih kode z uporabo funkcij JavaScript za uvoz in izvoz. Običajno so zapisane v ločenih datotekah in uvožene s ključno besedo import. Ena od prednosti uporabe modulov je, da pomaga ohranjati organiziranost kode. Prav tako naredi vašo kodo bolj obvladljivo in lažjo za odpravljanje napak.