JavaScript-moduulit

Moduulit (Modules)

JavaScript-moduulit mahdollistavat koodin jakamisen erillisiin tiedostoihin.

Tämä tekee koodipohjan ylläpidosta helpompaa.

Moduuli on käytetty import lauseesta, joka tuodaan ulkoisesta tiedostosta.

Moduuli riippuu <script> -tagin type="module".

Esimerkki

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

Kokeile itse

Vienti

VedonlyöntiFunktiottaiMuuttujatModuuli voidaan tallentaa mihin tahansa ulkoiseen tiedostoon.

Vienti on kahdenlaista:Nimetyt viennitjaOletusviennit.

Nimetyt viennit (Named Exports)

Luo tiedosto nimeltä person.js ja täytä se haluamallasi viennillä.

Voit luoda nimetyt viennit kahdella tavalla. Yksi on luoda ne yksitellen sisäänrakennettuna, toinen on luoda ne yhdellä kertaa tiedoston alaosassa.

Luo yksitellen sisäänrakennettuna:

person.js

export const name = "Bill";
export const age = 19;

Luo yhdellä kertaa tiedoston alaosassa:

person.js

const name = "Bill";
const age = 19;
export {name, age};

Oletusviennit (Default Exports)

Luo toinen tiedosto nimeltä message.js ja näytä sen avulla oletusvienni.

Yhdessä tiedostossa voi olla vain yksi oletusvienni.

Esimerkki

message.js

const message = () => {
const name = "Bill";
const age = 19;
return name + ' on ' + age + 'vuotta vanha.';
};
export default message;

Tuonti

Voit tuoda moduulin tiedostoon kahdella tavalla, riippuen ovatko ne nimettyjä vai oletusvienniä.

Nimetyt viennit rakennetaan sulkeiden avulla. Oletusvienni ei ole.

Tuo nimetty vienni

Tuo person.js-tiedostosta nimetty vienni:

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

Kokeile itse

Tuo oletusvienni

Tuo message.js-tiedostosta oletusvienni:

import message from "./message.js";

Kokeile itse

Huomaa

Moduulit ovat käytettävissä vain HTTP(s)-protokollassa.

file://-protokollalla avautuvat sivut eivät tue tuontia ja vienniä.