Moduler, import- og eksportuttalelser i JavaScript | Forklart med eksempler

Moduler brukes i JavaScript for å implementere begrepet modularitet som er, i sin kjerne, prosessen med å dele en løsning i mindre, kompakte og mer meningsfulle komponenter. I JavaScript oppnås modularitet ved å bruke eksport og importere nøkkelord. Når JavaScript brukes som et modulært skript med en HTML -webside, nøkkelordet "modul”Legges til som typen skriptet merke

Hvorfor bruke moduler

Unngå å gjenta ordene. “Med passering av tid endret webapplikasjoner seg fra å være veldig små programmer til store og komplekse programmer for å utføre kompliserte oppgaver. For å lage større/komplekse webapplikasjoner, kom ES6 JavaScript med muligheten til å dele skript i mindre og håndterbare komponenter med bruk av Eksportfunksjon og Importfunksjon.

Sette opp en HTML -side

Gå inn i den foretrukne tekstredigereren din og lag en HTML -side, legg ganske enkelt følgende kodelinjer inne i Body -taggen:

JS -moduler forklart

I stedet for å manipulere HTML -elementene på en webside, skal vi vise og bekrefte utdata ved hjelp av konsollen. Derfor krever vi ikke fancy elementer på HTML -siden vår.

Kjør filen, og du vil se følgende utdata:

Sette opp skriptfiler

Nå, mens du holder deg i samme katalog der HTML -filen din er, oppretter du to “.JS”Filer som:

• MainScript.JS: Denne filen vil være koblet til HTML -websiden.
• Compscript.JS: Denne filen vil inneholde noen komponentfunksjoner.

Akkurat som dette:

Nå, i din HTML, kobler du MainScript.JS ved hjelp av følgende kommando:

Som du kan se, i motsetning til normale skriptkoder, passerer vi ikke bare kildekoblingen, men også typen som er satt til "modul”, For å varsle nettleseren om at dette skriptet er i modulær form.

Legge til funksjon i komponentfilen

Nå, for å vise modularitet, skal du lage noen variabler/funksjoner i komponentskriptfilen "Compscript.JS”Og eksporter dem inne i MainScript.JS.

Inne i Compscript.JS Lag følgende funksjon som vil skrive ut 5 tall:

funksjon printnumbers (num)
for (la i = num; i <= num+5 ; i++)
konsoll.logg (i);

Komponentskriptfilen din vil se slik ut:

Eksporter og importerende funksjoner

Nå for å få tilgang til denne funksjonen inne i MainScript.JS fil du må eksportere denne funksjonen fra Compscript.JS -fil. Du kan gjøre det ved å legge søkeordeksporten bak funksjonen akkurat slik:

Nå, for å bruke det inne i hovedskriptet.JS, vi må fange dette eksport bruker import funksjon. Du kan gjøre det ved å bruke følgende syntaks:

import funksjonsnavn fra "scriptsoruce.JS;

I vårt tilfelle ville denne linjen endres til:

import printnumbers fra "./Compscript.JS ";

Nå for å bruke denne funksjonen i hovedskriptfilen vår, kan du ganske enkelt ringe funksjonen som vi kaller hvilken som helst annen funksjon i JavaScript:

printnumbers (5);

De MainScript.JS vil se slik ut:

Lagre filen, og oppdater HTML, og gå over til utviklerkonsollen, og du vil se følgende utdata:

Og hvis du følger nøye med på utgangen inne i konsollen, vil du se:

Selv om du bare koblet MianScript.JS Med HTML -siden ble komponenten vår utført med hell. Derfor kan du si at du har implementert begrepet komponentiell modularitet.

Men vent, det er mer!

Se for deg at du eksporterer flere funksjoner som:

Eksportfunksjon Printnumbers (num)
for (la i = num; i <= num + 5; i++)
konsoll.logg (i);


eksportfunksjon namePrinter ()
konsoll.Logg ("John Doe")

Eksport const alder = 22;
eksportfunksjon printJob ()
konsoll.log ('revisor');

Skrive nøkkelordet eksport Med hvert element du vil eksportere er ikke en god tilnærming, det du kan gjøre er, er på slutten av filen, skriv en linjekommando, som vil eksportere funksjonene og variablene du vil.

Du gjør dette ved å skrive følgende linje:

eksport printnumbers, nameprinter, alder, printJob;

Din Compscript.JS vil se slik ut:

Tilsvarende, for å importere alle funksjonene og variablene med eksportnøkkelordet fra en fil, kan du bruke Asterisk “*” -symbolet som vist nedenfor:

import * som kompat fra "./Compscript.JS ";

De Stjerne -symbol “ *” betyr at du vil importere all eksport av filen under navnet "komp”,

For å bruke funksjonen og variablene som vi nettopp importerte, bruker du prikkoperatør Sammen med navnet på funksjonen/variabelen:

komp.NamePrinter ();

Hvis du skulle bruke all eksporten fra Compscript.JS fil, så bruker du følgende kode:

import * som kompat fra "./Compscript.JS ";
komp.NamePrinter ();
konsoll.Logg ("Alder er:" + comp.alder);
komp.printJob ();
komp.printnumbers (2);

Så din MainScript.JS vil se slik ut:

Lagre filene og oppdater websiden, så ser du utdataene inne i konsollen som

Som du ser, benyttet vi oss av hver eksport fra Compscript.JS inne i vår MainScript.JS fil.

Konklusjon

Moduler hjelper oss med å dele opp webapplikasjonene våre i mindre, konsise og håndterbare deler; Modularitet i JavaScript oppnås ved å dele skriptet i forskjellige komponenter og bruke import og eksport egenskaper Alternativ introdusert i ES6. For å demonstrere dette satte vi opp en grunnleggende HTML -side, opprettet to forskjellige skriptfiler og ga noen funksjoner i komponentfilen. Etterpå brukte vi dem inne i hovedskriptfilen vår. Vi lærte også forskjellige måter å eksportere flere funksjoner og importere alle funksjonene på en gang.