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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: export
slug: Web/JavaScript/Reference/Statements/export
translation_of: Web/JavaScript/Reference/Statements/export
---
<div>{{jsSidebar("Statements")}}</div>
<p>Het <strong><code>export</code></strong> statement wordt gebruikt bij het maken van JavaScript modules om functies, objecten of primitieve waarden te exporteren van de module zodat deze gebruikt kunnen worden door andere programmas met het {{jsxref("Statements/import", "import")}} statement.</p>
<p>Geëxporteerde modules worden altijd uitgevoerd in {{jsxref("Strict_mode","strict mode")}}, ongeacht of dat is aangegeven. Het export-statement kan niet gebruikt worden in<em> </em>ingevoegde scripts.</p>
<div class="note">
<p>Deze functie is momenteel niet geïmplementeerd in Internet Explorer, Android webview en Samsung Internet. Het is wel geïmplementeerd in 'transpilers' zoals de <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a> of <a href="https://github.com/rollup/rollup">Rollup</a>.</p>
</div>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: js line-numbers language-js">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>; // also var, function
export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // also var, const
<code class="language-js">export function FunctionName() {...}
export class ClassName {...}</code>
export default <em>expression</em>;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also 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 …;
<code class="language-js">export { default } from …;</code></pre>
<p> </p>
<dl>
<dt><code>nameN</code></dt>
<dd>Identificator die geëxporteerd moet worden (zodat het geïmporteerd kan worden via {{jsxref("Statements/import", "import")}} in een ander script).</dd>
</dl>
<h2 id="Beschrijving">Beschrijving</h2>
<p>Er zijn 2 verschillende types van export: <strong>named </strong>en <strong>default</strong>. Er kunnen meerdere <em>named exports</em> per module bestaan, maar slechts een <em>default export</em>. Elk type komt overeen met een van de bovenstaande syntaxen.</p>
<ul>
<li>Genoemde exports (named exports):
<pre class="brush: js">// exporteert een eerder gedeclareerde functie
export { myFunction };
// exporteert een constante
export const foo = Math.sqrt(2);</pre>
</li>
<li>Standaard exports (default exports) (function):
<pre class="brush: js">export default function() {} </pre>
</li>
<li>Standaard exports (default exports) (class):
<pre class="brush: js">export default class {} </pre>
</li>
</ul>
<p>Genoemde exports zijn handig om verschillende waardes te exporteren. Tijdens de import is het verplicht om dezelfde naam als het overeenkomende object te gebruiken.</p>
<p>Maar een standaard export kan geïmporteerd worden met enige andere naam, bijvoorbeeld:</p>
<pre class="syntaxbox">let k; export default k = 12; // in bestand test.js
import m from './test' // let op dat we de vrijheid hebben om import m te gebruiken in plaats van import k, omdat k een default export is.
console.log(m); // Zal '12' in de console laten zien
</pre>
<p>Er kan slechts 1 standaard export zijn.</p>
<p>De volgende syntax exporteert geen standaard export van de geïmporteerde module:</p>
<pre>export * from …;</pre>
<p>Gebruik de volgende syntax als de standaard export nodig is:</p>
<pre class="brush: js line-numbers language-js"><code class="language-js">export {default} from 'mod';</code></pre>
<h2 id="Voorbeelden">Voorbeelden</h2>
<h3 id="Genoemde_(named)_exports_gebruiken">Genoemde (named) exports gebruiken</h3>
<p>In de module zouden we de volgende code kunnen gebruiken:</p>
<pre class="brush: js">// module "my-module.js"
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };
</pre>
<p>Op deze manier zouden we in een ander script deze code kunnen hebben:</p>
<pre class="brush: js">import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888</pre>
<h3 id="De_standaard_(default)_export_gebruiken">De standaard (default) export gebruiken</h3>
<p>Als we een enkele waarde willen exporteren of willen terugvallen op een waarde voor onze module zouden we een standaard (default) export kunnen gebruiken:</p>
<pre class="brush: js">// module "my-module.js"
export default function cube(x) {
return x * x * x;
}
</pre>
<p>Op die manier zal het vanzelfsprekend zijn om in een ander script de standaard (default) export te importeren:</p>
<pre class="brush: js">import cube from 'my-module';
console.log(cube(3)); // 27
</pre>
<p>Merk op dat het niet mogelijk is om <code>var</code>, <code>let</code> of <code>const</code> te gebruiken met <code>export default</code>.</p>
<h2 id="Specificaties">Specificaties</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('ES2015', '#sec-exports', 'Exports')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Initiële definitie.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2>
<div class="hidden">De compatibiliteitstabel op deze pagina is gegenereerd van gestructureerde data. Indien u wenst bij te dragen aan deze data, bekijk dan <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> en stuur ons een pull request.</div>
<p>{{Compat("javascript.statements.export")}}</p>
<h2 id="Bekijk_ook">Bekijk ook</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>
|
