Skip to content

Commit ad0ea27

Browse files
committed
fixed typos and simplified explanation
**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.
1 parent a62746d commit ad0ea27

File tree

3 files changed

+22
-22
lines changed

3 files changed

+22
-22
lines changed

1-js/13-modules/01-modules-intro/article.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ sayHi('Іван'); // Привіт, Іван!
4949

5050
Запустимо приклад у браузері.
5151

52-
Оскільки модулі підтримують ряд спеціальних ключових слів, таким чином вони мають ряд особливостей. Необхідно явно сказати браузеру, що скрипт є модулем, з допомогою атрибута `<script type="module">`.
52+
Оскільки модулі підтримують ряд спеціальних ключових слів та інших особливостей, ми повинні явно сказати браузеру, що його слід сприймати як модуль. Для цього є атрибут `<script type="module">`.
5353

5454
Ось так:
5555

@@ -90,7 +90,7 @@ sayHi('Іван'); // Привіт, Іван!
9090
- `user.js` повинен експортувати змінну `user`.
9191
- `hello.js` повинен імпортувати змінну з `user.js` модуля.
9292

93-
Іншими словами, використовуючи модулі ми користуємось import/export замість використання глобальних змінних.
93+
Іншими словами, використовуючи модулі ми користуємось `import`/`export` замість використання глобальних змінних.
9494

9595
Правильний варіант:
9696

@@ -304,9 +304,9 @@ sayHi(); // Ready to serve, *!*Pete*/!*!
304304
305305
### Атрибут async працює у вбудованих скриптах
306306
307-
Для немодульних скриптів атрибут `async` працює лише на зовнішніх скриптах. Скрипти з ним запускаються відразу по готовності, вони не чекають на інші скрипти або HTML-документ.
307+
Для немодульних скриптів *атрибут* `async` (не путати з ключовим словом `async`) працює лише з зовнішніми скриптами (підключеними через `src`). Скрипти з `async` запускаються відразу по готовності, вони не чекають на інші скрипти або HTML-документ.
308308
309-
`Async` також працює у вбудованих сценаріях для модулів.
309+
А от для модульних скриптів *атрибут* `async` працює і для зовнішніх скриптів, і для вбудованих (прописаних всередині тега `<script>тут код</script>`).
310310
311311
Наприклад, у скрипті нижче є `async`, тому він виконається одразу після завантаження, не чекаючи інших скриптів.
312312

