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
...Или, технически, мы так же можем расположить `export` выше функций.
64
+
...Или, технически, мы также можем расположить `export` выше функций.
65
65
66
66
## Импорт *
67
67
@@ -103,15 +103,15 @@ say.sayBye('John');
103
103
exportfunctionbecomeSilent() { ... }
104
104
```
105
105
106
-
Теперь, если нам на самом деле в проекте нужна только одна из них:
106
+
Теперь, если из этой библиотеки в проекте мы используем только одну функцию:
107
107
```js
108
108
// 📁 main.js
109
109
import {sayHi} from './lib.js';
110
110
```
111
111
...Тогда оптимизатор автоматически определит это и полностью удалит другие функции из собранного кода, тем самым делая код меньше. Это называется "tree-shaking".
112
112
113
113
2. Явное перечисляя то, что хотим импортировать, мы получаем более короткие имена:`sayHi()` вместо `lib.sayHi()`.
114
-
3.При явных импортах упрощается беглый обзор кода:что и где используется. Это упрощает поддержку и рефакторинг кода.
114
+
3.Явный импорт делает код более понятным, позволяет увидеть, что именно и где используется. Это упрощает поддержку и рефакторинг кода.
До сих поры мы видели, как экспортировать/импортировать вещи, опционально под другими именами.
157
157
158
-
На практике модули могут содержать:
158
+
На практике модули обычно содержат одно из:
159
159
- Либо библиотеку, набор функций, как `lib.js`.
160
160
- Либо сущность, например `class User`, определенную в `user.js`. Во всём модуле есть только этот класс.
161
161
162
162
По большей части, предпочтителен второй подход, чтобы каждая "вещь" находилась в своём собственном модуле.
163
163
164
-
Естественно, это требует большого количества файлов, так как всё находится в своём модуле, но это не проблема. На самом деле, навигация по коду становится проще, если у файлов хорошие названия и всё структурировано по папкам.
164
+
Естественно, потребуется много файлов, если для всего делать отдельный модуль, но это не проблема. Так даже удобнее: навигация по проекту становится проще, особенно если у файлов хорошие имена, и они структурированы по папкам.
165
165
166
-
Модули предоставляют специальный синтаксис `export default`, чтобы вариант "одна вещь в одном модуле" выглядел лучше.
166
+
Модули предоставляют специальный синтаксис `export default` для второго подхода.
167
167
168
168
Для этого требуются следующие `export` и `import` инструкции:
169
169
@@ -190,7 +190,7 @@ import *!*User*/!* from './user.js'; // не {User}, просто User
190
190
new User('John');
191
191
```
192
192
193
-
Импорты без фигурных скобок выглядят лучше. Обычная ошибка для начинающих использовать модули: забыть про фигурные скобки совсем. Так что, помните, фигурные скобки необходимы только в случае именованного импорта, для импорта по-умолчанию они не нужны.
193
+
Импорты без фигурных скобок выглядят красивее. Обычная ошибка начинающих: забыть про фигурные скобки. Фигурные скобки необходимы в случае именованного импорта, для импорта поумолчанию они не нужны.
194
194
195
195
| Именованный экспорт | Экспорт по умолчанию |
196
196
|--------------|----------------|
@@ -199,9 +199,9 @@ new User('John');
199
199
200
200
Естественно, может быть только один экспорт "по умолчанию" на файл.
201
201
202
-
У нас могут быть как экспорт по умолчанию, так и именованные экспорты в одном модуле, но на практике обычно их не смешивают. В модуле есть, либо именованные экспорты, либо экспорт по умолчанию.
202
+
У нас могут быть как экспорт по умолчанию, так и именованные экспорты в одном модуле, но на практике обычно их не смешивают. То есть, в модуле находятся либо именованные экспорты, либо один экспорт по умолчанию.
203
203
204
-
**Другой момент, что у именованного импорта (естественно) должно быть имя, тогда как `export default` может быть анонимным.**
204
+
**Заметим, что у именованного импорта (естественно) должно быть имя, тогда как `export default` может быть анонимным.**
205
205
206
206
Например, всё это -- полностью корректные экспорты по умолчанию:
207
207
@@ -229,7 +229,7 @@ export class { // Ошибка! (необходимо имя, если это н
229
229
230
230
### Псевдоним "default"
231
231
232
-
Слово "default"-- это своего рода "псевдоним" для экспорта по умолчанию, для сценариев, когда нам нужно каким-либо образом сослаться на него.
232
+
Слово "default"-- это своего рода "псевдоним" для экспорта по умолчанию, для экспортирования отдельно от объявления и других ситуаций, когда нам нужно сослаться на него.
233
233
234
234
Например, если мы уже объявили функцию, то мы можем сделать `export default` вот таким образом:
235
235
@@ -278,17 +278,17 @@ new User('John');
278
278
279
279
### Должен ли я использовать экспорт по умолчанию?
280
280
281
-
Нужно быть осторожным с использованием экспорта по умолчанию, потому что он поддерживается несколько иначе.
281
+
Нужно быть осторожным с использованием экспорта по умолчанию, потому что он сложнее в поддержке.
282
282
283
-
Именованные экспорты очевидны. У них есть явное имя для импорта, мы получаем от них эту информацию, и это хорошо.
283
+
Именованные экспорты "включают в себя" своё имя. Эта информация является частью модуля, говорит нам, что именно экспортируется.
284
284
285
285
Также именованные экспорты вынуждают нас использовать правильное имя при импорте:
286
286
287
287
```js
288
288
import {User} from './user.js';
289
289
```
290
290
291
-
Для экспорта по умолчанию нам нужно создать своё собственное имя:
291
+
Для экспорта по умолчанию мы можем выбрать любое имя при импорте:
292
292
293
293
```js
294
294
import MyUser from './user.js'; // можно импортировать с любым именем, и это будет работать
@@ -307,7 +307,7 @@ import func from '/path/to/func.js';
307
307
308
308
Другим решением может быть -- использование именованных экспортов везде. Даже, если экспортируется только одна вещь, она всё равно экспортируется с именем, без использования `default`.
309
309
310
-
Это так же немного упрощает реэкспорт (смотрите ниже).
310
+
Это также немного упрощает реэкспорт (смотрите ниже).
311
311
312
312
## Реэкспорт
313
313
@@ -336,7 +336,7 @@ auth/
336
336
...
337
337
```
338
338
339
-
Мы бы хотели распространить функциональность пакета через единую точку входа, такую, как "главный файл" `auth/index.js`, чтобы можно было использовать таким образом:
339
+
Мы бы хотели сделать функционал нашего пакета доступным через единую точку входа: "главный файл" `auth/index.js`. Чтобы можно было использовать его следующим образом:
340
340
341
341
```js
342
342
import {login, logout} from 'auth/index.js'
@@ -359,7 +359,7 @@ export {Github};
359
359
...
360
360
```
361
361
362
-
"Рекэкспорт" -- это просто более короткая запись для этого:
362
+
"Реэкспорт" -- это просто более короткая запись для этого:
363
363
364
364
```js
365
365
// 📁 auth/index.js
@@ -376,15 +376,15 @@ export {default as Github} from './providers/github.js';
376
376
````warn header="Механизм рэкспортирования значения по умолчанию -- запутанный"
377
377
Обратите внимание: `export User from './user.js'` не будет работать. Тут синтаксическая ошибка. Чтобы реэкспортировать экспорт по умолчанию, мы должны явно написать `{default as ...}`, как в примере выше.
378
378
379
-
Так же есть ещё одна странность: `export * from './user.js'` реэкспортирует только именованные экспорты, исключая экспорты по умолчанию. Ещё раз, мы должны обозначить это явно.
379
+
Так же есть ещё одна странность: `export * from './user.js'` реэкспортирует только именованные экспорты, исключая экспорты по умолчанию. Ещё раз заметим: мы должны обозначить экспорт по умолчанию явно.
380
380
381
381
Например, чтобы реэкспортировать всё, нам нужны две инструкции:
382
382
```js
383
383
export * from './module.js'; // для реэкспорта именованных экспортов
384
384
export {default} from './module.js'; // для реэкспорта по умолчанию
385
385
```
386
386
387
-
Экспорт по-умолчанию должен быть обозначен явно только при реэкспорте: `import * as obj` работает нормально. Экспорт по-умолчанию будет находиться в `obj.default`. Так что, здесь есть некоторая асимметрия между конструкциями импорта и экспорта.
387
+
Экспорт поумолчанию должен быть обозначен явно только при реэкспорте: `import * as obj` работает нормально (при этом экспорт по умолчанию будет находиться в `obj.default`). Так что здесь есть некоторая асимметрия между конструкциями импорта и экспорта.
388
388
````
389
389
390
390
## Итого
@@ -404,15 +404,15 @@ export {default} from './module.js'; // для реэкспорта по умо
404
404
405
405
- Именованные экспорты из модуля:
406
406
-`import {x [as y], ...} from "mod"`
407
-
- Экспорт по-умолчанию:
407
+
- Экспорт поумолчанию:
408
408
-`import x from "mod"`
409
409
-`import {default as x} from "mod"`
410
410
- Всё сразу:
411
411
-`import * as obj from "mod"`
412
-
- Только получить/оценить модуль, не импортировать:
412
+
- Только подключить модуль (он запустится), но не присваивать его переменной:
413
413
-`import "mod"`
414
414
415
-
Мы можем поставить импорт/экспорт инструкции после или перед другим кодом, это не имеет значения.
415
+
Мы можем поставить import/export в начале или в конце скрипта, это не имеет значения.
416
416
417
417
Так что, технически, это нормально:
418
418
```js
@@ -423,9 +423,9 @@ import {sayHi} from './say.js'; // импорт в конце файла
423
423
424
424
На практике импорты, чаще всего, располагаются в начале файла. Но это только для большего удобства.
425
425
426
-
**Обратите внимание, что инструкции импорт/экспорт не работают внутри `{...}`.**
426
+
**Обратите внимание, что инструкции import/export не работают внутри `{...}`.**
427
427
428
-
Условный импорт, как этот, работать не будет:
428
+
Условный импорт, такой как ниже, работать не будет:
429
429
```js
430
430
if (something) {
431
431
import {sayHi} from"./say.js"; // Ошибка: импорт должен быть на верхнем уровне
0 commit comments