Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update(JS): web/javascript/guide/modules #3422

Merged
merged 3 commits into from
Oct 26, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 4 additions & 13 deletions files/uk/web/javascript/guide/modules/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@
title: Модулі JavaScript
slug: Web/JavaScript/Guide/Modules
page-type: guide
browser-compat:
- javascript.statements.import
- javascript.statements.export
---

{{jsSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Meta_programming")}}
Expand All @@ -15,15 +12,9 @@ browser-compat:

Програми на JavaScript спершу були доволі дрібними: більшість застосування JavaScript полягала в ізольованих сценарних операціях, доданні дрібки інтерактивності до вебсторінок, де це необхідно, тож великі сценарії загалом не були потрібні. Перемотка на кілька років – і ось цілі застосунки працюють в браузерах, з купою JavaScript, а крім того, JavaScript використовується в інших контекстах ([Node.js](/uk/docs/Glossary/Node.js), наприклад).

Таким чином, протягом останніх років з'явився зміст подумати про надання механізмів розбиття програм на JavaScript на окремі модулі, котрі можуть бути імпортовані при потребі. Node.js вже тривалий час має таку можливість, крім того, є низка бібліотек і фреймворків JavaScript, що дають змогу користуватись модулями (наприклад, модульні системи на основі [CommonJS](https://uk.wikipedia.org/wiki/CommonJS) і [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md), як то [RequireJS](https://requirejs.org/), а геть нещодавно – [Webpack](https://webpack.js.org/) і [Babel](https://babeljs.io/)).
Складні проєкти потребують механізму розбиття програм на JavaScript на окремі модулі, котрі можуть бути імпортовані при потребі. Node.js вже тривалий час має таку можливість, крім того, є низка бібліотек і фреймворків JavaScript, що дають змогу користуватись модулями (наприклад, модульні системи на основі [CommonJS](https://uk.wikipedia.org/wiki/CommonJS) і [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md), як то [RequireJS](https://requirejs.org/), а геть нещодавно – [Webpack](https://webpack.js.org/) і [Babel](https://babeljs.io/)).
undead404 marked this conversation as resolved.
Show resolved Hide resolved

Добрі новини полягають в тому, що сучасні браузери почали підтримувати функціональність модулів нативно, і це те, про що розповідає вся ця стаття. Це може бути лише доброю штукою: браузери можуть оптимізувати завантаження модулів, роблячи його більш ефективним, ніж потреба використати бібліотеку й виконувати всю надлишкову обробку на клієнтському боці й зайві ходки в мережу.

Використання нативних модулів JavaScript залежить від інструкцій {{jsxref("Statements/import", "import")}} і {{jsxref("Statements/export", "export")}}; їх підтримка в браузері показана в таблиці сумісності нижче.

## Сумісність із браузерами

{{Compat}}
Усі сучасні браузери нативно підтримують модульні можливості, без потреби трансляції коду. Це однозначно добре: браузери можуть оптимізувати завантаження модулів, роблячи його більш ефективним, ніж потреба використати бібліотеку й виконувати всю надлишкову обробку на клієнтському боці й зайві ходки в мережу. Проте це не робить пучкарі штибу Webpack зайвими: пучкарі все одно гарно справляються з поділом коди на порції розумного розміру, а також здібні до інших оптимізацій, як то мініфікації, вилучення мертвого коду та перетрушування дерева.
undead404 marked this conversation as resolved.
Show resolved Hide resolved

## Введення прикладу

Expand Down Expand Up @@ -410,10 +401,10 @@ document.adoptedStyleSheets = [styles];
> Модулі та їхні залежності можуть бути завантажені наперед шляхом задання їх в елементах [`<link>`](/uk/docs/Web/HTML/Element/link) з атрибутом [`rel="modulepreloaded"`](/uk/docs/Web/HTML/Attributes/rel/modulepreload).
> Це може суттєво знизити час завантаження, коли ці модулі використовуються.

## Інші відмінності між модулями й звичайними сценаріями
## Інші відмінності між модулями та класичними сценаріями

- Слід звернути увагу на локальне тестування: якщо спробувати завантажити файл HTML локально (тобто з URL `file://`), то трапляться помилки CORS, у зв'язку з вимогами безпеки модулів JavaScript. Тестування треба проводити за допомогою сервера.
- Крім того, зверніть увагу, що поведінка частин сценарію, визначених всередині модулів, коли порівняти зі звичайними сценаріями, може відрізнятися. Це пов'язано з тим, що модулі автоматично застосовують {{jsxref("Strict_mode", "суворий режим", "", 1)}}.
- Крім того, зверніть увагу, що поведінка частин сценарію, визначених всередині модулів, коли порівняти з класичними сценаріями, може відрізнятися. Це пов'язано з тим, що модулі автоматично застосовують {{jsxref("Strict_mode", "суворий режим", "", 1)}}.
undead404 marked this conversation as resolved.
Show resolved Hide resolved
- Немає потреби застосовувати атрибут `defer` (дивіться [`<script>` attributes](/uk/docs/Web/HTML/Element/script#atrybuty)) при завантаженні модульного сценарію; завантаження модулів автоматично відкладається.
- Модулі виконуються лише раз, навіть якщо до них звертаються декілька тегів `<script>`.
- І останнє, але не менш важливе, слід прояснити: можливості модулів імпортуються в область видимості одного сценарію – вони не доступні в глобальній області. Таким чином, імпортовані можливості доступні лише в тому сценарії, в котрий імпортовані, і не вийде звернутися до них з консолі JavaScript, наприклад. Синтаксичні помилки виводитимуться в DevTools, але не вийде застосувати певні методики зневадження, котрі могло б хотітися.
Expand Down
1 change: 1 addition & 0 deletions uk_spelling_additions.txt
Original file line number Diff line number Diff line change
Expand Up @@ -436,6 +436,7 @@
промісоподібні
промісу
псевдосимволів-сурогатів
пучкарі
undead404 marked this conversation as resolved.
Show resolved Hide resolved
радіополів
Раушмаєра
регекси
Expand Down
Loading