En introduktion til modulsystemer i JavaScript

Begrebet moduler kommer fra det modulære programmeringsparadigme. Dette paradigme foreslår, at software skal være sammensat af separate, udskiftelige komponenter kaldet 'moduler' ved at nedbryde programfunktioner i stand-alone filer, der kan arbejde separat eller koblet i en applikation.

MAKEUSE AF DAGENS VIDEO

Et modul er en selvstændig fil, der indkapsler kode for at implementere visse funktioner og fremme genanvendelighed og organisering.

Her vil du dække de modulsystemer, der bruges i JavaScript-applikationer, herunder modulmønsteret, CommonJS-modulsystemet, der bruges i de fleste Node.js-applikationer, og ES6-modulsystemet.

Modulmønsteret

Før introduktionen af native JavaScript-moduler blev moduldesignmønsteret brugt som et modulsystem til at scope variabler og funktioner til en enkelt fil.

Dette blev implementeret ved hjælp af umiddelbart påkaldte funktionsudtryk, populært kendt som IIFE'er. En IIFE er en funktion, der ikke kan genbruges, og som kører, så snart den er oprettet.

Her er den grundlæggende struktur for en IIFE:

(function () { 
  //code here 
})(); 
   
(() => { 
  //code here 
})(); 
   
(async () => { 
  //code here 
})();

Kodeblokken ovenfor beskriver IIFE'er brugt i tre forskellige sammenhænge.

IIFE'er blev brugt, fordi variabler erklæret inde i en funktion er scoped til funktionen, hvilket gør dem kun tilgængelige inde i funktionen, og fordi funktioner giver dig mulighed for at returnere data (gør dem offentligt tilgængelige).

For eksempel:

const foo = (function () { 
  const sayName = (name) => { 
    console.log(`Hey, my name is ${name}`); 
  }; 
  //Exposing the variables 
  return { 
    callSayName: (name) => sayName(name), 
  }; 
})(); 
//Accessing exposed methods 
foo.callSayName("Bar");

Kodeblokken ovenfor er et eksempel på, hvordan moduler blev oprettet før introduktionen af native JavaScript-moduler.

Kodeblokken ovenfor indeholder en IIFE. IIFE indeholder en funktion, som den gør tilgængelig ved at returnere den. Alle de variabler, der er deklareret i IIFE, er beskyttet fra det globale omfang. Således er metoden ( sig Navn ) er kun tilgængelig via den offentlige funktion, kaldSayName .

Bemærk, at IIFE er gemt i en variabel, foo . Dette er fordi, uden at en variabel peger på dens placering i hukommelsen, vil variablerne være utilgængelige efter scriptet er kørt. Dette mønster er muligt pga JavaScript-lukninger .

CommonJS-modulsystemet

CommonJS-modulsystemet er et modulformat defineret af CommonJS-gruppen for at løse JavaScript-omfangsproblemer ved at udføre hvert modul i dets navneområde.

CommonJS-modulsystemet virker ved at tvinge moduler til eksplicit at eksportere variabler, de ønsker at eksponere til andre moduler.

Dette modulsystem er skabt til server-side JavaScript (Node.js) og er som sådan ikke understøttet som standard i browsere.

For at implementere CommonJS-moduler i dit projekt, skal du først initialisere NPM i din applikation ved at køre:

npm init -y

Variabler, der eksporteres efter CommonJS-modulsystemet, kan importeres på følgende måde:

//randomModule.js 
//installed package 
const installedImport = require("package-name"); 
//local module 
const localImport = require("/path-to-module");

Moduler importeres i CommonJS ved hjælp af kræve sætning, som læser en JavaScript-fil, udfører den læste fil og returnerer eksport objekt. Det eksport objektet indeholder alle tilgængelige eksporter i modulet.

Du kan eksportere en variabel efter CommonJS-modulsystemet ved at bruge enten navngivne eksporter eller standardeksporter.

Navngivne eksporter

Navngivne eksporter er eksporter identificeret ved de navne, de blev tildelt. Navngivne eksporter tillader flere eksporter pr. modul, i modsætning til standardeksporter.

For eksempel:

//main.js 
exports.myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
exports.anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

I kodeblokken ovenfor eksporterer du to navngivne funktioner ( myExport og en anden eksport ) ved at fastgøre dem til eksport objekt.

På samme måde kan du eksportere funktionerne således:

const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 
module.exports = { 
  myExport, 
  anotherExport, 
};

