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
Copy file name to clipboardExpand all lines: 1-js/13-modules/02-import-export/article.md
+34-34Lines changed: 34 additions & 34 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,9 +26,9 @@
26
26
```
27
27
28
28
````smart header="Не ставится точка с запятой после экспорта класса/функции"
29
-
Обратите внимание, что `export` перед классом или функцией не делает их [функциональным выражением](info:function-expressions-arrows). Это всё так же объявление функции, хотя и экспортируемое.
29
+
Обратите внимание, что `export` перед классом или функцией не делает их [функциональным выражением](info:function-expressions-arrows). Это всё также объявление функции, хотя и экспортируемое.
30
30
31
-
Большинство руководств по стилю кода в JavaScript рекомендуют ставить точку с запятой после инструкций, но не после функций или объявлений классов.
31
+
Большинство руководств по стилю кода в JavaScript рекомендуют ставить точку с запятой после инструкций, но не после объявлений функций или классов.
32
32
33
33
Поэтому в конце `export class` и `export function` не должно быть точки с запятой.
34
34
@@ -42,9 +42,9 @@ export function sayHi(user) {
42
42
43
43
## Экспорт отдельно от объявления
44
44
45
-
Так же мы можем написать `export` отдельно.
45
+
Также можно написать `export` отдельно.
46
46
47
-
Здесь, мы сначала объявляем, а затем экспортируем:
47
+
Здесь мы сначала объявляем, а затем экспортируем:
48
48
49
49
```js
50
50
// 📁 say.js
@@ -57,7 +57,7 @@ function sayBye(user) {
57
57
}
58
58
59
59
*!*
60
-
export {sayHi, sayBye}; // список экспортируемого
60
+
export {sayHi, sayBye}; // список экспортируемых переменных
61
61
*/!*
62
62
```
63
63
@@ -77,7 +77,7 @@ sayHi('John'); // Hello, John!
77
77
sayBye('John'); // Bye, John!
78
78
```
79
79
80
-
Но, если список получается длинным, мы можем импортировать всё, как объект, используя `import * as <obj>`. Например:
80
+
Но если список получается длинным, мы можем импортировать всё в виде объекта, используя `import * as <obj>`. Например:
81
81
82
82
```js
83
83
// 📁 main.js
@@ -89,13 +89,13 @@ say.sayHi('John');
89
89
say.sayBye('John');
90
90
```
91
91
92
-
На первый взгляд "импортировать всё" выглядит очень удобно, не надо писать лишнего, почему мы вообще явно пишем, что нам нужно экспотировать?
92
+
На первый взгляд "импортировать всё" выглядит очень удобно, не надо писать лишнего, почему мы вообще явно пишем, что нам нужно экспортировать?
93
93
94
94
Для этого есть несколько причин.
95
95
96
96
1. Современные инструменты сборки ([webpack](http://webpack.github.io) и другие) собирают модули вместе и оптимизируют их, ускоряя загрузку и удаляя неиспользуемый код.
97
97
98
-
Скажем, мы добавили в наш проект стороннюю библиотеку `lib.js` с множеством функций:
98
+
Предположим, мы добавили в наш проект стороннюю библиотеку `lib.js` с множеством функций:
99
99
```js
100
100
// 📁 lib.js
101
101
exportfunctionsayHi() { ... }
@@ -110,14 +110,14 @@ say.sayBye('John');
110
110
```
111
111
...Тогда оптимизатор автоматически определит это и полностью удалит другие функции из собранного кода, тем самым делая код меньше. Это называется "tree-shaking".
112
112
113
-
2. Явное перечисляя то, что хотим импортировать, мы получаем более короткие имена:`sayHi()`, вместо `lib.sayHi()`.
113
+
2. Явное перечисляя то, что хотим импортировать, мы получаем более короткие имена:`sayHi()` вместо `lib.sayHi()`.
114
114
3. При явных импортах упрощается беглый обзор кода: что и где используется. Это упрощает поддержку и рефакторинг кода.
115
115
116
116
## Импорт "как"
117
117
118
118
Мы так же можем использовать `as`, чтобы импортировать под другими именами.
119
119
120
-
Например, для краткости, давайте импортируем `sayHi` в локальную переменную `hi` и тоже самое с`sayBye`:
120
+
Например, для краткости, давайте импортируем `sayHi` в локальную переменную `hi`, то же самое сделаем с функцией`sayBye`:
До сих поры мы видели, как экспортировать/импортировать вещи, опционально под другими именами.
157
157
158
158
На практике модули могут содержать:
159
159
- Либо библиотеку, набор функций, как `lib.js`.
160
-
- Либо сущьность, как`class User`, описанный в `user.js`. Во всём модуле есть только этот класс.
160
+
- Либо сущность, например`class User`, определенную в `user.js`. Во всём модуле есть только этот класс.
161
161
162
162
По большей части, предпочтителен второй подход, чтобы каждая "вещь" находилась в своём собственном модуле.
163
163
@@ -190,20 +190,20 @@ import *!*User*/!* from './user.js'; // не {User}, просто User
190
190
new User('John');
191
191
```
192
192
193
-
Импорты без фигурных скобок выглядят лучше. Обычная ошибка для начинающих использовать модули: забыть про фигурные скобки совсем. Так что, помните, фигурные скобки необходимы только в случае именнованного импорта, для импорта по-умолчанию они не нужны.
193
+
Импорты без фигурных скобок выглядят лучше. Обычная ошибка для начинающих использовать модули: забыть про фигурные скобки совсем. Так что, помните, фигурные скобки необходимы только в случае именованного импорта, для импорта по-умолчанию они не нужны.
194
194
195
-
| Именованный экспорт | Экспорт по-умолчанию |
195
+
| Именованный экспорт | Экспорт поумолчанию |
196
196
|--------------|----------------|
197
197
|`export class User {...}`|`export default class User {...}`|
198
198
|`import {User} from ...`|`import User from ...`|
199
199
200
-
Естественно, может быть только один экспорт "по-умолчанию" на файл.
200
+
Естественно, может быть только один экспорт "поумолчанию" на файл.
201
201
202
-
У нас могут быть, и экспорт по-умолчанию, и именованные экспорты в одном модуле, но на практике люди обычно их не смешивают. В модуле есть, либо именованные экспорты, либо экспорт по-умолчанию.
202
+
У нас могут быть как экспорт поумолчанию, так и именованные экспорты в одном модуле, но на практике обычно их не смешивают. В модуле есть, либо именованные экспорты, либо экспорт поумолчанию.
203
203
204
204
**Другой момент, что у именованного импорта (естественно) должно быть имя, тогда как `export default` может быть анонимным.**
205
205
206
-
Например, всё это -- полностью валидные экспорты по-умолчанию:
206
+
Например, всё это -- полностью корректные экспорты поумолчанию:
В противоположность этому, отсутствие имени у именованных импортов приведёт к ошибке:
223
223
224
224
```js
225
-
export class { // Ошибка! (необходимо имя, если это не экспорт по-умолчанию)
225
+
export class { // Ошибка! (необходимо имя, если это не экспорт поумолчанию)
226
226
constructor() {}
227
227
}
228
228
```
229
229
230
230
### Псевдоним "default"
231
231
232
-
Слово "default"-- это своего рода "псевдоним" для экспорта по-умолчанию, для сценариев, когда нам нужно каким-либо образом сослаться на него.
232
+
Слово "default"-- это своего рода "псевдоним" для экспорта поумолчанию, для сценариев, когда нам нужно каким-либо образом сослаться на него.
233
233
234
234
Например, если мы уже объявили функцию, то мы можем сделать `export default` вот таким образом:
235
235
@@ -238,10 +238,10 @@ function sayHi(user) {
238
238
alert(`Hello, ${user}!`);
239
239
}
240
240
241
-
export {sayHi as default}; // тоже самое, как, если бы мы добавили "export default" перед функцией
241
+
export {sayHi as default}; // то же самое, как если бы мы добавили "export default" перед функцией
242
242
```
243
243
244
-
Или, давайте представим: модуль `user.js` экспортирует одну вещь"по-умолчанию" и несколько именованных (редкий, но возможный случай):
244
+
Или давайте представим следующее: модуль `user.js` экспортирует одну сущность"поумолчанию" и несколько именованных (редкий, но возможный случай):
245
245
246
246
```js
247
247
// 📁 user.js
@@ -256,7 +256,7 @@ export function sayHi(user) {
256
256
}
257
257
```
258
258
259
-
Мы можем импортировать экспорт по-умолчанию вместе с именованными экспортами таким образом:
259
+
Мы можем импортировать экспорт поумолчанию вместе с именованными экспортами таким образом:
260
260
261
261
```js
262
262
// 📁 main.js
@@ -265,7 +265,7 @@ import {*!*default as User*/!*, sayHi} from './user.js';
265
265
new User('John');
266
266
```
267
267
268
-
Или, если мы импортируем всё, как объект (`*`), тогда свойство `default`-- это и есть экспорт по-умолчанию:
268
+
Или если мы импортируем всё как объект (`*`), тогда свойство `default`-- это и есть экспорт поумолчанию:
269
269
270
270
```js
271
271
// 📁 main.js
@@ -276,27 +276,27 @@ new User('John');
276
276
```
277
277
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'; // можно импортировать с любым именем, и это будет работать
295
295
```
296
296
297
297
Так что, тут мы получаем немного больше свободы, которая может привести к злоупотреблениям, члены команды могут использовать разные имена для одной и той же вещи.
298
298
299
-
Обычно, чтобы избежать этого и соблюсти консистентность кода, есть правило: имена импортируемых переменных должны соответствовать именам файлов. Вот так:
299
+
Обычно, чтобы избежать этого и соблюсти единообразие кода, есть правило: имена импортируемых переменных должны соответствовать именам файлов. Вот так:
300
300
301
301
```js
302
302
import User from './user.js';
@@ -311,7 +311,7 @@ import func from '/path/to/func.js';
311
311
312
312
## Реэкспорт
313
313
314
-
"Реэкспорт" синтаксис`export ... from ... ` позволяет импортировать что-нибудь и тут же экспортировать это (возможно под другим именем), например, вот так:
314
+
Синтаксис "реэкспорта"`export ... from ... ` позволяет импортировать что-нибудь и тут же экспортировать это (возможно под другим именем), например, вот так:
315
315
316
316
```js
317
317
export {sayHi} from './say.js';
@@ -373,15 +373,15 @@ export {default as Github} from './providers/github.js';
373
373
...
374
374
```
375
375
376
-
````warn header="Механизм рэкспортирования значения по-умолчанию -- запутанный"
377
-
Обратите внимание: `export User from './user.js'` не будет работать. Тут синтаксическая ошибка. Чтобы реэкспортировать экспорт по-умолчанию, мы должны явно написать `{default as ...}`, как в примере выше.
376
+
````warn header="Механизм рэкспортирования значения поумолчанию -- запутанный"
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
-
export {default} from './module.js'; // для реэкспорта по-умолчанию
384
+
export {default} from './module.js'; // для реэкспорта поумолчанию
385
385
```
386
386
387
387
Экспорт по-умолчанию должен быть обозначен явно только при реэкспорте: `import * as obj` работает нормально. Экспорт по-умолчанию будет находиться в `obj.default`. Так что, здесь есть некоторая асимметрия между конструкциями импорта и экспорта.
@@ -428,7 +428,7 @@ import {sayHi} from './say.js'; // импорт в конце файла
428
428
Условный импорт, как этот, работать не будет:
429
429
```js
430
430
if (something) {
431
-
import {sayHi} from"./say.js"; // Ошибка: импорт должнен быть на верхнем уровне
431
+
import {sayHi} from"./say.js"; // Ошибка: импорт должен быть на верхнем уровне
0 commit comments