Konseptet med moduler kommer fra det modulære programmeringsparadigmet. Dette paradigmet foreslår at programvare skal være sammensatt av separate, utskiftbare komponenter kalt "moduler" ved å bryte ned programfunksjoner i frittstående filer som kan fungere separat eller koblet sammen i en applikasjon.

En modul er en frittstående fil som innkapsler kode for å implementere viss funksjonalitet og fremme gjenbrukbarhet og organisering.

Her vil du dekke modulsystemene som brukes i JavaScript-applikasjoner, inkludert modulmønsteret, CommonJS-modulsystemet som brukes i de fleste Node.js-applikasjoner, og ES6-modulsystemet.

Modulmønsteret

Før introduksjonen av native JavaScript-moduler ble moduldesignmønsteret brukt som et modulsystem for å omfange variabler og funksjoner til en enkelt fil.

Dette ble implementert ved å bruke umiddelbart påkalte funksjonsuttrykk, populært kjent som IIFE-er. En IIFE er en funksjon som ikke kan gjenbrukes som kjører så snart den er opprettet.

Her er den grunnleggende strukturen til en IIFE:

instagram viewer 
(funksjon () {
//kode her
})();
(() => {
//kode her
})();
(asynkron () => {
//kode her
})();

Kodeblokken ovenfor beskriver IIFE-er som brukes i tre forskjellige sammenhenger.

IIFE-er ble brukt fordi variabler deklarert inne i en funksjon er scoped til funksjonen, noe som gjør dem bare tilgjengelig i funksjonen, og fordi funksjoner lar deg returnere data (gjør dem offentlig tilgjengelig).

For eksempel:

