JavaScript-moduulien avulla voit jakaa koodisi erillisiin tiedostoihin.
Tämä helpottaa koodikannan ylläpitämistä.
Moduulit tuodaan ulkoisista tiedostoista import
-käskyllä.
Moduulit käyttävät myös type="module"
-koodia <script>-tunnisteessa.
<script type="module">
import message from "./message.js";
</script>
Kokeile itse →
<!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>
Moduulit, joissa on funktioita tai muuttujia, voidaan tallentaa mihin tahansa ulkoiseen tiedostoon.
Vientejä on kahden tyyppisiä: Nimetyt viennit ja Oletusvientit.
Luodaan tiedosto nimeltä person.js
ja täytä se asioilla, jotka haluamme viedä.
Voit luoda nimettyjä vientitiedostoja kahdella tavalla. Linjassa yksittäin tai kaikki kerralla alareunassa.
person.js
export const name = "Jesse";
export const age = 40;
person.js
const name = "Jesse";
const age = 40;
export {name, age};
Luodaan toinen tiedosto, jonka nimi on message.js
ja käytä sitä oletusviennin osoittamiseen.
Tiedostossa voi olla vain yksi oletusvienti.
message.js
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;
Voit tuoda moduuleja tiedostoon kahdella tavalla sen mukaan, onko ne nimetty vienti tai oletusvienti.
Nimetyt viennit muodostetaan kiharaisilla aaltosulkeilla. Oletusvientit eivät ole.
Tuo nimetyt viennit tiedostosta person.js:
import { name, age } from "./person.js";
Kokeile itse →
<!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>
Tuo oletusvienti tiedostosta message.js:
import message from "./message.js";
Kokeile itse →
<!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>
Moduulit toimivat vain HTTP(s)-protokollan kanssa.
File://-protokollalla avattu web-sivu ei voi käyttää tuontia/vientiä.