Skip to content

Commit 7b8718b

Browse files
lex111ca11ado
andcommitted
Apply suggestions from code review
Co-Authored-By: ca11ado <projects.tlt@yandex.ru>
1 parent 307beb4 commit 7b8718b

File tree

1 file changed

+34
-34
lines changed

1 file changed

+34
-34
lines changed

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

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

2828
````smart header="Не ставится точка с запятой после экспорта класса/функции"
29-
Обратите внимание, что `export` перед классом или функцией не делает их [функциональным выражением](info:function-expressions-arrows). Это всё так же объявление функции, хотя и экспортируемое.
29+
Обратите внимание, что `export` перед классом или функцией не делает их [функциональным выражением](info:function-expressions-arrows). Это всё также объявление функции, хотя и экспортируемое.
3030
31-
Большинство руководств по стилю кода в JavaScript рекомендуют ставить точку с запятой после инструкций, но не после функций или объявлений классов.
31+
Большинство руководств по стилю кода в JavaScript рекомендуют ставить точку с запятой после инструкций, но не после объявлений функций или классов.
3232
3333
Поэтому в конце `export class` и `export function` не должно быть точки с запятой.
3434
@@ -42,9 +42,9 @@ export function sayHi(user) {
4242

4343
## Экспорт отдельно от объявления
4444

45-
Так же мы можем написать `export` отдельно.
45+
Также можно написать `export` отдельно.
4646

47-
Здесь, мы сначала объявляем, а затем экспортируем:
47+
Здесь мы сначала объявляем, а затем экспортируем:
4848

4949
```js
5050
// 📁 say.js
@@ -57,7 +57,7 @@ function sayBye(user) {
5757
}
5858

5959
*!*
60-
export {sayHi, sayBye}; // список экспортируемого
60+
export {sayHi, sayBye}; // список экспортируемых переменных
6161
*/!*
6262
```
6363

@@ -77,7 +77,7 @@ sayHi('John'); // Hello, John!
7777
sayBye('John'); // Bye, John!
7878
```
7979

80-
Но, если список получается длинным, мы можем импортировать всё, как объект, используя `import * as <obj>`. Например:
80+
Но если список получается длинным, мы можем импортировать всё в виде объекта, используя `import * as <obj>`. Например:
8181

8282
```js
8383
// 📁 main.js
@@ -89,13 +89,13 @@ say.sayHi('John');
8989
say.sayBye('John');
9090
```
9191

92-
На первый взгляд "импортировать всё" выглядит очень удобно, не надо писать лишнего, почему мы вообще явно пишем, что нам нужно экспотировать?
92+
На первый взгляд "импортировать всё" выглядит очень удобно, не надо писать лишнего, почему мы вообще явно пишем, что нам нужно экспортировать?
9393

9494
Для этого есть несколько причин.
9595

9696
1. Современные инструменты сборки ([webpack](http://webpack.github.io) и другие) собирают модули вместе и оптимизируют их, ускоряя загрузку и удаляя неиспользуемый код.
9797

98-
Скажем, мы добавили в наш проект стороннюю библиотеку `lib.js` с множеством функций:
98+
Предположим, мы добавили в наш проект стороннюю библиотеку `lib.js` с множеством функций:
9999
```js
100100
// 📁 lib.js
101101
export function sayHi() { ... }
@@ -110,14 +110,14 @@ say.sayBye('John');
110110
```
111111
...Тогда оптимизатор автоматически определит это и полностью удалит другие функции из собранного кода, тем самым делая код меньше. Это называется "tree-shaking".
112112

113-
2. Явное перечисляя то, что хотим импортировать, мы получаем более короткие имена: `sayHi()`, вместо `lib.sayHi()`.
113+
2. Явное перечисляя то, что хотим импортировать, мы получаем более короткие имена: `sayHi()` вместо `lib.sayHi()`.
114114
3. При явных импортах упрощается беглый обзор кода: что и где используется. Это упрощает поддержку и рефакторинг кода.
115115

116116
## Импорт "как"
117117

118118
Мы так же можем использовать `as`, чтобы импортировать под другими именами.
119119

120-
Например, для краткости, давайте импортируем `sayHi` в локальную переменную `hi` и тоже самое с `sayBye`:
120+
Например, для краткости, давайте импортируем `sayHi` в локальную переменную `hi`, то же самое сделаем с функцией `sayBye`:
121121

122122
```js
123123
// 📁 main.js
@@ -151,13 +151,13 @@ say.hi('John'); // Hello, John!
151151
say.bye('John'); // Bye, John!
152152
```
153153

154-
## Экспортирование по-умолчанию
154+
## Экспортирование по умолчанию
155155

156156
До сих поры мы видели, как экспортировать/импортировать вещи, опционально под другими именами.
157157

158158
На практике модули могут содержать:
159159
- Либо библиотеку, набор функций, как `lib.js`.
160-
- Либо сущьность, как `class User`, описанный в `user.js`. Во всём модуле есть только этот класс.
160+
- Либо сущность, например `class User`, определенную в `user.js`. Во всём модуле есть только этот класс.
161161

162162
По большей части, предпочтителен второй подход, чтобы каждая "вещь" находилась в своём собственном модуле.
163163

@@ -190,20 +190,20 @@ import *!*User*/!* from './user.js'; // не {User}, просто User
190190
new User('John');
191191
```
192192

193-
Импорты без фигурных скобок выглядят лучше. Обычная ошибка для начинающих использовать модули: забыть про фигурные скобки совсем. Так что, помните, фигурные скобки необходимы только в случае именнованного импорта, для импорта по-умолчанию они не нужны.
193+
Импорты без фигурных скобок выглядят лучше. Обычная ошибка для начинающих использовать модули: забыть про фигурные скобки совсем. Так что, помните, фигурные скобки необходимы только в случае именованного импорта, для импорта по-умолчанию они не нужны.
194194

195-
| Именованный экспорт | Экспорт по-умолчанию |
195+
| Именованный экспорт | Экспорт по умолчанию |
196196
|--------------|----------------|
197197
| `export class User {...}` | `export default class User {...}` |
198198
| `import {User} from ...` | `import User from ...`|
199199

200-
Естественно, может быть только один экспорт "по-умолчанию" на файл.
200+
Естественно, может быть только один экспорт "по умолчанию" на файл.
201201

202-
У нас могут быть, и экспорт по-умолчанию, и именованные экспорты в одном модуле, но на практике люди обычно их не смешивают. В модуле есть, либо именованные экспорты, либо экспорт по-умолчанию.
202+
У нас могут быть как экспорт по умолчанию, так и именованные экспорты в одном модуле, но на практике обычно их не смешивают. В модуле есть, либо именованные экспорты, либо экспорт по умолчанию.
203203

204204
**Другой момент, что у именованного импорта (естественно) должно быть имя, тогда как `export default` может быть анонимным.**
205205

206-
Например, всё это -- полностью валидные экспорты по-умолчанию:
206+
Например, всё это -- полностью корректные экспорты по умолчанию:
207207

208208
```js
209209
export default class { // у класса нет имени
@@ -222,14 +222,14 @@ export default ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
222222
В противоположность этому, отсутствие имени у именованных импортов приведёт к ошибке:
223223

224224
```js
225-
export class { // Ошибка! (необходимо имя, если это не экспорт по-умолчанию)
225+
export class { // Ошибка! (необходимо имя, если это не экспорт по умолчанию)
226226
constructor() {}
227227
}
228228
```
229229

230230
### Псевдоним "default"
231231

232-
Слово "default" -- это своего рода "псевдоним" для экспорта по-умолчанию, для сценариев, когда нам нужно каким-либо образом сослаться на него.
232+
Слово "default" -- это своего рода "псевдоним" для экспорта по умолчанию, для сценариев, когда нам нужно каким-либо образом сослаться на него.
233233

234234
Например, если мы уже объявили функцию, то мы можем сделать `export default` вот таким образом:
235235

@@ -238,10 +238,10 @@ function sayHi(user) {
238238
alert(`Hello, ${user}!`);
239239
}
240240
241-
export {sayHi as default}; // тоже самое, как, если бы мы добавили "export default" перед функцией
241+
export {sayHi as default}; // то же самое, как если бы мы добавили "export default" перед функцией
242242
```
243243

244-
Или, давайте представим: модуль `user.js` экспортирует одну вещь "по-умолчанию" и несколько именованных (редкий, но возможный случай):
244+
Или давайте представим следующее: модуль `user.js` экспортирует одну сущность "по умолчанию" и несколько именованных (редкий, но возможный случай):
245245

246246
```js
247247
// 📁 user.js
@@ -256,7 +256,7 @@ export function sayHi(user) {
256256
}
257257
```
258258

259-
Мы можем импортировать экспорт по-умолчанию вместе с именованными экспортами таким образом:
259+
Мы можем импортировать экспорт по умолчанию вместе с именованными экспортами таким образом:
260260

261261
```js
262262
// 📁 main.js
@@ -265,7 +265,7 @@ import {*!*default as User*/!*, sayHi} from './user.js';
265265
new User('John');
266266
```
267267

268-
Или, если мы импортируем всё, как объект (`*`), тогда свойство `default` -- это и есть экспорт по-умолчанию:
268+
Или если мы импортируем всё как объект (`*`), тогда свойство `default` -- это и есть экспорт по умолчанию:
269269

270270
```js
271271
// 📁 main.js
@@ -276,27 +276,27 @@ new User('John');
276276
```
277277

278278

279-
### Должен ли я использовать экспорт по-умолчанию?
279+
### Должен ли я использовать экспорт по умолчанию?
280280

281-
Нужно быть осторожным с использованием экспорта по-умолчанию, потому что он поддерживается несколько иначе.
281+
Нужно быть осторожным с использованием экспорта по умолчанию, потому что он поддерживается несколько иначе.
282282

283283
Именованные экспорты очевидны. У них есть явное имя для импорта, мы получаем от них эту информацию, и это хорошо.
284284

285-
Так же, именованные экспорты вынуждают нас использовать правильное имя при импорте:
285+
Также именованные экспорты вынуждают нас использовать правильное имя при импорте:
286286

287287
```js
288288
import {User} from './user.js';
289289
```
290290

291-
Для экспорта по-умолчанию, нам нужно создать своё собственное имя:
291+
Для экспорта по умолчанию нам нужно создать своё собственное имя:
292292

293293
```js
294294
import MyUser from './user.js'; // можно импортировать с любым именем, и это будет работать
295295
```
296296

297297
Так что, тут мы получаем немного больше свободы, которая может привести к злоупотреблениям, члены команды могут использовать разные имена для одной и той же вещи.
298298

299-
Обычно, чтобы избежать этого и соблюсти консистентность кода, есть правило: имена импортируемых переменных должны соответствовать именам файлов. Вот так:
299+
Обычно, чтобы избежать этого и соблюсти единообразие кода, есть правило: имена импортируемых переменных должны соответствовать именам файлов. Вот так:
300300

301301
```js
302302
import User from './user.js';
@@ -311,7 +311,7 @@ import func from '/path/to/func.js';
311311

312312
## Реэкспорт
313313

314-
"Реэкспорт" синтаксис `export ... from ... ` позволяет импортировать что-нибудь и тут же экспортировать это (возможно под другим именем), например, вот так:
314+
Синтаксис "реэкспорта" `export ... from ... ` позволяет импортировать что-нибудь и тут же экспортировать это (возможно под другим именем), например, вот так:
315315

316316
```js
317317
export {sayHi} from './say.js';
@@ -373,15 +373,15 @@ export {default as Github} from './providers/github.js';
373373
...
374374
```
375375

376-
````warn header="Механизм рэкспортирования значения по-умолчанию -- запутанный"
377-
Обратите внимание: `export User from './user.js'` не будет работать. Тут синтаксическая ошибка. Чтобы реэкспортировать экспорт по-умолчанию, мы должны явно написать `{default as ...}`, как в примере выше.
376+
````warn header="Механизм рэкспортирования значения по умолчанию -- запутанный"
377+
Обратите внимание: `export User from './user.js'` не будет работать. Тут синтаксическая ошибка. Чтобы реэкспортировать экспорт по умолчанию, мы должны явно написать `{default as ...}`, как в примере выше.
378378
379-
Так же есть ещё одна странность: `export * from './user.js'` реэкспортирует только именованные экспорты, без экспорта по-умолчанию. Ещё раз, мы должны обозначить это явно.
379+
Так же есть ещё одна странность: `export * from './user.js'` реэкспортирует только именованные экспорты, исключая экспорты по умолчанию. Ещё раз, мы должны обозначить это явно.
380380
381381
Например, чтобы реэкспортировать всё, нам нужны две инструкции:
382382
```js
383383
export * from './module.js'; // для реэкспорта именованных экспортов
384-
export {default} from './module.js'; // для реэкспорта по-умолчанию
384+
export {default} from './module.js'; // для реэкспорта по умолчанию
385385
```
386386
387387
Экспорт по-умолчанию должен быть обозначен явно только при реэкспорте: `import * as obj` работает нормально. Экспорт по-умолчанию будет находиться в `obj.default`. Так что, здесь есть некоторая асимметрия между конструкциями импорта и экспорта.
@@ -428,7 +428,7 @@ import {sayHi} from './say.js'; // импорт в конце файла
428428
Условный импорт, как этот, работать не будет:
429429
```js
430430
if (something) {
431-
import {sayHi} from "./say.js"; // Ошибка: импорт должнен быть на верхнем уровне
431+
import {sayHi} from "./say.js"; // Ошибка: импорт должен быть на верхнем уровне
432432
}
433433
```
434434

0 commit comments

Comments
 (0)