Moduły — JavaScript

Moduły umożliwiają rozdzielenie aplikacji na pliki.

Jak to działa?

export udostępnia funkcję lub wartość z modułu. import wczytuje ją w innym pliku. W przeglądarce skrypt musi być załadowany z type="module".

Przykład 1 — poznaj zapis

Plik math.js

export const add = (a, b) => a + b;

Plik app.js

import { add } from "./math.js";
console.log(add(2, 3));

W HTML użyj <script type="module" src="app.js"></script>.

Przeczytaj kod linijka po linijce

export const add = (a, b) => a + b;Tworzymy lub aktualizujemy zmienną, pole albo przypisanie.

Oczekiwany wynik / efektpo uruchomieniu przykładu

5 (po uruchomieniu app.js jako modułu)

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

// math.js: export const pi = 3.14;
// app.js: import { pi } from "./math.js";
// console.log(pi);

Wynik drugiego przykładupo uruchomieniu przykładu

3.14 (po utworzeniu plików i uruchomieniu modułu)

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Utwórz własny moduł z funkcją multiply(a, b).