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.
<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>
Moduler med funktioner eller variabler kan lagras i valfri extern fil.
Det finns två typer av export: Namngivna exporter och Standardexporter.
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.
person.js
export const name = "Jesse";
export const age = 40;
person.js
const name = "Jesse";
const age = 40;
export {name, age};
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.
meddelande.js
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;
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 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 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>
Moduler fungerar endast med HTTP(s)-protokollet.
En webbsida som öppnas via file://-protokollet kan inte använda import/export.