1-js/13-modules/02-import-export/article.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
```
2727

2828
````smart header="Не потрібно ставити крапку з комою після експорту класу чи функції"
29-
Зверніть увагу, `export` перед класом чи функцією не перетворює її в [функціональний вираз](info:function-expressions). Це все ще оголошення функції, хоч і експортованої.
29+
Зверніть увагу, `export` перед класом чи функцією не робить її [функціональним виразом](info:function-expressions). Це все ще оголошення функції (function declaration), хоч і екпортовуваної.
3030
3131
Більшість стилів JavaScript коду не рекомендують ставити крапку з комою після оголошення функції та класу.
3232
@@ -99,7 +99,7 @@ say.sayBye('Іван');
9999
```smart header="Не бійтеся імпортувати занадто багато"
100100
Сучасні інструменти збірки, такі як [webpack](https://webpack.js.org/) та інші, об’єднують модулі разом і оптимізують їх для прискорення завантаження. Вони також видаляють імпорти, що не використовуються.
101101
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) у оптимізований бандл.
103103
```
104104

105105
## Імпорт "as"
@@ -142,12 +142,12 @@ say.*!*bye*/!*('Іван'); // Бувай, Іван!
142142

143143
## Типовий експорт
144144

145-
На практиці існує два головних типи модулів.
145+
На практиці існує два основних види модулів.
146146

147-
1. Модулі, що містять бібліотеку -- набір функцій, як `say.js` вище.
147+
1. Модулі, що містять бібліотеку (набір функцій), як `say.js` вище.
148148
2. Модулі, що визначають єдину сутність, тобто модуль `user.js` експортує тільки `class User`.
149149

150-
Переважно, надавати перевагу потрібно другому підходу, таким чином усі "сутності" знаходяться у власних модулях.
150+
Загалом другий спосіб більш бажаний, бо так усі "сутності" знаходяться у власних модулях.
151151

152152
Очевидно, що це вимагає великої кількості файлів, щоб усе мало власні модулі, але це зовсім не проблема. Насправді, навігація в коді полегшується, якщо всі файли мають вдалу назву та структуровані в теках.
153153

@@ -210,7 +210,7 @@ export default ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
210210
Такий експорт без `default` згенерує помилку:
211211

212212
```js
213-
export class { // Помилка! (типовий експорт потребує імені)
213+
export class { // Помилка! (нетиповий експорт потребує імені)
214214
constructor() {}
215215
}
216216
```
@@ -254,7 +254,7 @@ import {*!*default as User*/!*, sayHi} from './user.js';
254254
new User('Іван');
255255
```
256256

257-
Урешті-решт, якщо імпортувати всі `*` як об'єкт, тоді властивість `default` матиме значення типового імпорту:
257+
І наостанок, якщо імпортувати всі сутності `*` як об'єкт, тоді значення типового імпорту буде знаходитись у властивості `default`:
258258

259259
```js
260260
// 📁 main.js
@@ -275,12 +275,12 @@ import {User} from './user.js';
275275
// import {MyUser} не спрацює, оскільки ім’я повинно бути {User}
276276
```
277277

278-
...В той час, як для типового імпорту нам завжди потрібно обрати ім’я:
278+
...В той час, як для типового імпорту нам завжди потрібно обрати ім’я самим:
279279

280280
```js
281281
import User from './user.js'; // спрацює
282282
import MyUser from './user.js'; // спрацює теж
283-
// можна навіть import Anything... і це все одно ще спрацює
283+
// можна навіть import Anything... і це все одно спрацює
284284
```
285285

286286
Таким чином різні члени команд можуть використовувати різні імена для імпорту однакових сутностей і це не дуже добре.
@@ -310,7 +310,7 @@ export {default as User} from './user.js'; // реекспорт default
310310

311311
Навіщо нам це може знадобитися? Розглянемо практичний спосіб використання.
312312

313-
Уявімо, що нам потрібно написати "пакунок": директорію з багатьма модулями, що експортує певний функціонал (інструменти як NPM дозволяють публікувати та розповсюджувати такі пакунки, але ми не зобов’язані їх використовувати). Багато таких пакунків використовуються в ролі допоміжних, для внутрішнього використання всередині інших модулів.
313+
Уявімо, що нам потрібно написати "пакет" (package): директорію з багатьма модулями, що експортує певний функціонал (інструменти як NPM дозволяють публікувати та розповсюджувати такі пакети, але ми не зобов’язані їх використовувати). Багато таких пакетів використовуються в ролі допоміжних, для внутрішнього використання всередині інших модулів.
314314

315315
Файлова структура може мати такий вигляд:
316316
```
@@ -326,21 +326,21 @@ auth/
326326
...
327327
```
328328

329-
Для доступу до функціоналу пакунку ззовні ми б хотіли створити єдину точку входу.
329+
Для доступу до функціоналу пакета ззовні ми б хотіли створити єдину точку входу.
330330

331-
Інакше кажучи, користувачі для використання функціоналу нашого пакунку повинні імпортувати тільки "головний файл" `auth/index.js`.
331+
Інакше кажучи, користувачі для використання функціоналу нашого пакета повинні імпортувати тільки "головний файл" `auth/index.js`.
332332

333333
Наприклад:
334334

335335
```js
336336
import {login, logout} from 'auth/index.js'
337337
```
338338

339-
"Головний файл" `auth/index.js` експортує весь функціонал, що ми б хотіли надати з цим пакунком.
339+
"Головний файл" `auth/index.js` експортує весь функціонал, що ми б хотіли надати з цим пакетом.
340340

341-
Ідея полягає в тому, щоб інші програмісти, хто буде використовувати наш пакунок, не матимуть змогу втрутитися у внутрішню структуру. Ми експортуємо тільки те, що необхідно з `auth/index.js` та тримаємо решту прихованим від допитливих очей.
341+
Ідея полягає в тому, щоб інші програмісти, хто буде використовувати наш пакет, не мали змоги втрутитися у внутрішню структуру. Ми експортуємо тільки те, що необхідно з `auth/index.js` та тримаємо решту прихованим від допитливих очей.
342342

343-
Оскільки, функціональність, до якої ми хочемо надати доступ, може знаходитися в різних частинах пакунку, ми можемо імпортувати її та повторно експортувати в `auth/index.js`:
343+
Оскільки, функціональність, до якої ми хочемо надати доступ, може знаходитися в різних частинах пакета, ми можемо імпортувати її та повторно експортувати в `auth/index.js`:
344344

345345
```js
346346
// 📁 auth/index.js
@@ -355,7 +355,7 @@ export {User};
355355
...
356356
```
357357

358-
Тепер користувачі нашого пакунку зможуть виконати `import {login} from "auth/index.js"`.
358+
Тепер користувачі нашого пакета зможуть виконати `import {login} from "auth/index.js"`.
359359

360360
Синтаксис `export ... from ...` - просто скорочений запис для імпорту-експорту:
361361

@@ -373,7 +373,7 @@ export {default as User} from './user.js';
373373

374374
### Реекспорт типового експорту
375375

376-
Для реекспорту типового експорту потрібна спеціальна обробка.
376+
Для реекспорту типового експорту потрібна окрема обробка.
377377

378378
Скажімо, у нас є `user.js` з якого ми хочемо реекспортувати клас `User`:
379379

1-js/13-modules/03-modules-dynamic-imports/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
По-перше, ми не можемо динамічно задавати ніякі з параметрів `import`.
66

7-
Шлях до модуля має бути строковим примітивом і не може бути викликом функції. Ось так працювати не буде:
7+
Шлях до модуля має бути рядковим примітивом і не може бути викликом функції. Ось так працювати не буде:
88

99
```js
1010
import ... from *!*getModuleName()*/!*; // Помилка, має бути рядок

0 commit comments

Comments
 (0)