konst foo = (funksjon () {
konst sayName = (navn) => {
konsoll.Logg('Hei, jeg heter ${name}`);
 };
//Eksponering av variablene
komme tilbake {
 callSayName: (navn) => siNavn (navn),
 };
})();
//Tilgang til utsatte metoder
foo.callSayName("Bar");

Kodeblokken ovenfor er et eksempel på hvordan moduler ble opprettet før introduksjonen av native JavaScript-moduler.

Kodeblokken ovenfor inneholder en IIFE. IIFE inneholder en funksjon som den gjør tilgjengelig ved å returnere den. Alle variablene deklarert i IIFE er beskyttet fra det globale omfanget. Dermed metoden (siNavn) er kun tilgjengelig gjennom den offentlige funksjonen, ringSayName.

Legg merke til at IIFE er lagret i en variabel, foo. Dette er fordi, uten en variabel som peker til plasseringen i minnet, vil variablene være utilgjengelige etter at skriptet er kjørt. Dette mønsteret er mulig pga JavaScript-stenginger.

CommonJS-modulsystemet

CommonJS-modulsystemet er et modulformat definert av CommonJS-gruppen for å løse problemer med JavaScript-omfang ved å kjøre hver modul i navneområdet.

CommonJS-modulsystemet fungerer ved å tvinge moduler til å eksplisitt eksportere variabler de ønsker å eksponere til andre moduler.

Dette modulsystemet ble laget for JavaScript på serversiden (Node.js) og som sådan støttes ikke som standard i nettlesere.

For å implementere CommonJS-moduler i prosjektet ditt, må du først initialisere NPM i applikasjonen din ved å kjøre:

npm init -y

Variabler eksportert etter CommonJS-modulsystemet kan importeres slik:

//randomModule.js
//installert pakke
konst installertImport = krever("pakkenavn");
//lokal modul
konst lokalImport = krever("/path-to-module");

Moduler importeres i CommonJS ved hjelp av krever setningen, som leser en JavaScript-fil, kjører den leste filen og returnerer eksport gjenstand. De eksport objektet inneholder alle tilgjengelige eksporter i modulen.

Du kan eksportere en variabel etter CommonJS-modulsystemet ved å bruke enten navngitte eksporter eller standardeksporter.

Navngitt eksport

Navngitte eksporter er eksporter identifisert med navnene de ble tildelt. Navngitte eksporter tillater flere eksporter per modul, i motsetning til standardeksporter.

For eksempel:

//main.js
exports.myExport = funksjon () {
konsoll.log("Dette er et eksempel av en navngitt eksport");
};
exports.anotherExport = funksjon () {
konsoll.log("Dette er et annet eksempel av en navngitt eksport");
};

I kodeblokken ovenfor eksporterer du to navngitte funksjoner (myExport og annen eksport) ved å feste dem til eksport gjenstand.

På samme måte kan du eksportere funksjonene slik:

konst myExport = funksjon () {
konsoll.log("Dette er et eksempel av en navngitt eksport");
};
konst anotherExport = funksjon () {
konsoll.log("Dette er et annet eksempel av en navngitt eksport");
};
modul.eksport = {
 myExport,
 annen eksport,
};

I kodeblokken ovenfor angir du eksport objekt til de navngitte funksjonene. Du kan bare tilordne eksport objekt til et nytt objekt gjennom modul gjenstand.

Koden din ville gi en feil hvis du forsøkte å gjøre det på denne måten:

//feil vei
eksport = {
 myExport,
 annen eksport,
};

Det er to måter du kan importere navngitte eksporter på:

1. Importer alle eksportene som ett enkelt objekt og få tilgang til dem separat ved å bruke punktnotasjonen.

For eksempel:

//otherModule.js
konst foo = krever("./hoved");
foo.myExport();
foo.anotherExport();

2. Destrukturere eksporten fra eksport gjenstand.

For eksempel:

//otherModule.js
konst { myExport, anotherExport } = krever("./hoved");
myExport();
anotherExport();

En ting er vanlig i alle metodene for import, de må importeres med samme navn som de ble eksportert med.

Standard eksporter

En standard eksport er en eksport identifisert med et hvilket som helst navn du ønsker. Du kan bare ha én standard eksport per modul.

For eksempel:

//main.js
klasseFoo{
 bar() {
konsoll.log("Dette er et eksempel av en misligholdeeksport");
 }
}
modul.eksport = Foo;

I kodeblokken ovenfor eksporterer du en klasse (Foo) ved å tilordne på nytt eksport protestere mot det.

Import av standard eksporter ligner på import av navngitte eksporter, bortsett fra at du kan bruke et hvilket som helst navn for å importere dem.

For eksempel:

//otherModule.js
konst Bar = krever("./hoved");
konst objekt = ny Bar();
gjenstand.bar();

I kodeblokken ovenfor ble standardeksporten navngitt Bar, selv om du kan bruke hvilket som helst navn du ønsker.

ES6-modulsystemet

ECMAScript Harmony-modulsystem, populært kjent som ES6-moduler, er det offisielle JavaScript-modulsystemet.

ES6-moduler støttes av nettlesere og servere, selv om du trenger litt konfigurasjon før du bruker dem.

I nettlesere må du spesifisere type som modul i skriptimport-taggen.

Som så:

//index.html
<script src="./app.js" type="modul"></script>

I Node.js må du stille inn type til modul i din package.json fil.

Som så:

//package.json
"type":"modul"

Du kan også eksportere variabler ved å bruke ES6-modulsystemet ved å bruke enten navngitte eksporter eller standardeksporter.

Navngitt eksport

I likhet med navngitte importer i CommonJS-moduler, identifiseres de av navnene de ble tildelt og tillater flere eksporter per modul.

For eksempel:

//main.js
eksportkonst myExport = funksjon () {
konsoll.log("Dette er et eksempel av en navngitt eksport");
};
eksportkonst anotherExport = funksjon () {
konsoll.log("Dette er et annet eksempel av en navngitt eksport");
};

I ES6-modulsystemet eksporteres navngitte eksporter ved å sette variabelen foran eksport nøkkelord.

Navngitte eksporter kan importeres til en annen modul i ES6 på samme måter som CommonJS:

  • Destrukturering av nødvendig eksport fra eksport gjenstand.
  • Importere alle eksportene som et enkelt objekt og få tilgang til dem separat ved å bruke punktnotasjonen.

Her er et eksempel på destrukturering:

//otherModule.js
import { myExport, anotherExport } fra "./main.js";
myExport()
anotherExport()

Her er et eksempel på import av hele objektet:

import * som foo fra './main.js'
foo.myExport()
foo.anotherExport()

I kodeblokken ovenfor, stjernen (*) betyr "alle". De som nøkkelordet tildeler eksport protestere mot strengen som følger den, i dette tilfellet, foo.

Standard eksporter

I likhet med standardeksporter i CommonJS, identifiseres de med et hvilket som helst navn du ønsker, og du kan bare ha én standardeksport per modul.

For eksempel:

//main.js
klasseFoo{
 bar() {
konsoll.log("Dette er et eksempel av en misligholdeeksport");
 }
}
eksportmisligholde Foo;

Standardeksporter opprettes ved å legge til misligholde søkeord etter eksport nøkkelord, etterfulgt av navnet på eksporten.

Import av standard eksporter ligner på import av navngitte eksporter, bortsett fra at du kan bruke et hvilket som helst navn for å importere dem.

For eksempel:

//otherModule.js
import Bar fra "./main.js";

Blandet eksport

ES6-modulstandarden lar deg ha både standardeksporter og navngitte eksporter i én modul, i motsetning til CommonJS.

For eksempel:

//main.js
eksportkonst myExport = funksjon () {
konsoll.log("Dette er et annet eksempel av en navngitt eksport");
};
klasseFoo{
 bar() {
konsoll.log("Dette er et eksempel av en misligholdeeksport");
 }
}
eksportmisligholde Foo;

Viktigheten av moduler

Å dele koden inn i moduler gjør dem ikke bare lettere å lese, men det gjør den mer gjenbrukbar og også vedlikeholdbar. Moduler i JavaScript gjør også koden din mindre utsatt for feil, ettersom alle moduler kjøres i streng modus som standard.