Tegenwoordig speelt JavaScript een grote rol bij de ontwikkeling van websites. Front-end developers gebruiken JavaScript om interactieve webapplicaties te maken. Als gevolg hiervan is er een toename in de vraag naar JavaScript-ontwikkelaars.
Jazeker, JavaScript is in de loop der jaren geëvolueerd. ES6 introduceerde veel nieuwe functies in de taal. Een daarvan is een manier om eenvoudig codes te delen tussen JavaScript-bestanden.
Functie-import en -export voor JavaScript zijn nieuwe functies die u een betere ontwikkelaar zullen maken. Hier is hoe deze functies werken.
Wat is een JavaScript-module?
Een JavaScript-module is een JavaScript-bestand dat een verzameling code bevat die u kunt gebruiken. Modules worden meestal in afzonderlijke bestanden geschreven en geïmporteerd met behulp van de importeren trefwoord. Het bespaart tijd en moeite omdat je het later kunt hergebruiken.
Als je bijvoorbeeld een functie hebt genaamd berekenSom(), kunt u het opnemen in een ander bestand en het overal in uw project beschikbaar maken met behulp van de
exporteren En importeren JavaScript werkt zonder enige poespas.Een van de voordelen van het gebruik van modules is dat het helpt om uw code georganiseerd te houden. Het maakt uw code ook beter beheersbaar en gemakkelijker te debuggen.
Om een JavaScript-bestand als module te gebruiken, moet u een script in uw HTML-document maken met een type="module".
<scripttype="moduul" src="bestandsnaam.js"></script>
Er zijn twee soorten modules:
- ECMAScript-modules: standaard JavaScript-modules en worden ondersteund door alle grote browsers.
- CommonJS-modules: zijn ouder en worden niet breed ondersteund.
We zullen ons hier concentreren op de ECMAScript-modules. Raadpleeg indien nodig onze inleiding tot Javascript om de basis bij te spijkeren.
Hoe functies in JavaScript te exporteren
In JavaScript zijn functies eersteklas objecten die als argumenten kunnen worden doorgegeven en niet alleen kunnen worden gebruikt. Het exporteren van functies is een goede manier om ze over te zetten naar andere programma's. Het wordt ook gebruikt wanneer u herbruikbare bibliotheken wilt maken.
Het exporteren van functies in JavaScript gebeurt met behulp van de exporteren functie. De exporteren functie exporteert een bepaalde functie om te worden gebruikt door een ander bestand of script. Door te exporteren onze eigen functies, kunnen we ze vrij gebruiken in andere bestanden of scripts zonder ons zorgen te hoeven maken over licentieproblemen.
Er zijn twee manieren om de exporteren efficiënt functioneren. We zullen deze bespreken met codevoorbeelden.
Stel, je hebt een dossier getPersonalDetails.js die een functie heeft die de volledige naam van een gebruiker retourneert na een promptinvoer. De functie ziet er als volgt uit:
functiegetFullName(voor-en achternaam){
volledigeNaam = prompt('Wat is je voornaam');
troosten.log (volledige naam);
}
- U kunt deze functie eenvoudig exporteren met behulp van de exporteren trefwoord gevolgd door de naam van de functie tussen accolades. Het ziet er zo uit:
exporteren {getFullName}; - De tweede methode is het toevoegen van de exporteren trefwoord net voor het declareren van de functie.
exporterenfunctiegetFullName (voor-en achternaam){...}
U kunt meerdere functies exporteren door de eerste methode te gebruiken. Dit wordt gedaan door de namen van de gewenste functies tussen de accolades op te nemen. De functies zijn gescheiden door komma's.
Bijvoorbeeld: Stel je hebt drie functies in onze getPersonalDetails.js bestand - getFullName(),e-mail ophalen(), getDob(). U kunt de functies exporteren door de volgende regel code toe te voegen:
exporteer {getFullName, getEmail, getDob};
Functies in JavaScript importeren
Om een module te gebruiken, moet u deze eerst importeren. Elke functie kan worden geïmporteerd met behulp van een volledige padverwijzing.
Het importeren van functies is vrij eenvoudig. JavaScript heeft een ingebouwde functie om uw eigen functies uit andere bestanden te importeren. Als u toegang wilt tot die functies vanuit andere modules, is het een goed idee om een functiedeclaratie op te nemen voor elk van uw hulpprogramma's.
Een te importeren functie is al in het oorspronkelijke bestand geëxporteerd.
U kunt functies uit een ander bestand importeren met behulp van de importeren trefwoord functionaliteit. Importeren kunt u kiezen welk deel van een bestand of module u wilt laden.
Zo importeert u onze getFullName functie van getPersonalDetails.js:
importeren {getFullName} van './getPersonalDetails.js'Hierdoor wordt deze functie beschikbaar voor gebruik in ons huidige bestand.
Om meerdere functies te importeren, staan de te importeren functies tussen accolades. Elk wordt gescheiden door een komma (,).
importeren {getFullName, getEmail, getDob} van './getPersonalDetails.js'Er is een andere manier om de importeren functionaliteit. Hierdoor kunnen we alle exports in een bepaald bestand importeren. Het wordt gedaan met behulp van de importeren * als syntaxis.
U kunt alle export in ons importeren getPersonalDetails.js door de volgende regel code toe te voegen:
importeren * als personalDetailsModule van './getPersonalDetails.js'Het bovenstaande maakt een object met de naam personalDetailsModule.
Dit is slechts een variabele naam, je kunt het een willekeurige naam geven.
Dit object bevat alle export in onze getPersonalDetails.js. De functies worden in dit object opgeslagen en zijn toegankelijk op dezelfde manier als elke objecteigenschap.
We hebben bijvoorbeeld toegang tot de getFullName functie door de volgende regel code toe te voegen
personalDetailsModule.getFullName();Wat is exportstandaard?
Standaard exporteren is een uitzonderlijke exportfunctionaliteit. Dit wordt gebruikt als er slechts één variabele uit een bestand wordt geëxporteerd. Het wordt ook gebruikt om een terugvalwaarde voor een bestand of module te creëren.
Hieronder is een voorbeeld waarbij we de getFullName functie als standaard:
exporterenstandaardfunctiegetFullName (voor-en achternaam){...}U kunt niet meer dan één waarde standaard in elke module of elk bestand hebben.
Een functie die als standaard wordt gebruikt, wordt anders geïmporteerd. Hier leest u hoe u onze kunt importeren getFullName functie die standaard wordt gebruikt:
importeren voor-en achternaam van './getPersonalDetails.js'Dit zijn de verschillen:
- Er zijn geen accolades rond de geïmporteerde waarde, voor-en achternaam.
- voor-en achternaam hier is slechts een variabele naam. Het slaat de waarde op van wat de standaardfunctie ook is.
Geef uw JavaScript-functies een boost
JavaScript-modules zijn stukjes code die opnieuw kunnen worden gebruikt in andere delen van uw code, met behulp van de JavaScript-import- en exportfuncties. Ze worden meestal in afzonderlijke bestanden geschreven en geïmporteerd met behulp van het importsleutelwoord. Een van de voordelen van het gebruik van modules is dat het helpt om uw code georganiseerd te houden. Het maakt uw code ook beter beheersbaar en gemakkelijker te debuggen.
