Nykyään JavaScriptillä on valtava rooli verkkosivustojen kehittämisessä. Käyttöliittymäkehittäjät käyttävät JavaScriptiä interaktiivisten verkkosovellusten luomiseen. Tämän seurauksena JavaScript-kehittäjien kysyntä on kasvanut.
Varmasti JavaScript on kehittynyt vuosien varrella. ES6 toi kieleen monia uusia ominaisuuksia. Yksi näistä on tapa helposti jakaa koodeja JavaScript-tiedostojen välillä.
JavaScriptin funktioiden tuonti ja vienti ovat uusia ominaisuuksia, jotka tekevät sinusta paremman kehittäjän. Näin nämä ominaisuudet toimivat.
Mikä on JavaScript-moduuli?
JavaScript-moduuli on JavaScript-tiedosto, joka sisältää kokoelman koodia käytettäväksi. Moduulit kirjoitetaan yleensä erillisiin tiedostoihin ja tuodaan käyttämällä tuonti avainsana. Se säästää aikaa ja vaivaa, koska voit käyttää sitä myöhemmin uudelleen.
Jos sinulla on esimerkiksi funktio nimeltä laske summa(), voit sisällyttää sen toiseen tiedostoon ja asettaa sen saataville missä tahansa projektissasi käyttämällä viedä ja tuonti JavaScript toimii ilman hälyä.
Yksi moduulien käytön eduista on, että se auttaa pitämään koodisi järjestyksessä. Se tekee myös koodistasi hallittavamman ja helpommin viankorjauksen.
Jotta voit käyttää JavaScript-tiedostoa moduulina, sinun on luotava komentosarja HTML-dokumenttiin a type="moduuli".
<komentosarjan tyyppi ="moduuli" src="tiedostonimi.js"></script>
Moduulityyppejä on kahdenlaisia:
- ECMAScript-moduulit: vakio JavaScript-moduulit ja niitä tukevat kaikki yleisimmät selaimet.
- CommonJS-moduulit: ovat vanhempia, eikä niitä tueta laajasti.
Keskitymme tässä ECMAScript-moduuleihin. Katso tarvittaessa johdatus JavaScriptiin perusasioissa.
Funktioiden vieminen JavaScriptiin
JavaScriptissä funktiot ovat ensiluokkaisia objekteja, jotka voidaan välittää argumentteina sen lisäksi, että niitä käytetään yksinään. Toimintojen vienti on hyvä tapa siirtää ne muihin ohjelmiin. Sitä käytetään myös, kun haluat luoda uudelleenkäytettäviä kirjastoja.
JavaScriptin funktioiden vienti tapahtuu käyttämällä viedä toiminto. The viedä funktio vie tietyn funktion käytettäväksi toisessa tiedostossa tai komentosarjassa. Viemällä omia toimintojamme, voimme käyttää niitä vapaasti muissa tiedostoissa tai skripteissä murehtimatta lisensointiongelmista.
On kaksi tapaa käyttää viedä toimivat tehokkaasti. Käymme näitä läpi koodiesimerkeillä.
Oletetaan, että sinulla on tiedosto getPersonalDetails.js jossa on toiminto, joka palauttaa käyttäjän koko nimen kehotteen jälkeen. Funktio näyttää tältä:
toimintogetFullName(koko nimi){
fullName = prompt('Mikä on etunimesi');
konsoli.log (kokoNimi);
}
- Voit viedä tämän toiminnon yksinkertaisesti käyttämällä viedä avainsana, jota seuraa funktion nimi hakasulkeissa. Se näyttää tältä:
viedä {getFullName}; - Toinen tapa on lisätä viedä avainsana juuri ennen funktion ilmoittamista.
viedätoimintogetFullName (koko nimi){...}
Voit viedä useita toimintoja käyttämällä ensimmäistä menetelmää. Tämä tehdään lisäämällä haluttujen toimintojen nimet kiharahakasulkeeseen. Toiminnot erotetaan toisistaan pilkulla.
Esimerkki: Oletetaan, että meillä on kolme toimintoa getPersonalDetails.js tiedosto - getFullName(),getEmail(), getDob(). Voit viedä funktiot lisäämällä seuraavan koodirivin:
vie {getFullName, getEmail, getDob};
Funktioiden tuominen JavaScriptiin
Jotta voit käyttää moduulia, sinun on ensin tuotava se. Mikä tahansa funktio voidaan tuoda käyttämällä täyden polun viittausta.
Toimintojen tuonti on melko yksinkertaista. JavaScriptissä on sisäänrakennettu ominaisuus, jolla voit tuoda omia toimintojasi muista tiedostoista. Jos haluat käyttää näitä toimintoja muista moduuleista, on hyvä idea sisällyttää jokaiselle apuohjelmallesi toimintomäärittely.
Tuotava funktio on jo viety alkuperäisessä tiedostossaan.
Voit tuoda toimintoja eri tiedostoista käyttämällä tuonti avainsanatoiminto. Tuonti voit valita ladattavan tiedoston tai moduulin osan.
Näin tuot meille getFullName toiminto alkaen getPersonalDetails.js:
tuonti {getFullName} alkaen './getPersonalDetails.js'Tämä antaa tämän toiminnon käytettäväksi nykyisessä tiedostossamme.
Jotta voidaan tuoda useita funktioita, tuotavat funktiot sisällytetään aaltosulkeisiin. Jokainen erotetaan pilkulla (,).
tuonti {getFullName, getEmail, getDob} alkaen './getPersonalDetails.js'On toinenkin tapa käyttää tuonti toiminnallisuutta. Tämän avulla voimme tuoda kaikki viennit tietyssä tiedostossa. Se tehdään käyttämällä tuonti * as syntaksi.
Voit tuoda kaiken viennin meille getPersonalDetails.js lisäämällä seuraavan rivin koodia:
tuonti * kuten personalDetailsModule alkaen './getPersonalDetails.js'Yllä oleva luo objektin nimeltä personalDetailsModule.
Tämä on vain muuttujan nimi, voit nimetä sille mitä tahansa.
Tämä objekti sisältää kaikki viennit meidän getPersonalDetails.js. Toiminnot on tallennettu tähän objektiin ja niitä voidaan käyttää samalla tavalla kuin käytät mitä tahansa objektin ominaisuutta.
Esimerkiksi voimme käyttää getFullName toiminto lisäämällä seuraavan koodirivin
personalDetailsModule.getFullName();Mikä on viennin oletusasetus?
Vie oletusarvo on poikkeuksellinen vientitoiminto. Tätä käytetään, jos tiedostosta viedään vain yksi muuttuja. Sitä käytetään myös vara-arvon luomiseen tiedostolle tai moduulille.
Alla on esimerkki, jossa käytimme getFullName toimii oletuksena:
viedäoletuksenatoimintogetFullName (koko nimi){...}Jokaisessa moduulissa tai tiedostossa voi olla vain yksi oletusarvo.
Oletusarvona käytetty funktio tuodaan eri tavalla. Näin voit tuoda meidän getFullName oletuksena käytetty toiminto:
tuonti koko nimi alkaen './getPersonalDetails.js'Tässä ovat erot:
- Tuodun arvon ympärillä ei ole kiharoita, koko nimi.
- koko nimi tässä on vain muuttujan nimi. Se tallentaa minkä tahansa oletusfunktion arvon.
Lataa JavaScript-toimintosi
JavaScript-moduulit ovat koodinpätkiä, joita voidaan käyttää uudelleen muissa koodisi osissa JavaScriptin tuonti- ja vientitoimintojen avulla. Ne kirjoitetaan yleensä erillisiin tiedostoihin ja tuodaan tuontiavainsanalla. Yksi moduulien käytön eduista on, että se auttaa pitämään koodisi järjestyksessä. Se tekee myös koodistasi hallittavamman ja helpommin viankorjauksen.