You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
**In chapter 01-13 modules**
One commit for all three articles.
There were some mistakes. And some of sentences were correct, but they were "unnatural" in Ukrainian and make understanding more difficult.
Copy file name to clipboardExpand all lines: 1-js/13-modules/01-modules-intro/article.md
+4-4Lines changed: 4 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -49,7 +49,7 @@ sayHi('Іван'); // Привіт, Іван!
49
49
50
50
Запустимо приклад у браузері.
51
51
52
-
Оскільки модулі підтримують ряд спеціальних ключових слів, таким чином вони мають ряд особливостей. Необхідно явно сказати браузеру, що скрипт є модулем, з допомогою атрибута`<script type="module">`.
52
+
Оскільки модулі підтримують ряд спеціальних ключових слів та інших особливостей, ми повинні явно сказати браузеру, що його слід сприймати як модуль. Для цього є атрибут`<script type="module">`.
53
53
54
54
Ось так:
55
55
@@ -90,7 +90,7 @@ sayHi('Іван'); // Привіт, Іван!
90
90
-`user.js` повинен експортувати змінну `user`.
91
91
-`hello.js` повинен імпортувати змінну з `user.js` модуля.
92
92
93
-
Іншими словами, використовуючи модулі ми користуємось import/export замість використання глобальних змінних.
93
+
Іншими словами, використовуючи модулі ми користуємось `import`/`export` замість використання глобальних змінних.
94
94
95
95
Правильний варіант:
96
96
@@ -304,9 +304,9 @@ sayHi(); // Ready to serve, *!*Pete*/!*!
304
304
305
305
### Атрибут async працює у вбудованих скриптах
306
306
307
-
Для немодульних скриптів атрибут `async` працює лише на зовнішніх скриптах. Скрипти з ним запускаються відразу по готовності, вони не чекають на інші скрипти або HTML-документ.
307
+
Для немодульних скриптів *атрибут*`async`(не путати з ключовим словом `async`) працює лише з зовнішніми скриптами (підключеними через `src`). Скрипти з `async` запускаються відразу по готовності, вони не чекають на інші скрипти або HTML-документ.
308
308
309
-
`Async` також працює у вбудованих сценаріях для модулів.
309
+
А от для модульних скриптів *атрибут* `async`працює і для зовнішніх скриптів, і для вбудованих (прописаних всередині тега `<script>тут код</script>`).
310
310
311
311
Наприклад, у скрипті нижче є `async`, тому він виконається одразу після завантаження, не чекаючи інших скриптів.
Copy file name to clipboardExpand all lines: 1-js/13-modules/02-import-export/article.md
+17-17Lines changed: 17 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -26,7 +26,7 @@
26
26
```
27
27
28
28
````smart header="Не потрібно ставити крапку з комою після експорту класу чи функції"
29
-
Зверніть увагу, `export` перед класом чи функцією не перетворює її в [функціональний вираз](info:function-expressions). Це все ще оголошення функції, хоч і експортованої.
29
+
Зверніть увагу, `export` перед класом чи функцією не робить її [функціональним виразом](info:function-expressions). Це все ще оголошення функції (function declaration), хоч і екпортовуваної.
30
30
31
31
Більшість стилів JavaScript коду не рекомендують ставити крапку з комою після оголошення функції та класу.
32
32
@@ -99,7 +99,7 @@ say.sayBye('Іван');
99
99
```smart header="Не бійтеся імпортувати занадто багато"
100
100
Сучасні інструменти збірки, такі як [webpack](https://webpack.js.org/) та інші, об’єднують модулі разом і оптимізують їх для прискорення завантаження. Вони також видаляють імпорти, що не використовуються.
101
101
102
-
Наприклад, якщо ви `import * as library` з величезної бібліотеки коду, а потім використаєте лише кілька методів, тоді невикористані методи [не будуть включені](https://github.com/webpack/webpack/tree/main/examples/harmony-unused#examplejs) у оптимізований бандл.
102
+
Наприклад, якщо ви зробите `import * as library` з величезної бібліотеки коду, а потім використаєте лише кілька методів, тоді невикористані методи [не будуть включені](https://github.com/webpack/webpack/tree/main/examples/harmony-unused#examplejs) у оптимізований бандл.
1. Модулі, що містять бібліотеку -- набір функцій, як `say.js` вище.
147
+
1. Модулі, що містять бібліотеку (набір функцій), як `say.js` вище.
148
148
2. Модулі, що визначають єдину сутність, тобто модуль `user.js` експортує тільки `class User`.
149
149
150
-
Переважно, надавати перевагу потрібно другому підходу, таким чином усі "сутності" знаходяться у власних модулях.
150
+
Загалом другий спосіб більш бажаний, бо так усі "сутності" знаходяться у власних модулях.
151
151
152
152
Очевидно, що це вимагає великої кількості файлів, щоб усе мало власні модулі, але це зовсім не проблема. Насправді, навігація в коді полегшується, якщо всі файли мають вдалу назву та структуровані в теках.
exportclass { // Помилка! (типовий експорт потребує імені)
213
+
exportclass { // Помилка! (нетиповий експорт потребує імені)
214
214
constructor() {}
215
215
}
216
216
```
@@ -254,7 +254,7 @@ import {*!*default as User*/!*, sayHi} from './user.js';
254
254
newUser('Іван');
255
255
```
256
256
257
-
Урешті-решт, якщо імпортувати всі `*` як об'єкт, тоді властивість `default` матиме значення типового імпорту:
257
+
І наостанок, якщо імпортувати всі сутності `*` як об'єкт, тоді значення типового імпорту буде знаходитись у властивості `default`:
258
258
259
259
```js
260
260
// 📁 main.js
@@ -275,12 +275,12 @@ import {User} from './user.js';
275
275
// import {MyUser} не спрацює, оскільки ім’я повинно бути {User}
276
276
```
277
277
278
-
...В той час, як для типового імпорту нам завжди потрібно обрати ім’я:
278
+
...В той час, як для типового імпорту нам завжди потрібно обрати ім’я самим:
279
279
280
280
```js
281
281
importUserfrom'./user.js'; // спрацює
282
282
importMyUserfrom'./user.js'; // спрацює теж
283
-
// можна навіть import Anything... і це все одно ще спрацює
283
+
// можна навіть import Anything... і це все одно спрацює
284
284
```
285
285
286
286
Таким чином різні члени команд можуть використовувати різні імена для імпорту однакових сутностей і це не дуже добре.
@@ -310,7 +310,7 @@ export {default as User} from './user.js'; // реекспорт default
310
310
311
311
Навіщо нам це може знадобитися? Розглянемо практичний спосіб використання.
312
312
313
-
Уявімо, що нам потрібно написати "пакунок": директорію з багатьма модулями, що експортує певний функціонал (інструменти як NPM дозволяють публікувати та розповсюджувати такі пакунки, але ми не зобов’язані їх використовувати). Багато таких пакунків використовуються в ролі допоміжних, для внутрішнього використання всередині інших модулів.
313
+
Уявімо, що нам потрібно написати "пакет" (package): директорію з багатьма модулями, що експортує певний функціонал (інструменти як NPM дозволяють публікувати та розповсюджувати такі пакети, але ми не зобов’язані їх використовувати). Багато таких пакетів використовуються в ролі допоміжних, для внутрішнього використання всередині інших модулів.
314
314
315
315
Файлова структура може мати такий вигляд:
316
316
```
@@ -326,21 +326,21 @@ auth/
326
326
...
327
327
```
328
328
329
-
Для доступу до функціоналу пакунку ззовні ми б хотіли створити єдину точку входу.
329
+
Для доступу до функціоналу пакета ззовні ми б хотіли створити єдину точку входу.
330
330
331
-
Інакше кажучи, користувачі для використання функціоналу нашого пакунку повинні імпортувати тільки "головний файл" `auth/index.js`.
331
+
Інакше кажучи, користувачі для використання функціоналу нашого пакета повинні імпортувати тільки "головний файл" `auth/index.js`.
332
332
333
333
Наприклад:
334
334
335
335
```js
336
336
import {login, logout} from'auth/index.js'
337
337
```
338
338
339
-
"Головний файл" `auth/index.js` експортує весь функціонал, що ми б хотіли надати з цим пакунком.
339
+
"Головний файл" `auth/index.js` експортує весь функціонал, що ми б хотіли надати з цим пакетом.
340
340
341
-
Ідея полягає в тому, щоб інші програмісти, хто буде використовувати наш пакунок, не матимуть змогу втрутитися у внутрішню структуру. Ми експортуємо тільки те, що необхідно з `auth/index.js` та тримаємо решту прихованим від допитливих очей.
341
+
Ідея полягає в тому, щоб інші програмісти, хто буде використовувати наш пакет, не мали змоги втрутитися у внутрішню структуру. Ми експортуємо тільки те, що необхідно з `auth/index.js` та тримаємо решту прихованим від допитливих очей.
342
342
343
-
Оскільки, функціональність, до якої ми хочемо надати доступ, може знаходитися в різних частинах пакунку, ми можемо імпортувати її та повторно експортувати в `auth/index.js`:
343
+
Оскільки, функціональність, до якої ми хочемо надати доступ, може знаходитися в різних частинах пакета, ми можемо імпортувати її та повторно експортувати в `auth/index.js`:
344
344
345
345
```js
346
346
// 📁 auth/index.js
@@ -355,7 +355,7 @@ export {User};
355
355
...
356
356
```
357
357
358
-
Тепер користувачі нашого пакунку зможуть виконати `import {login} from "auth/index.js"`.
358
+
Тепер користувачі нашого пакета зможуть виконати `import {login} from "auth/index.js"`.
359
359
360
360
Синтаксис `export ... from ...` - просто скорочений запис для імпорту-експорту:
361
361
@@ -373,7 +373,7 @@ export {default as User} from './user.js';
373
373
374
374
### Реекспорт типового експорту
375
375
376
-
Для реекспорту типового експорту потрібна спеціальна обробка.
376
+
Для реекспорту типового експорту потрібна окрема обробка.
377
377
378
378
Скажімо, у нас є `user.js` з якого ми хочемо реекспортувати клас `User`:
0 commit comments