I kodeblokken ovenfor indstiller du eksport gøre indsigelse mod de navngivne funktioner. Du kan kun tildele eksport genstand til et nyt objekt gennem modul objekt.

Din kode ville give en fejl, hvis du forsøgte at gøre det på denne måde:

//wrong way 
exports = { 
  myExport, 
  anotherExport, 
};

Der er to måder, du kan importere navngivne eksporter på:

1. Importer alle eksporter som et enkelt objekt, og få adgang til dem separat vha priknotationen .

For eksempel:

//otherModule.js 
const foo = require("./main"); 
foo.myExport(); 
foo.anotherExport();

2. Destrukturere eksporten fra eksport objekt.

For eksempel:

//otherModule.js 
const { myExport, anotherExport } = require("./main"); 
myExport(); 
anotherExport();

Én ting er fælles i alle metoderne til import, de skal importeres med de samme navne som de blev eksporteret med.

Standard eksporter

En standardeksport er en eksport identificeret med et hvilket som helst navn efter eget valg. Du kan kun have én standardeksport pr. modul.

For eksempel:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
module.exports = Foo;

I kodeblokken ovenfor eksporterer du en klasse ( Foo ) ved at omtildele eksport gøre indsigelse mod det.

Import af standardeksporter svarer til import af navngivne eksporter, bortset fra at du kan bruge et hvilket som helst navn efter eget valg til at importere dem.

For eksempel:

//otherModule.js 
const Bar = require("./main"); 
const object = new Bar(); 
object.bar();

I kodeblokken ovenfor blev standardeksporten navngivet Bar , selvom du kan bruge et hvilket som helst navn efter eget valg.

ES6-modulsystemet

ECMAScript Harmony-modulsystem, populært kendt som ES6-moduler, er det officielle JavaScript-modulsystem.

ES6-moduler understøttes af browsere og servere, selvom du kræver en smule konfiguration, før du bruger dem.

I browsere skal du angive type som modul i script-import-tagget.

Ligesom:

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

I Node.js skal du indstille type til modul i din package.json fil.

Ligesom:

//package.json 
"type":"module"

Du kan også eksportere variabler ved hjælp af ES6-modulsystemet ved at bruge enten navngivne eksporter eller standardeksporter.

Navngivne eksporter

I lighed med navngivne importer i CommonJS-moduler identificeres de ved de navne, de blev tildelt, og tillader flere eksporter pr. modul.

For eksempel:

//main.js 
export const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
export const anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

I ES6-modulsystemet eksporteres navngivne eksporter ved at sætte variablen foran eksport søgeord.

Navngivne eksporter kan importeres til et andet modul i ES6 på samme måde som CommonJS:

Destrukturering af den nødvendige eksport fra eksport objekt.
Import af alle eksporter som et enkelt objekt og adgang til dem separat ved hjælp af punktnotationen.

Her er et eksempel på destrukturering:

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

Her er et eksempel på import af hele objektet:

import * as foo from './main.js' 
foo.myExport() 
foo.anotherExport()

I kodeblokken ovenfor er stjernen ( * ) betyder 'alle'. Det som nøgleordet tildeler eksport gøre indsigelse mod den streng, der følger efter den, i dette tilfælde, foo .

huskeliste, der synkroniseres med google kalender

Standard eksporter

I lighed med standardeksporter i CommonJS identificeres de med et hvilket som helst navn efter eget valg, og du kan kun have én standardeksport pr. modul.

For eksempel:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

Standardeksporter oprettes ved at tilføje Standard søgeord efter eksport søgeord efterfulgt af navnet på eksporten.

Import af standardeksporter svarer til import af navngivne eksporter, bortset fra at du kan bruge et hvilket som helst navn efter eget valg til at importere dem.

For eksempel:

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

Blandet eksport

ES6-modulstandarden giver dig mulighed for at have både standardeksporter og navngivne eksporter i ét modul, i modsætning til CommonJS.

For eksempel:

//main.js 
export const myExport = function () { 
  console.log("This is another example of a named export"); 
}; 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

Betydningen af moduler

Opdeling af din kode i moduler gør dem ikke kun nemmere at læse, men det gør den mere genbrugelig og også vedligeholdelsesvenlig. Moduler i JavaScript gør også din kode mindre fejltilbøjelig, da alle moduler som standard udføres i strict mode.

Modulmønsteret

CommonJS-modulsystemet

Navngivne eksporter

Standard eksporter

ES6-modulsystemet

Navngivne eksporter

Standard eksporter

Blandet eksport

Betydningen af ​​moduler

Betydningen af moduler