JavaScript-moduulit


Sisällysluettelo

    Näytä sisällysluettelo


Moduulit

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.

Esimerkki

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

Viedä

Moduulit, joissa on funktioita tai muuttujia, voidaan tallentaa mihin tahansa ulkoiseen tiedostoon.

Vientejä on kahden tyyppisiä: Nimetyt viennit ja Oletusvientit.


nimeltä Vienti

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.

Line yksittäin:

person.js

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

Kaikki kerralla alareunassa:

person.js

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

export {name, age};

Oletusvienti

Luodaan toinen tiedosto, jonka nimi on message.js ja käytä sitä oletusviennin osoittamiseen.

Tiedostossa voi olla vain yksi oletusvienti.

Esimerkki

message.js

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

export default message;


Tuonti

Voit tuoda moduuleja tiedostoon kahdella tavalla sen mukaan, onko ne nimetty vienti tai oletusvienti.

Nimetyt viennit muodostetaan kiharaisilla aaltosulkeilla. Oletusvientit eivät ole.

Tuo nimetyistä viennistä

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 oletusviennistä

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>

Huomautus

Moduulit toimivat vain HTTP(s)-protokollan kanssa.

File://-protokollalla avattu web-sivu ei voi käyttää tuontia/vientiä.