Articles
Introduksjon til JavaScript
Moduler i JavaScript

Moduler i JavaScript

Denne artikkelen forklarer moduler i JavaScript.

YouTube Video

Moduler i JavaScript

Moduler i JavaScript er en måte å organisere kode på og dele den opp i gjenbrukbare komponenter. Ved å bruke moduler forbedres kodens lesbarhet og vedlikeholdsevne, og samme funksjonalitet kan gjenbrukes i andre prosjekter. Her forklarer vi ulike modulsystemer, fra modulens konsept til spesifikke bruksområder.

Konseptet med JavaScript-moduler

JavaScript hadde opprinnelig ikke et modulært system. Etter hvert som applikasjoner ble større, ble modularisering viktig for å dele opp koden i mindre enheter for gjenbruk. En modul er en kodeblokk med en spesifikk funksjon som kan håndteres uavhengig av annen kode, og dermed delt opp i flere filer.

Hovedtyper av moduler

Det finnes flere modulsystemer i JavaScript. De vanligste er ES-moduler (ESM) og CommonJS.

  • ES-moduler er et modulsystem introdusert i ECMAScript 2015 (ES6), som definerer moduler ved hjelp av nøkkelordene import og export. Dette systemet brukes mye både på klientsiden (nettlesere) og på serversiden (Node.js).

  • CommonJS er et modulsystem som primært brukes i Node.js. Moduler defineres ved bruk av require og module.exports for å importere og eksportere filer.

Detaljer om ES-moduler (ESM)

ES-moduler er standardsystemet for moduler i JavaScript, som muliggjør enkel utveksling av funksjonalitet mellom moduler. I nettlesere og Node.js brukes dette systemet til å definere og importere moduler.

export og import

export er et nøkkelord som brukes for å eksponere funksjonalitet fra en modul til utsiden. import brukes til å inkludere funksjonalitet definert i andre moduler.

Eksempel: Modul-eksport

Moduler kan eksporteres i ES-moduler på følgende måte.

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

I denne math.mjs-modulen blir funksjonene add og subtract eksportert. Disse funksjonene kan importeres fra andre moduler.

Her er .mjs et filnavnsuffiks som eksplisitt angir en JavaScript-fil i ES-modulformat. I Node.js avgjør filendelsen om det er CommonJS eller ES-moduler. Men hvis type: "module" er angitt i package.json, blir filer med endelsen .js behandlet som ES-moduler som standard.

Eksempel: Modulimport

Moduler kan importeres i ES-moduler på følgende måte.

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åten kan du enkelt bruke funksjoner definert i andre filer ved å bruke import.

Standardeksport og Navngitt eksport

Det finnes to eksportmetoder for moduler. Den ene er navngitt eksport, og den andre er standardeksport.

  • Navngitte eksporter brukes når du eksporterer flere funksjoner eller variabler fra en modul. Du kan utføre flere eksporter, og ved import mottar du dem med spesifiserte navn.
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 brukes når du eksporterer én enkelt funksjon eller klasse fra en modul. Ved import kan den mottas med 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 navngitte eksporter kan eksportere flere elementer samtidig.

Eksempel på bruk på klientsiden (nettleser).

Eksempel: Modul-eksport

Moduler kan eksporteres i ES-moduler på følgende måte.

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

I denne utils.js-modulen blir funksjonene sum og multiply eksportert.

Eksempel: Modulimport

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

 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 å sette type-attributtet til <script>-taggen til module, kan ES-modulsyntaks som import og export brukes i HTML.
  • import-setningen laster den eksterne utils.js og viser resultatet.

Detaljer om CommonJS

CommonJS er et modulsystem som hovedsakelig brukes i Node.js. Moduler eksporteres og importeres ved hjelp av module.exports og require.

require og module.exports

I CommonJS brukes module.exports til å eksportere moduler. Videre brukes require til å bruke moduler fra andre filer.

Eksempel: Modul-eksport

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

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åte.

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 brukes CommonJS som standardsystem for moduler, men ES-moduler støttes også.

Dynamisk Import

I JavaScript kan moduler importeres dynamisk ved hjelp av import(). Denne metoden bruker asynkron behandling for å laste inn moduler etter behov.

Dynamiske importer kan gjøres på følgende måte.

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åte å forbedre applikasjonsytelsen på. Fordi du kan laste inn moduler ved behov i stedet for å laste inn alt ved første innlasting, forbedres sidevisningshastigheten.

Fordeler med moduler

  • Gjenbruk av kode

    • Modularisert kode kan gjenbrukes i andre prosjekter. Ved å lage moduler med felles funksjonalitet og bruke dem på tvers av flere applikasjoner, forbedres utviklingseffektiviteten betydelig.

  • Bedre vedlikeholdbarhet

    • Ved å dele opp koden i moduler er det lettere å endre spesifikke funksjoner eller deler. Å administrere kode i mindre enheter gjør det lettere å finne og fikse feil.

  • Unngå navnekollisjoner

    • Å definere mange variabler og funksjoner i det globale omfanget kan føre til navnekollisjoner, men modularisering forhindrer dette og bidrar til en renere kodebase.

  • Avhengighetsstyring

    • Ved å bruke moduler kan du eksplisitt håndtere avhengighetene til en applikasjon. Det blir tydelig hvilke moduler som er avhengige av andre moduler, noe som gjør kodens struktur enklere å forstå.

Sammendrag

JavaScripts modulsystem er et kraftig verktøy for å organisere kode og dele den opp i gjenbrukbare komponenter. Ved å forstå forskjellene mellom ES-moduler og CommonJS og velge det passende modulsystemet basert på prosjektet, kan du forbedre kodelesbarhet og vedlikeholdbarhet. Videre kan du optimalisere applikasjonens ytelse ved å bruke dynamiske importeringer.

La oss utnytte modulsystemet for å bygge mer skalerbare og effektive JavaScript-applikasjoner.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Ytterligere funksjoner i klasser i JavaScriptFeilhåndtering i JavaScript