JavaScript-moduler


Innehållsförteckning

    Visa innehållsförteckning


Moduler

JavaScript-moduler låter dig dela upp din kod i separata filer.

Detta gör det lättare att underhålla en kodbas.

Moduler importeras från externa filer med import-satsen.

Moduler förlitar sig också på type="module" i <script>-taggen.

Exempel

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

Prova själv →

<!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>

Exportera

Moduler med funktioner eller variabler kan lagras i valfri extern fil.

Det finns två typer av export: Namngivna exporter och Standardexporter.


Namngivna exporter

Låt oss skapa en fil med namnet person.js, och fyll den med de saker vi vill exportera.

Du kan skapa namngivna exporter på två sätt. In-line individuellt, eller alla på en gång längst ner.

In-line individuellt:

person.js

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

Allt på en gång längst ner:

person.js

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

export {name, age};

Standardexporter

Låt oss skapa en annan fil, som heter message.js, och använd den för att demonstrera standardexport.

Du kan bara ha en standardexport i en fil.

Exempel

meddelande.js

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

export default message;


Importera

Du kan importera moduler till en fil på två sätt, baserat på om de är namngivna exporter eller standardexporter.

Namngivna exporter är konstruerade med hjälp av lockiga hängslen. Standardexporter är det inte.

Importera från namngivna exporter

Importera namngivna exporter från filen person.js:

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

Prova själv →

<!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>

Importera från standardexporter

Importera en standardexport från filen message.js:

import message from "./message.js";

Prova själv →

<!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>

Notera

Moduler fungerar endast med HTTP(s)-protokollet.

En webbsida som öppnas via file://-protokollet kan inte använda import/export.