Het concept van modules komt voort uit het modulaire programmeerparadigma. Dit paradigma stelt voor dat software moet worden samengesteld uit afzonderlijke, onderling uitwisselbare componenten, de zogenaamde "modules" door programmafuncties op te splitsen in zelfstandige bestanden die afzonderlijk of gekoppeld in een sollicitatie.

Een module is een op zichzelf staand bestand dat code bevat om bepaalde functionaliteit te implementeren en herbruikbaarheid en organisatie te bevorderen.

Hier behandelt u de modulesystemen die worden gebruikt in JavaScript-toepassingen, inclusief het modulepatroon, het CommonJS-modulesysteem dat wordt gebruikt in de meeste Node.js-toepassingen en het ES6 Module-systeem.

Het modulepatroon

Vóór de introductie van native JavaScript-modules werd het moduleontwerppatroon gebruikt als een modulesysteem om variabelen en functies in een enkel bestand te plaatsen.

Dit werd geïmplementeerd met behulp van onmiddellijk aangeroepen functie-expressies, in de volksmond bekend als IIFE's. Een IIFE is een niet-herbruikbare functie die wordt uitgevoerd zodra deze is gemaakt.

instagram viewer

Dit is de basisstructuur van een IIFE:

(functie () {
// hier coderen
})();
(() => {
// hier coderen
})();
(asynchroon () => {
// hier coderen
})();

Het bovenstaande codeblok beschrijft IIFE's die in drie verschillende contexten worden gebruikt.

IIFE's werden gebruikt omdat variabelen die binnen een functie zijn gedeclareerd, binnen het bereik van de functie vallen, waardoor ze alleen worden gemaakt toegankelijk binnen de functie, en omdat u met functies gegevens kunt retourneren (door ze openbaar te maken toegankelijk).

Bijvoorbeeld:

