I dag spiller JavaScript en stor rolle i udvikling af websteder. Frontend-udviklere bruger JavaScript til at skabe interaktive webapplikationer. Som et resultat har der været en stigning i efterspørgslen efter JavaScript-udviklere.
JavaScript har bestemt udviklet sig gennem årene. ES6 introducerede mange nye funktioner til sproget. En af disse er en måde at nemt dele koder blandt JavaScript-filer.
Funktionsimport og -eksport til JavaScript er nye funktioner, der vil gøre dig til en bedre udvikler. Sådan fungerer disse funktioner.
Hvad er et JavaScript-modul?
Et JavaScript-modul er en JavaScript-fil, der indeholder en samling kode, som du kan bruge. Moduler skrives normalt i separate filer og importeres ved hjælp af importere søgeord. Det sparer tid og kræfter, fordi du kan genbruge det senere.
For eksempel hvis du har en funktion kaldet beregnSum(), kan du inkludere den i en anden fil og gøre den tilgængelig hvor som helst i dit projekt ved hjælp af eksport og importere JavaScript fungerer uden besvær.
En af fordelene ved at bruge moduler er, at det hjælper med at holde din kode organiseret. Det gør også din kode mere overskuelig og nemmere at fejlfinde.
For at bruge en JavaScript-fil som et modul, skal du oprette et script i dit HTML-dokument med en type="modul".
<script type="modul" src="filnavn.js"></script>
Der er to typer moduler:
- ECMAScript-moduler: standard JavaScript-moduler og understøttes af alle større browsere.
- CommonJS-moduler: er ældre, og de er ikke bredt understøttet.
Vi vil fokusere på ECMAScript-modulerne her. Hvis det er nødvendigt, se vores introduktion til JavaScript at friske op på det grundlæggende.
Sådan eksporteres funktioner i JavaScript
I JavaScript er funktioner førsteklasses objekter, der kan sendes som argumenter ud over at blive brugt alene. Eksport af funktioner er en god måde at overføre dem til andre programmer. Det bruges også, når du vil oprette genbrugelige biblioteker.
Eksport af funktioner i JavaScript udføres ved hjælp af eksport fungere. Det eksport funktion eksporterer en given funktion til brug af en anden fil eller et andet script. Ved at eksportere vores egne funktioner, kan vi frit bruge dem i andre filer eller scripts uden at bekymre os om licensproblemer.
Der er to måder at bruge eksport fungere effektivt. Vi vil gennemgå disse med kodeeksempler.
Antag, at du har en fil få Personlige detaljer.js som har en funktion, der returnerer det fulde navn på en bruger efter en promptinput. Funktionen ser sådan ud:
fungeregetFuldt Navn(fulde navn){
fuldnavn = prompt('Hvad er dit fornavn');
konsol.log (fuldt navn);
}
- Du kan eksportere denne funktion ved blot at bruge eksport nøgleord efterfulgt af navnet på funktionen i krøllede parenteser. Det ser sådan ud:
eksport {getFullName}; - Den anden metode er at tilføje eksport søgeord lige før funktionen erklæres.
eksportfungeregetFuldt Navn (fulde navn){...}
Du kan eksportere flere funktioner ved at bruge den første metode. Dette gøres ved at inkludere navnene på de ønskede funktioner i den krøllede parentes. Funktionerne er adskilt med komma.
For eksempel: Antag, at du har tre funktioner i vores få Personlige detaljer.js fil - getFuldt Navn(),getEmail(), getDob(). Du kan eksportere funktionerne ved at tilføje følgende kodelinje:
eksport {getFullName, getEmail, getDob};
Sådan importeres funktioner i JavaScript
For at bruge et modul skal du først importere det. Enhver funktion kan importeres ved hjælp af en fuldsti-reference.
Import af funktioner er ret ligetil. JavaScript har en indbygget funktion til at importere dine egne funktioner fra andre filer. Hvis du vil have adgang til disse funktioner fra andre moduler, er det en god idé at inkludere en funktionserklæring for hvert af dine hjælpeprogrammer.
En funktion, der skal importeres, er allerede eksporteret i sin originale fil.
Du kan importere funktioner fra en anden fil ved hjælp af importere søgeordsfunktionalitet. Importere giver dig mulighed for at vælge, hvilken del af en fil eller et modul, der skal indlæses.
Sådan importerer du vores getFuldt Navn funktion fra få Personlige detaljer.js:
importere {getFullName} fra './getPersonalDetails.js'Dette vil gøre denne funktion tilgængelig til brug i vores nuværende fil.
For at importere flere funktioner er de funktioner, der skal importeres, inkluderet i de krøllede klammeparenteser. Hver er adskilt af et komma (,).
importere {getFullName, getEmail, getDob} fra './getPersonalDetails.js'Der er en anden måde at bruge importere funktionalitet. Dette giver os mulighed for at importere alle eksporterne i en bestemt fil. Det gøres ved hjælp af import * som syntaks.
Du kan importere al eksport i vores få Personlige detaljer.js ved at tilføje følgende kodelinje:
importere * som personlige detaljer-modul fra './getPersonalDetails.js'Ovenstående vil oprette et objekt kaldet personlige detaljer-modul.
Dette er bare et variabelnavn, du kan navngive det hvad som helst.
Dette objekt indeholder al eksport i vores getPersonalDetails.js. Funktionerne er gemt i dette objekt og kan tilgås på samme måde, som du får adgang til enhver objektegenskab.
For eksempel kan vi få adgang til getFuldt Navn funktion ved at tilføje følgende kodelinje
personlige detaljer-modul.getFullName();Hvad er eksportstandard?
Eksporter standard er en enestående eksportfunktionalitet. Dette bruges, hvis kun én variabel eksporteres fra en fil. Det bruges også til at oprette en reserveværdi for en fil eller et modul.
Nedenfor er et eksempel, hvor vi brugte getFuldt Navn fungere som standard:
eksportStandardfungeregetFuldt Navn (fulde navn){...}Du kan ikke have mere end én værdi som standard i hvert modul eller fil.
En funktion, der bruges som standard, importeres anderledes. Sådan importerer du vores getFuldt Navn funktion brugt som standard:
importere fulde navn fra './getPersonalDetails.js'Her er forskellene:
- Der er ingen krøllede seler omkring den importerede værdi, fulde navn.
- fulde navn her er blot et variabelnavn. Den gemmer værdien af, hvad end standardfunktionen er.
Supercharge dine JavaScript-funktioner
JavaScript-moduler er stykker kode, som kan genbruges i andre dele af din kode ved hjælp af import- og eksport-JavaScript-funktionerne. De er normalt skrevet i separate filer og importeret ved hjælp af importnøgleordet. En af fordelene ved at bruge moduler er, at det hjælper med at holde din kode organiseret. Det gør også din kode mere overskuelig og nemmere at fejlfinde.
