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/10-es-modern/13-modules/article.md
+69-16Lines changed: 69 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -38,25 +38,29 @@
38
38
<li>отдельно, при этом в фигурных скобках указывается, что именно экспортируется.</li>
39
39
</ul>
40
40
41
-
Например:
41
+
Например, так экспортируется переменная `one`:
42
42
43
43
```js
44
44
// экспорт прямо перед объявлением
45
45
exportlet one =1;
46
+
```
47
+
48
+
Можно написать `export` и отдельно от объявления:
46
49
47
-
// можно и раздельно, в две строки вместо одной
50
+
```js
48
51
let two =2;
52
+
49
53
export {two};
50
54
```
51
55
52
-
Заметим, что в фигурных скобках указывается не блок, не произвольное выражение, а только имя.
56
+
При этом в фигурных скобках указываются одна или несколько экспортируемых переменных.
53
57
54
-
Можно указать несколько:
58
+
Для двух переменных будет так:
55
59
```js
56
60
export {one, two};
57
61
```
58
62
59
-
Также можно указать, что переменная `one` будет доступна снаружи под именем `once`, а `two` -- под именем `twice`:
63
+
При помощи ключевого слова `as`можно указать, что переменная `one` будет доступна снаружи (экспортирована) под именем `once`, а `two` -- под именем `twice`:
60
64
61
65
```js
62
66
export {oneasonce, twoastwice};
@@ -74,9 +78,11 @@ export function sayHi() {
74
78
alert("Hello!");
75
79
};
76
80
77
-
// или export {User, sayHi}
81
+
// отдельно от объявлений было бы так:
82
+
// export {User, sayHi}
78
83
```
79
84
85
+
[smart header="Для экспорта обязательно нужно имя"]
80
86
Заметим, что и у функции и у класса при таком экспорте должно быть имя.
81
87
82
88
Так будет ошибка:
@@ -85,6 +91,9 @@ export function sayHi() {
85
91
exportfunction() { alert("Error"); };
86
92
```
87
93
94
+
В экспорте указываются именно имена, а не произвольные выражения.
95
+
[/smart]
96
+
88
97
## import
89
98
90
99
Другие модули могут подключать экспортированные значения при помощи ключевого слова `import`.
@@ -136,19 +145,18 @@ alert( `${item1} and ${item2}` ); // 1 and 2
136
145
import*asnumbersfrom"./nums";
137
146
*/!*
138
147
148
+
// теперь экспортированные переменные - свойства numbers
139
149
alert( `${numbers.one} and ${numbers.two}` ); // 1 and 2
140
150
```
141
151
[/smart]
142
152
143
153
## export default
144
154
145
-
Выше мы видели, что модуль может экспортировать произвольное количество значений при помощи `export`.
146
-
147
-
Однако, как правило, код стараются организовать так, чтобы каждый модуль делал одну вещь. Иначе говоря, "один файл -- одна сущность, которую он описывает".
155
+
Выше мы видели, что модуль может экспортировать выбранные переменные при помощи `export`.
148
156
149
-
Например, файл `user.js` содержит `class User`, файл `login.js` -- функцию `login()` для авторизации, и т.п.
157
+
Однако, как правило, код стараются организовать так, чтобы каждый модуль делал одну вещь. Иначе говоря, "один файл -- одна сущность, которую он описывает". Например, файл `user.js` содержит `class User`, файл `login.js` -- функцию `login()` для авторизации, и т.п.
150
158
151
-
При этом модули, разумеется, будут взаимосвязаны. Например, `login.js`, скорее всего, будет импортировать класс `User` из модуля `user.js`.
159
+
При этом модули, разумеется, будут использовать друг друга. Например, `login.js`, скорее всего, будет импортировать класс `User` из модуля `user.js`.
152
160
153
161
Для такой ситуации, когда один модуль экспортирует одно значение, предусмотрено особое ключевое сочетание `export default`.
154
162
@@ -174,21 +182,66 @@ import User from './user';
174
182
newUser("Вася");
175
183
```
176
184
177
-
Если бы в `user.js` не было `default`, то в `login.js` необходимо было бы указать фигурные скобки:
185
+
"Экспорт по умолчанию" -- своего рода "синтаксический сахар". Можно было бы и без него, импортировать значение обычным образом через фигурные скобки `{…}`. Если бы в `user.js` не было `default`, то в `login.js` необходимо было бы указать фигурные скобки:
178
186
179
187
```js
180
-
// если в бы user.js не было default:
188
+
// если бы user.js содержал
181
189
// export class User { ... }
182
190
183
-
// …то при импорте понадобились бы фигурные скобки:
191
+
// …то при импорте User понадобились бы фигурные скобки:
184
192
import {User} from'./user';
185
193
186
194
newUser("Вася");
187
195
```
188
196
189
-
Как видно, "экспорт по умолчанию" -- лишь небольшой синтаксический сахар. Можно было бы и без него, импортировать значение обычным образом через фигурные скобки `{…}`.
197
+
На практике этот "сахар" весьма приятен, так как позволяет легко видеть, какое именно значение экспортирует модуль, а также обойтись без лишних символов при импорте.
198
+
199
+
## CommonJS
200
+
201
+
Если вы раньше работали с Node.JS или использовали систему сборки в синтаксисе CommonJS, то вот соответствия.
202
+
203
+
204
+
Для экспрта по умолчанию вместо:
205
+
```js
206
+
module.exports=VARIABLE;
207
+
```
208
+
209
+
Пишем:
210
+
```js
211
+
exportdefaultVARIABLE;
212
+
```
213
+
214
+
А при импорте из такого модуля вместо:
215
+
216
+
```js
217
+
letVARIABLE=require('./file');
218
+
```
219
+
220
+
Пишем:
221
+
222
+
```js
223
+
importVARIABLEfrom'./file';
224
+
```
225
+
226
+
Для экспорта нескольких значений из модуля, вместо:
227
+
228
+
```js
229
+
exports.NAME=VARIABLE;
230
+
```
231
+
232
+
Пишем в фигурных скобках, что надо экспортировать и под каким именем (без `as`, если имя совпадает):
233
+
234
+
```js
235
+
export {VARIABLEasNAME};
236
+
```
237
+
238
+
При импорте -- также фигурные скобки:
239
+
240
+
```js
241
+
import {NAME} from'./file';
242
+
```
243
+
190
244
191
-
Но на практике этот "сахар" весьма приятен, так как позволяет легко видеть, какое именно значение экспортирует модуль, а также обойтись без лишних символов при импорте.
0 commit comments