I dag spiller JavaScript en stor rolle i utvikling av nettsider. Frontend-utviklere bruker JavaScript til å lage interaktive nettapplikasjoner. Som et resultat har det vært en økning i etterspørselen etter JavaScript-utviklere.
Absolutt, JavaScript har utviklet seg gjennom årene. ES6 introduserte mange nye funksjoner til språket. En av disse er en måte å enkelt dele koder mellom JavaScript-filer.
Funksjonsimport og -eksport for JavaScript er nye funksjoner som vil gjøre deg til en bedre utvikler. Her er hvordan disse funksjonene fungerer.
Hva er en JavaScript-modul?
En JavaScript-modul er en JavaScript-fil som inneholder en samling kode du kan bruke. Moduler skrives vanligvis i separate filer og importeres ved hjelp av import nøkkelord. Det sparer tid og krefter fordi du kan gjenbruke det senere.
For eksempel hvis du har en funksjon kalt beregnesum(), kan du inkludere den i en annen fil og gjøre den tilgjengelig hvor som helst i prosjektet ditt ved å bruke eksport og import JavaScript fungerer uten noe oppstyr.
En av fordelene med å bruke moduler er at det hjelper å holde koden din organisert. Det gjør også koden din mer håndterlig og enklere å feilsøke.
For å bruke en JavaScript-fil som en modul, må du lage et skript i HTML-dokumentet ditt med en type="modul".
<skripttype="modul" src="filnavn.js"></script>
Det finnes to typer moduler:
- ECMAScript-moduler: standard JavaScript-moduler og støttes av alle større nettlesere.
- CommonJS-moduler: er eldre, og de støttes ikke bredt.
Vi vil fokusere på ECMAScript-modulene her. Om nødvendig, se vår introduksjon til JavaScript for å friske opp det grunnleggende.
Hvordan eksportere funksjoner i JavaScript
I JavaScript er funksjoner førsteklasses objekter som kan sendes som argumenter i tillegg til å brukes alene. Eksport av funksjoner er en god måte å overføre dem til andre programmer. Den brukes også når du vil lage gjenbrukbare biblioteker.
Eksport av funksjoner i JavaScript gjøres ved å bruke eksport funksjon. De eksport funksjon eksporterer en gitt funksjon som skal brukes av en annen fil eller skript. Ved å eksportere våre egne funksjoner, kan vi fritt bruke dem i andre filer eller skript uten å bekymre oss for lisensieringsproblemer.
Det er to måter å bruke eksport fungere effektivt. Vi vil gå over disse med kodeeksempler.
Anta at du har en fil få personlige detaljer.js som har en funksjon som returnerer det fulle navnet til en bruker etter en ledetekst. Funksjonen ser slik ut:
funksjongetFullName(fullt navn){
fullName = ledetekst('Hva er ditt fornavn');
konsoll.log (fullt navn);
}
- Du kan eksportere denne funksjonen ved å bruke eksport nøkkelord etterfulgt av navnet på funksjonen i krøllede parenteser. Det ser slik ut:
eksport {getFullName}; - Den andre metoden er å legge til eksport nøkkelord rett før funksjonen erklæres.
eksportfunksjongetFullName (fullt navn){...}
Du kan eksportere flere funksjoner ved å bruke den første metoden. Dette gjøres ved å inkludere navnene på de ønskede funksjonene i den krøllede parentesen. Funksjonene er atskilt med komma.
For eksempel: Anta at du har tre funksjoner i vår få personlige detaljer.js fil - getFullName(),getEmail(), getDob(). Du kan eksportere funksjonene ved å legge til følgende kodelinje:
eksport {getFullName, getEmail, getDob};
Slik importerer du funksjoner i JavaScript
For å bruke en modul må du først importere den. Enhver funksjon kan importeres ved hjelp av en full-banereferanse.
Import av funksjoner er ganske enkelt. JavaScript har en innebygd funksjon for å importere dine egne funksjoner fra andre filer. Hvis du vil ha tilgang til disse funksjonene fra andre moduler, er det en god idé å inkludere en funksjonserklæring for hvert av verktøyene dine.
En funksjon som skal importeres er allerede eksportert i den opprinnelige filen.
Du kan importere funksjoner fra en annen fil ved å bruke import nøkkelordfunksjonalitet. Import lar deg velge hvilken del av en fil eller modul som skal lastes.
Slik importerer du vår getFullName funksjon fra få personlige detaljer.js:
import {getFullName} fra './getPersonalDetails.js'Dette vil gjøre denne funksjonen tilgjengelig for bruk i vår nåværende fil.
For å importere flere funksjoner, er funksjonene som skal importeres inkludert i krøllete klammeparenteser. Hver er atskilt med komma (,).
import {getFullName, getEmail, getDob} fra './getPersonalDetails.js'Det er en annen måte å bruke import funksjonalitet. Dette lar oss importere all eksport i en bestemt fil. Det gjøres ved hjelp av import * som syntaks.
Du kan importere all eksport i vår få personlige detaljer.js ved å legge til følgende kodelinje:
import * som personalDetailsModule fra './getPersonalDetails.js'Ovennevnte vil lage et objekt kalt personalDetailsModule.
Dette er bare et variabelnavn, du kan navngi det hva som helst.
Dette objektet inneholder all eksport i vår getPersonalDetails.js. Funksjonene er lagret i dette objektet og kan nås slik du får tilgang til en hvilken som helst objektegenskap.
For eksempel kan vi få tilgang til getFullName funksjon ved å legge til følgende kodelinje
personalDetailsModule.getFullName();Hva er eksportstandard?
Eksporter standard er en eksepsjonell eksportfunksjonalitet. Dette brukes hvis bare én variabel eksporteres fra en fil. Den brukes også til å lage en reserveverdi for en fil eller modul.
Nedenfor er et eksempel hvor vi brukte getFullName fungere som standard:
eksportmisligholdefunksjongetFullName (fullt navn){...}Du kan ikke ha mer enn én verdi som standard i hver modul eller fil.
En funksjon som brukes som standard importeres annerledes. Slik importerer du vår getFullName funksjon brukt som standard:
import fullt navn fra './getPersonalDetails.js'Her er forskjellene:
- Det er ingen krøllete bukseseler rundt den importerte verdien, fullt navn.
- fullt navn her er bare et variabelnavn. Den lagrer verdien av hva standardfunksjonen er.
Superlad dine JavaScript-funksjoner
JavaScript-moduler er kodebiter som kan gjenbrukes i andre deler av koden din, ved å bruke JavaScript-funksjonene for import og eksport. De er vanligvis skrevet i separate filer, og importert ved hjelp av importnøkkelordet. En av fordelene med å bruke moduler er at det hjelper å holde koden din organisert. Det gjør også koden din mer håndterlig og enklere å feilsøke.
