Skip to content

Commit

Permalink
update(JS): web/javascript/guide/modules (#3422)
Browse files Browse the repository at this point in the history
* update(JS): web/javascript/guide/modules

* Update files/uk/web/javascript/guide/modules/index.md

* Apply suggestions from code review

Co-authored-by: Alina Listunova <[email protected]>

---------

Co-authored-by: Alina Listunova <[email protected]>
  • Loading branch information
undead404 and alinkedd authored Oct 26, 2024
1 parent 0fca78f commit a4fee19
Showing 1 changed file with 4 additions and 13 deletions.
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/)).

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

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

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

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

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

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)}}.
- Немає потреби застосовувати атрибут `defer` (дивіться [`<script>` attributes](/uk/docs/Web/HTML/Element/script#atrybuty)) при завантаженні модульного сценарію; завантаження модулів автоматично відкладається.
- Модулі виконуються лише раз, навіть якщо до них звертаються декілька тегів `<script>`.
- І останнє, але не менш важливе, слід прояснити: можливості модулів імпортуються в область видимості одного сценарію – вони не доступні в глобальній області. Таким чином, імпортовані можливості доступні лише в тому сценарії, в котрий імпортовані, і не вийде звернутися до них з консолі JavaScript, наприклад. Синтаксичні помилки виводитимуться в DevTools, але не вийде застосувати певні методики зневадження, котрі могло б хотітися.
Expand Down

0 comments on commit a4fee19

Please sign in to comment.