const foo = (functie () {
const sayName = (naam) => {
troosten.log('Hé, mijn naam is ${naam}`);
 };
//De variabelen blootleggen
opbrengst {
 callSayName: (naam) => zegNaam (naam),
 };
})();
//Toegang tot blootgestelde methoden
foo.callSayName("Bar");

Het bovenstaande codeblok is een voorbeeld van hoe modules werden gemaakt vóór de introductie van native JavaScript-modules.

Het bovenstaande codeblok bevat een IIFE. De IIFE bevat een functie die toegankelijk wordt gemaakt door deze terug te sturen. Alle variabelen die in de IIFE zijn gedeclareerd, zijn beschermd tegen de globale reikwijdte. Dus de methode (zegNaam) is alleen toegankelijk via de publieksfunctie, belSayName.

Merk op dat de IIFE wordt opgeslagen in een variabele, foe. Dit komt omdat, zonder dat een variabele naar zijn locatie in het geheugen wijst, de variabelen ontoegankelijk zullen zijn nadat het script is uitgevoerd. Dit patroon is mogelijk door JavaScript-sluitingen.

Het CommonJS-modulesysteem

Het CommonJS-modulesysteem is een module-indeling die is gedefinieerd door de CommonJS-groep om JavaScript-bereikproblemen op te lossen door elke module in zijn naamruimte uit te voeren.

Het CommonJS-modulesysteem werkt door modules te dwingen expliciet variabelen te exporteren die ze aan andere modules willen blootstellen.

Dit modulesysteem is gemaakt voor JavaScript aan serverzijde (Node.js) en wordt als zodanig niet standaard ondersteund in browsers.

Om CommonJS-modules in uw project te implementeren, moet u eerst NPM in uw toepassing initialiseren door het volgende uit te voeren:

npm begin -y

Variabelen die zijn geëxporteerd volgens het CommonJS-modulesysteem kunnen als volgt worden geïmporteerd:

//randomModule.js
//geïnstalleerd pakket
const geïnstalleerdImporteren = vereisen("verpakkingsnaam");
//lokale module
const lokaleImport = vereisen("/path-to-module");

Modules worden geïmporteerd in CommonJS met behulp van de vereisen statement, dat een JavaScript-bestand leest, het gelezen bestand uitvoert en de export voorwerp. De export object bevat alle beschikbare exports in de module.

U kunt een variabele exporteren volgens het CommonJS-modulesysteem met behulp van benoemde exports of standaardexports.

Genoemde export

Benoemde exports zijn exports die worden geïdentificeerd aan de hand van de namen die eraan zijn toegewezen. Benoemde exports staan ​​meerdere exports per module toe, in tegenstelling tot standaard exports.

Bijvoorbeeld:

//main.js
export.mijnExport = functie () {
troosten.log("Dit is een voorbeeld van een genoemd exporteren");
};
exports.anotherExport = functie () {
troosten.log("Dit is nog een voorbeeld van een genoemd exporteren");
};

In het bovenstaande codeblok exporteert u twee benoemde functies (mijnExport En een andereExport) door ze aan de export voorwerp.

Op dezelfde manier kunt u de functies als volgt exporteren:

const mijnExport = functie () {
troosten.log("Dit is een voorbeeld van een genoemd exporteren");
};
const een andereExport = functie () {
troosten.log("Dit is nog een voorbeeld van een genoemd exporteren");
};
moduul.export = {
 mijnExport,
 een anderExporteren,
};

In het bovenstaande codeblok stelt u de export bezwaar maken tegen de benoemde functies. U kunt alleen de export bezwaar maken tegen een nieuw object via de moduul voorwerp.

Uw code zou een fout genereren als u het op deze manier zou proberen:

//verkeerde weg
export = {
 mijnExport,
 een anderExporteren,
};

Er zijn twee manieren om benoemde exports te importeren:

1. Importeer alle exports als een enkel object en open ze afzonderlijk met behulp van de puntnotatie.

Bijvoorbeeld:

//otherModule.js
const foo = vereisen("./voornaamst");
foe.mijnExport();
foe.anotherExport();

2. De-structureer de export van de export voorwerp.

Bijvoorbeeld:

//otherModule.js
const { mijnExport, een andereExport } = vereisen("./voornaamst");
mijnExport();
een andereExport();

Eén ding is gebruikelijk bij alle importmethoden: ze moeten worden geïmporteerd met dezelfde namen waarmee ze zijn geëxporteerd.

Standaard exports

Een standaardexport is een export geïdentificeerd met een naam naar keuze. U kunt slechts één standaardexport per module hebben.

Bijvoorbeeld:

//main.js
klasFoo{
 bar() {
troosten.log("Dit is een voorbeeld van A standaardexporteren");
 }
}
moduul.export = Foo;

In het bovenstaande codeblok exporteert u een klasse (Foo) door de export maak er bezwaar tegen.

Het importeren van standaardexports is vergelijkbaar met het importeren van benoemde exports, behalve dat u elke gewenste naam kunt gebruiken om ze te importeren.

Bijvoorbeeld:

//otherModule.js
const Balk = vereisen("./voornaamst");
const voorwerp = nieuw Bar();
voorwerp.bar();

In het bovenstaande codeblok kreeg de standaardexport een naam Bar, hoewel u elke gewenste naam kunt gebruiken.

Het ES6-modulesysteem

ECMAScript Harmony-modulesysteem, in de volksmond bekend als ES6-modules, is het officiële JavaScript-modulesysteem.

ES6-modules worden ondersteund door browsers en servers, hoewel u een beetje configuratie nodig heeft voordat u ze kunt gebruiken.

In browsers moet u de type als moduul in de scriptimporttag.

Zoals zo:

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

In Node.js moet je instellen type naar moduul in uw pakket.json bestand.

Zoals zo:

//package.json
"type":"moduul"

U kunt ook variabelen exporteren met behulp van het ES6-modulesysteem met behulp van benoemde exports of standaardexports.

Genoemde export

Net als bij benoemde imports in CommonJS-modules, worden ze geïdentificeerd door de namen die eraan zijn toegewezen en staan ​​meerdere exports per module toe.

Bijvoorbeeld:

//main.js
exporterenconst mijnExport = functie () {
troosten.log("Dit is een voorbeeld van een genoemd exporteren");
};
exporterenconst een andereExport = functie () {
troosten.log("Dit is nog een voorbeeld van een genoemd exporteren");
};

In het ES6-modulesysteem worden benoemde exports geëxporteerd door de variabele vooraf te laten gaan met de exporteren trefwoord.

Benoemde exports kunnen op dezelfde manier als CommonJS in een andere module in ES6 worden geïmporteerd:

  • De-structurering van de vereiste export van de export voorwerp.
  • Alle exports importeren als een enkel object en ze afzonderlijk openen met behulp van de puntnotatie.

Hier is een voorbeeld van de-structurering:

//otherModule.js
importeren { mijnExport, een andereExport } van "./main.js";
mijnExport()
een andereExport()

Hier is een voorbeeld van het importeren van het hele object:

importeren * als foe van './main.js'
foe.mijnExport()
foe.anotherExport()

In het bovenstaande codeblok is het sterretje (*) betekent "alles". De als trefwoord wijst de export bezwaar maken tegen de string die erop volgt, in dit geval foe.

Standaard exports

Net als bij standaardexports in CommonJS, worden ze geïdentificeerd met een naam naar keuze en kunt u slechts één standaardexport per module hebben.

Bijvoorbeeld:

//main.js
klasFoo{
 bar() {
troosten.log("Dit is een voorbeeld van A standaardexporteren");
 }
}
exporterenstandaard Foo;

Standaardexports worden gemaakt door het standaard trefwoord na de exporteren trefwoord, gevolgd door de naam van de export.

Het importeren van standaardexports is vergelijkbaar met het importeren van benoemde exports, behalve dat u elke gewenste naam kunt gebruiken om ze te importeren.

Bijvoorbeeld:

//otherModule.js
importeren Bar van "./main.js";

Gemengde uitvoer

Met de ES6-modulestandaard kunt u zowel standaardexports als benoemde exports in één module hebben, in tegenstelling tot CommonJS.

Bijvoorbeeld:

//main.js
exporterenconst mijnExport = functie () {
troosten.log("Dit is nog een voorbeeld van een genoemd exporteren");
};
klasFoo{
 bar() {
troosten.log("Dit is een voorbeeld van A standaardexporteren");
 }
}
exporterenstandaard Foo;

Belang van modules

Door uw code in modules op te splitsen, worden ze niet alleen gemakkelijker leesbaar, maar ook beter herbruikbaar en ook beter te onderhouden. Modules in JavaScript maken uw code ook minder foutgevoelig, aangezien alle modules standaard in strikte modus worden uitgevoerd.