I dag spelar JavaScript en stor roll i webbplatsutveckling. Front-end-utvecklare använder JavaScript för att skapa interaktiva webbapplikationer. Som ett resultat har efterfrågan på JavaScript-utvecklare ökat.
Visst har JavaScript utvecklats under åren. ES6 introducerade många nya funktioner i språket. En av dessa är ett sätt att enkelt dela koder bland JavaScript-filer.
Funktionsimport och -export för JavaScript är nya funktioner som gör dig till en bättre utvecklare. Så här fungerar dessa funktioner.
Vad är en JavaScript-modul?
En JavaScript-modul är en JavaScript-fil som innehåller en samling kod som du kan använda. Moduler skrivs vanligtvis i separata filer och importeras med hjälp av importera nyckelord. Det sparar tid och ansträngning eftersom du kan återanvända det senare.
Till exempel om du har en funktion som kallas beräknaSum(), kan du inkludera den i en annan fil och göra den tillgänglig var som helst i ditt projekt med hjälp av exportera och importera JavaScript fungerar utan krångel.
En av fördelarna med att använda moduler är att det hjälper till att hålla din kod organiserad. Det gör också din kod mer hanterbar och lättare att felsöka.
För att använda en JavaScript-fil som en modul måste du skapa ett skript i ditt HTML-dokument med en type="modul".
<skripttyp="modul" src="filnamn.js"></script>
Det finns två typer av moduler:
- ECMAScript-moduler: standard JavaScript-moduler och stöds av alla större webbläsare.
- CommonJS-moduler: är äldre och de stöds inte i stor utsträckning.
Vi kommer att fokusera på ECMAScript-modulerna här. Om det behövs, se vår introduktion till JavaScript för att fräscha upp grunderna.
Hur man exporterar funktioner i JavaScript
I JavaScript är funktioner förstklassiga objekt som kan skickas som argument förutom att användas på egen hand. Att exportera funktioner är ett bra sätt att överföra dem till andra program. Det används också när du vill skapa återanvändbara bibliotek.
Export av funktioner i JavaScript görs med hjälp av exportera fungera. De exportera funktion exporterar en given funktion för att användas av en annan fil eller skript. Genom att exportera våra egna funktioner, kan vi fritt använda dem i andra filer eller skript utan att oroa oss för licensproblem.
Det finns två sätt att använda exportera fungera effektivt. Vi kommer att gå över dessa med kodexempel.
Anta att du har en fil getPersonalDetails.js som har en funktion som returnerar det fullständiga namnet på en användare efter en prompt inmatning. Funktionen ser ut så här:
fungeragetFullName(fullständiga namn){
fullName = prompt('Vad är ditt förnamn');
trösta.log (fullständigt namn);
}
- Du kan exportera den här funktionen genom att helt enkelt använda exportera nyckelord följt av namnet på funktionen inom parentes. Det ser ut så här:
exportera {getFullName}; - Den andra metoden är att lägga till exportera nyckelord precis innan funktionen deklareras.
exporterafungeragetFullName (fullständiga namn){...}
Du kan exportera flera funktioner genom att använda den första metoden. Detta görs genom att inkludera namnen på de önskade funktionerna i den lockiga parentesen. Funktionerna är separerade med kommatecken.
Till exempel: Anta att du har tre funktioner i vår getPersonalDetails.js fil - getFullName(),getEmail(), getDob(). Du kan exportera funktionerna genom att lägga till följande kodrad:
exportera {getFullName, getEmail, getDob};
Hur man importerar funktioner i JavaScript
För att kunna använda en modul måste du först importera den. Vilken funktion som helst kan importeras med hjälp av en fullständig sökvägsreferens.
Att importera funktioner är ganska enkelt. JavaScript har en inbyggd funktion för att importera dina egna funktioner från andra filer. Om du vill komma åt dessa funktioner från andra moduler är det en bra idé att inkludera en funktionsdeklaration för vart och ett av dina verktyg.
En funktion som ska importeras är redan exporterad i sin ursprungliga fil.
Du kan importera funktioner från en annan fil med hjälp av importera nyckelordsfunktion. Importera låter dig välja vilken del av en fil eller modul som ska laddas.
Så här importerar du vår getFullName funktion från getPersonalDetails.js:
importera {getFullName} från './getPersonalDetails.js'Detta kommer att göra denna funktion tillgänglig för användning i vår nuvarande fil.
För att importera flera funktioner ingår funktionerna som ska importeras i de lockiga klammerparenteserna. Var och en avgränsas med ett kommatecken (,).
importera {getFullName, getEmail, getDob} från './getPersonalDetails.js'Det finns ett annat sätt att använda importera funktionalitet. Detta gör att vi kan importera alla exporter i en viss fil. Det görs med hjälp av importera * som syntax.
Du kan importera all export i vår getPersonalDetails.js genom att lägga till följande kodrad:
importera * som personalDetailsModule från './getPersonalDetails.js'Ovanstående skapar ett objekt som heter personalDetailsModule.
Detta är bara ett variabelnamn, du kan namnge det vad som helst.
Detta objekt innehåller all export i vår getPersonalDetails.js. Funktionerna lagras i det här objektet och kan nås på samma sätt som du kommer åt alla objektegenskaper.
Till exempel kan vi komma åt getFullName funktion genom att lägga till följande kodrad
personalDetailsModule.getFullName();Vad är exportstandard?
Export standard är en exceptionell exportfunktion. Detta används om endast en variabel exporteras från en fil. Det används också för att skapa ett reservvärde för en fil eller modul.
Nedan är ett exempel där vi använde getFullName fungera som standard:
exporterastandardfungeragetFullName (fullständiga namn){...}Du kan inte ha mer än ett värde som standard i varje modul eller fil.
En funktion som används som standard importeras annorlunda. Så här importerar du vår getFullName funktion som används som standard:
importera fullständiga namn från './getPersonalDetails.js'Här är skillnaderna:
- Det finns inga lockiga hängslen runt det importerade värdet, fullständiga namn.
- fullständiga namn här är bara ett variabelnamn. Den lagrar värdet för vilken standardfunktion än är.
Överladda dina JavaScript-funktioner
JavaScript-moduler är kodbitar som kan återanvändas i andra delar av din kod med hjälp av funktionerna för import och export av JavaScript. De skrivs vanligtvis i separata filer och importeras med hjälp av nyckelordet import. En av fördelarna med att använda moduler är att det hjälper till att hålla din kod organiserad. Det gör också din kod mer hanterbar och lättare att felsöka.