Articles
Introduktion til JavaScript
Moduler i JavaScript

Moduler i JavaScript

Denne artikel forklarer moduler i JavaScript.

YouTube Video

Moduler i JavaScript

Moduler i JavaScript er en måde at organisere kode og opdele den i genanvendelige komponenter. Ved at bruge moduler forbedres kodens læsbarhed og vedligeholdelsesmuligheder, og den samme funktionalitet kan genbruges i andre projekter. Her forklarer vi forskellige modulsystemer, fra konceptet med moduler til specifikke brugseksempler.

Konceptet bag JavaScript-moduler

JavaScript havde oprindeligt ikke et modulsystem. Men efterhånden som applikationer blev større, blev modularisering vigtig for at opdele koden i mindre enheder til genbrug. Et modul er et stykke kode med en bestemt funktion, der kan håndteres uafhængigt af anden kode, så det kan opdeles i flere filer.

Hovedtyper af moduler

Der er flere modulsystemer i JavaScript. De mest almindelige er ES-moduler (ESM) og CommonJS.

  • ES-moduler er et modulesystem introduceret i ECMAScript 2015 (ES6), som definerer moduler ved hjælp af nøgleordene import og export. Dette system bruges bredt både på klientsiden (browsere) og serversiden (Node.js).

  • CommonJS er et modulsystem, der primært bruges i Node.js. Moduler defineres ved at bruge require og module.exports til at importere og eksportere filer.

Detaljer om ES-moduler (ESM)

ES-moduler er det standard modulsystem i JavaScript, der muliggør nem udveksling af funktionaliteter mellem moduler. I browsere og Node.js bruges dette system til at definere og importere moduler.

export og import

export er et nøgleord til at eksponere funktionaliteter fra et modul til omverdenen. import bruges til at inkludere funktionaliteter, der er defineret i andre moduler.

Eksempel: Modul Eksport

Moduler kan eksporteres i ES Modules på følgende måde.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

I dette math.mjs modul eksporteres funktionerne add og subtract. Disse funktioner kan importeres fra andre moduler.

Her er .mjs en filendelse, der eksplicit angiver en JavaScript-fil i ES Modules-format. I Node.js bestemmer filendelsen, om det er CommonJS eller ES Modules. Dog, hvis type: "module" er angivet i package.json, behandles filer med .js endelsen som ES Modules som standard.

Eksempel: Modulimport

Moduler kan importeres i ES Modules på følgende måde.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

På denne måde kan du nemt bruge funktioner defineret i andre filer ved at bruge import.

Standardeksport og Navngivet Eksport

Der findes to metoder til at eksportere moduler. Den ene er navngivet eksport, og den anden er standardeksport.

  • Navngivet eksport bruges, når man eksporterer flere funktioner eller variabler fra et modul. Man kan udføre flere eksporteringer, og ved import modtager man dem med specifikke navne.
1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}
1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15
  • Standardeksport bruges, når man eksporterer en enkelt funktion eller klasse fra et modul. Ved import kan den modtages med et hvilket som helst navn.
1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}
1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

Kun én standardeksport er mulig, men navngivet eksport kan eksportere flere elementer samtidigt.

Eksempel på brug på klientsiden (browser).

Eksempel: Modul Eksport

Moduler kan eksporteres i ES Modules på følgende måde.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

I dette utils.js modul eksporteres funktionerne sum og multiply.

Eksempel: Modulimport

Moduler kan importeres på klientsiden på følgende måde.

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>
  • Ved at sætte type attributten på <script>-tagget til module, kan ES modulsyntaks som import og export bruges inden for HTML.
  • import-sætningen indlæser det eksterne utils.js og viser resultatet.

Detaljer om CommonJS

CommonJS er et modulsystem, der primært bruges i Node.js. Moduler eksporteres og importeres ved hjælp af module.exports og require.

require og module.exports

I CommonJS bruges module.exports til at eksportere moduler. Derudover bruges require til at benytte moduler fra andre filer.

Eksempel: Modul Eksport

Moduler kan eksporteres i CommonJS på følgende måde.

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};
Eksempel: Modulimport

Moduler kan importeres i CommonJS på følgende måde.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

I Node.js bruges CommonJS som det standard modulsystem, men ES-moduler understøttes også.

Dynamisk Import

I JavaScript kan moduler importeres dynamisk ved hjælp af import(). Denne metode bruger asynkron behandling til at indlæse moduler efter behov.

Dynamiske importer kan udføres på følgende måde.

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

Dynamisk import er en måde at forbedre applikationens ydeevne. Da man kan indlæse moduler efter behov i stedet for at indlæse alt ved den første indlæsning, forbedrer det sidens visningshastighed.

Fordele ved Moduler

  • Genbrug af kode

    • Modulariseret kode kan genbruges i andre projekter. Ved at skabe moduler med fælles funktionalitet og bruge dem på tværs af flere applikationer øges udviklingseffektiviteten betydeligt.

  • Forbedret vedligeholdelse

    • Ved at opdele koden i moduler er det nemmere at ændre specifikke funktioner eller dele. Håndtering af kode i små enheder gør det lettere at finde og rette fejl.

  • Undgåelse af navnerumskollisioner

    • Hvis man definerer mange variabler og funktioner i det globale scope, kan det føre til navnekollisioner, men modularisering forhindrer dette og hjælper med at bevare en renere kodebase.

  • Afhængighedsstyring

    • Ved at bruge moduler kan du eksplicit styre en applikations afhængigheder. Det bliver tydeligt, hvilke moduler der afhænger af andre moduler, hvilket gør kodestrukturen lettere at forstå.

Sammendrag

JavaScripts modulsystem er et kraftfuldt værktøj til at organisere kode og opdele den i genanvendelige komponenter. Ved at forstå forskellene mellem ES Modules og CommonJS og vælge det passende modulsystem baseret på projektet, kan du forbedre kodens læsbarhed og vedligeholdelse. Desuden kan du ved at anvende dynamiske imports optimere applikationens ydeevne.

Lad os udnytte modulsystemet til at bygge mere skalerbare og effektive JavaScript-applikationer.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Yderligere funktioner i klasser i JavaScriptFejlhåndtering i JavaScript