Skip to content

Commit 2fcf941

Browse files
committed
better es6 modules, fixes
1 parent 5bb0037 commit 2fcf941

2 files changed

Lines changed: 70 additions & 17 deletions

File tree

1-js/10-es-modern/13-modules/article.md

Lines changed: 69 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -38,25 +38,29 @@
3838
<li>отдельно, при этом в фигурных скобках указывается, что именно экспортируется.</li>
3939
</ul>
4040

41-
Например:
41+
Например, так экспортируется переменная `one`:
4242

4343
```js
4444
// экспорт прямо перед объявлением
4545
export let one = 1;
46+
```
47+
48+
Можно написать `export` и отдельно от объявления:
4649

47-
// можно и раздельно, в две строки вместо одной
50+
```js
4851
let two = 2;
52+
4953
export {two};
5054
```
5155

52-
Заметим, что в фигурных скобках указывается не блок, не произвольное выражение, а только имя.
56+
При этом в фигурных скобках указываются одна или несколько экспортируемых переменных.
5357

54-
Можно указать несколько:
58+
Для двух переменных будет так:
5559
```js
5660
export {one, two};
5761
```
5862

59-
Также можно указать, что переменная `one` будет доступна снаружи под именем `once`, а `two` -- под именем `twice`:
63+
При помощи ключевого слова `as` можно указать, что переменная `one` будет доступна снаружи (экспортирована) под именем `once`, а `two` -- под именем `twice`:
6064

6165
```js
6266
export {one as once, two as twice};
@@ -74,9 +78,11 @@ export function sayHi() {
7478
alert("Hello!");
7579
};
7680

77-
// или export {User, sayHi}
81+
// отдельно от объявлений было бы так:
82+
// export {User, sayHi}
7883
```
7984

85+
[smart header="Для экспорта обязательно нужно имя"]
8086
Заметим, что и у функции и у класса при таком экспорте должно быть имя.
8187

8288
Так будет ошибка:
@@ -85,6 +91,9 @@ export function sayHi() {
8591
export function() { alert("Error"); };
8692
```
8793

94+
В экспорте указываются именно имена, а не произвольные выражения.
95+
[/smart]
96+
8897
## import
8998

9099
Другие модули могут подключать экспортированные значения при помощи ключевого слова `import`.
@@ -136,19 +145,18 @@ alert( `${item1} and ${item2}` ); // 1 and 2
136145
import * as numbers from "./nums";
137146
*/!*
138147

148+
// теперь экспортированные переменные - свойства numbers
139149
alert( `${numbers.one} and ${numbers.two}` ); // 1 and 2
140150
```
141151
[/smart]
142152

143153
## export default
144154

145-
Выше мы видели, что модуль может экспортировать произвольное количество значений при помощи `export`.
146-
147-
Однако, как правило, код стараются организовать так, чтобы каждый модуль делал одну вещь. Иначе говоря, "один файл -- одна сущность, которую он описывает".
155+
Выше мы видели, что модуль может экспортировать выбранные переменные при помощи `export`.
148156

149-
Например, файл `user.js` содержит `class User`, файл `login.js` -- функцию `login()` для авторизации, и т.п.
157+
Однако, как правило, код стараются организовать так, чтобы каждый модуль делал одну вещь. Иначе говоря, "один файл -- одна сущность, которую он описывает". Например, файл `user.js` содержит `class User`, файл `login.js` -- функцию `login()` для авторизации, и т.п.
150158

151-
При этом модули, разумеется, будут взаимосвязаны. Например, `login.js`, скорее всего, будет импортировать класс `User` из модуля `user.js`.
159+
При этом модули, разумеется, будут использовать друг друга. Например, `login.js`, скорее всего, будет импортировать класс `User` из модуля `user.js`.
152160

153161
Для такой ситуации, когда один модуль экспортирует одно значение, предусмотрено особое ключевое сочетание `export default`.
154162

@@ -174,21 +182,66 @@ import User from './user';
174182
new User("Вася");
175183
```
176184

177-
Если бы в `user.js` не было `default`, то в `login.js` необходимо было бы указать фигурные скобки:
185+
"Экспорт по умолчанию" -- своего рода "синтаксический сахар". Можно было бы и без него, импортировать значение обычным образом через фигурные скобки `{…}`. Если бы в `user.js` не было `default`, то в `login.js` необходимо было бы указать фигурные скобки:
178186

179187
```js
180-
// если в бы user.js не было default:
188+
// если бы user.js содержал
181189
// export class User { ... }
182190

183-
// …то при импорте понадобились бы фигурные скобки:
191+
// …то при импорте User понадобились бы фигурные скобки:
184192
import {User} from './user';
185193

186194
new User("Вася");
187195
```
188196

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+
export default VARIABLE;
212+
```
213+
214+
А при импорте из такого модуля вместо:
215+
216+
```js
217+
let VARIABLE = require('./file');
218+
```
219+
220+
Пишем:
221+
222+
```js
223+
import VARIABLE from './file';
224+
```
225+
226+
Для экспорта нескольких значений из модуля, вместо:
227+
228+
```js
229+
exports.NAME = VARIABLE;
230+
```
231+
232+
Пишем в фигурных скобках, что надо экспортировать и под каким именем (без `as`, если имя совпадает):
233+
234+
```js
235+
export {VARIABLE as NAME};
236+
```
237+
238+
При импорте -- также фигурные скобки:
239+
240+
```js
241+
import {NAME} from './file';
242+
```
243+
190244

191-
Но на практике этот "сахар" весьма приятен, так как позволяет легко видеть, какое именно значение экспортирует модуль, а также обойтись без лишних символов при импорте.
192245

193246
## Использование
194247

1-js/5-functions-closures/1-global-object/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
Например:
2222

2323
```js
24-
//+ run untrusted refresh
24+
//+ run untrusted refresh no-strict
2525
var a = 5; // объявление var создаёт свойство window.a
2626
alert( window.a ); // 5
2727
```

0 commit comments

Comments
 (0)