Пошук уроків, статей та іншого контенту
Навіщо код розбивають на файли-модулі, і як обмінюватись значеннями між ними через import/export.
До появи модулів увесь JavaScript на сторінці ділив одну спільну глобальну область видимості (модуль «Функції»): якщо два підключені файли випадково оголошували змінну з однаковим іменем, один переписував іншу. Єдиним способом «розділити» код на файли було обережно стежити за порядком підключення <script>-тегів і унікальністю кожного імені. Модулі розв'язують цю проблему: кожен файл-модуль має власну ізольовану область видимості, і явно оголошує, що саме з неї видно ззовні.
Іменований експорт (named export) — спосіб позначити конкретні значення, доступні іншим файлам:
// math.js
export function add(a, b) {
return a + b;
}
export const PI = 3.14159;// app.js
import { add, PI } from "./math.js";
add(2, 3); // 5
PI; // 3.14159Усе, що не позначене export, лишається приватним для модуля — так само, як приватні поля класів (модуль «JavaScript під капотом»), лише на рівні файлу, а не об'єкта.
Коли модуль експортує щось одне головне (наприклад, компонент чи клас), зручніше зробити його експортом за замовчуванням — тоді при імпорті не потрібні фігурні дужки, і ім'я можна обрати довільно:
// user.js
export default class User {
constructor(name) {
this.name = name;
}
}// app.js
import User from "./user.js"; // без {} — і ім'я довільне, необов'язково "User"
const user = new User("Олена");У файлі може бути лише один default export, але скільки завгодно іменованих. Найпоширеніша плутанина новачків — забуті фігурні дужки для іменованого імпорту чи зайві дужки для default.
Коли ім'я конфліктує з чимось наявним у файлі, можна перейменувати прямо в import/export через as:
import { add as sum } from "./math.js";
sum(2, 3); // 5 — та сама функція, локальне ім'я іншеimport * as math from "./math.js";
math.add(2, 3); // 5
math.PI; // 3.14159Реальні проєкти діляться на модулі за відповідальністю — кожен файл робить одну чітко окреслену річ:
// validators.js
export function isValidEmail(value) { /* ... */ }
export function isValidPassword(value) { /* ... */ }
// api.js
export async function fetchUser(id) { /* ... */ }
// app.js
import { isValidEmail } from "./validators.js";
import { fetchUser } from "./api.js";Забуті фігурні дужки для іменованого імпорту або зайві дужки для default export.
Спроба зробити два default export в одному файлі — дозволений лише один.
Забутий шлях з розширенням чи відносним префіксом (./) там, де середовище цього вимагає.
Модулі дають кожному файлу власну ізольовану область видимості — export явно позначає, що видно ззовні, import підключає це в іншому файлі. Іменовані експорти — для кількох пов'язаних значень, default — для одного головного. Це основний спосіб організації коду в будь-якому нетривіальному сучасному JavaScript-проєкті.
Спробуйте самостійно
Уявіть файл format.js із двома іменованими експортами: formatCurrency(amount) і formatDate(date). Напишіть рядок імпорту, який підключає обидві функції в іншому файлі одним виразом.