1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: export
slug: Web/JavaScript/Reference/Statements/export
tags:
- ECMAScript6
- JavaScript
- Statement
- export
- Инструкция
- Модули
translation_of: Web/JavaScript/Reference/Statements/export
---
<div>{{jsSidebar("Statements")}}</div>
<p>Инструкция <strong>export </strong>используется для экспорта функций, объектов или примитивов из файла (или модуля).</p>
<div class="note">
<p><strong>Примечание:</strong> Эта функциональность не реализована в браузерах на данный момент, но она реализована во многих транспайлерах, таких как <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a> or <a href="https://github.com/rollup/rollup">Rollup</a>.</p>
</div>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox">export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };
export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };
export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // или var
export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // или var, const
export default <em>выражение</em>;
export default function (…) { … } // или class, function*
export default function name1(…) { … } // или class, function*
export { <var>name1</var> as default, … };
export * from …;
export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …;
export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;</pre>
<dl>
<dt><code>nameN</code></dt>
<dd>Идентификатор для экспорта (чтобы он мог быть импортирован с помощью {{jsxref("Statements/import", "import")}} в другом файле (скрипте)).</dd>
</dl>
<h2 id="Описание">Описание</h2>
<p>Существует два типа экспорта, каждый из которых описан ниже:</p>
<ul>
<li>Именованный экспорт:
<pre class="brush: js">export { myFunction }; // экспорт ранее объявленной функции
export const foo = Math.sqrt(2); // экспорт константы</pre>
</li>
<li>Дефолтный экспорт (экспорт по умолчанию) (один на скрипт):
<pre class="brush: js">export default function() {} // или '<em>export default class {}</em>'
// тут не ставится точка с запятой</pre>
</li>
</ul>
<p>Именованная форма более применима для экспорта нескольких величин. Во время импорта, можно будет использовать одно и то же имя, чтобы обратиться к соответствующему экспортируемому значению.</p>
<p>Касательно экспорта по умолчанию (default), он может быть только один для каждого отдельного модуля (файла). Дефолтный экспорт может представлять собой функцию, класс, объект или что-то другое. Это значение следует рассматривать как "основное", так как его будет проще всего импортировать.</p>
<h2 id="Примеры">Примеры</h2>
<h3 id="Использование_именованного_экспорта">Использование именованного экспорта</h3>
<p>Мы могли бы использовать следующий код в модуле:</p>
<pre class="brush: js">// модуль"my-module.js"
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };
</pre>
<p>Таким образом в другом скрипте при помощи импорта (см. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>) мы могли бы получить следующее:</p>
<pre class="brush: js">import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888</pre>
<h3 id="Использование_export_default">Использование export default</h3>
<p>Если мы хотим экспортировать единственное значение или иметь резервное значение (fallback) для данного модуля, мы можем использовать <code>export default</code>.</p>
<pre class="brush: js">// модуль"my-module.js"
export default function cube(x) {
return x * x * x;
}
</pre>
<p>Затем, в другом скрипте можно импортировать это значение по умолчанию таким образом:</p>
<pre class="brush: js">import cube from 'my-module';
console.log(cube(3)); // 27
</pre>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td>
<td>{{Spec2('ES6')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat("javascript.statements.export")}}</p>
<h2 id="Смотри_также">Смотри также</h2>
<ul>
<li>{{jsxref("Statements/import", "import")}}</li>
<li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
<li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
</ul>
|
