JavaScript moduler

Indholdsfortegnelse

Moduler

JavaScript-moduler giver dig mulighed for at dele din kode op i separate filer.

Dette gør det nemmere at vedligeholde en kodebase.

Moduler importeres fra eksterne filer med import-sætningen.

Moduler er også afhængige af type="module" i <script>-tagget.

Eksempel

<script type="module">
import message from "./message.js";
</script>

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

Eksport

Moduler med funktioner eller variabler kan gemmes i enhver ekstern fil.

Der er to typer eksporter: Navngivne eksporter og Standardeksporter.

Navngivne eksporter

Lad os oprette en fil med navnet person.js, og fylde den med de ting, vi vil eksportere.

Du kan oprette navngivne eksporter på to måder. In-line enkeltvis eller alle på én gang nederst.

In-line individuelt:

person.js

export const name = "Jesse";
export const age = 40;

Alt på én gang nederst:

person.js

const name = "Jesse";
const age = 40;

export {name, age};

Standard eksporter

Lad os oprette en anden fil med navnet message.js, og brug det til at demonstrere standardeksport.

Du kan kun have én standardeksport i en fil.

Eksempel

message.js

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

Importere

Du kan importere moduler til en fil på to måder, baseret på om de er navngivet eksporter eller standardeksporter.

Navngivne eksportvarer er konstrueret ved hjælp af krøllede seler. Standard eksport er ikke.

Import fra navngivne eksporter

Importer navngivne eksporter fra filen person.js:

import { name, age } from "./person.js";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import { name, age } from "./person.js";

let text = "My name is " + name + ", I am " + age + ".";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Importer fra standardeksporter

Importer en standardeksport fra filen message.js:

import message from "./message.js";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

Bemærk

Moduler fungerer kun med HTTP(s)-protokollen.

En webside åbnet via file://-protokollen kan ikke bruge import/eksport.