aboutsummaryrefslogtreecommitdiff
path: root/files/de/web/javascript/reference/statements/export/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/de/web/javascript/reference/statements/export/index.html')
-rw-r--r--files/de/web/javascript/reference/statements/export/index.html126
1 files changed, 126 insertions, 0 deletions
diff --git a/files/de/web/javascript/reference/statements/export/index.html b/files/de/web/javascript/reference/statements/export/index.html
new file mode 100644
index 0000000000..ffeec6b683
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/export/index.html
@@ -0,0 +1,126 @@
+---
+title: export
+slug: Web/JavaScript/Reference/Statements/export
+tags:
+ - ECMAScript 2015
+ - JavaScript
+ - Modules
+ - Statement
+ - export
+translation_of: Web/JavaScript/Reference/Statements/export
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Das <strong>export-Statement</strong> wird verwendet, um Funktionen und Objekte aus einer gegebenen Datei (oder <em>Modul</em>) zu exportieren.</p>
+
+<h2 id="Syntax">Syntax</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>; // oder: var
+export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // oder: var, const
+
+export default <em>expression</em>;
+export default function (…) { … } // oder: class, function*
+export default function name1(…) { … } // oder: 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>Bezeichner der exportiert werden soll (damit er in einem anderen Script via <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> importiert werden kann).</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Es gibt zwei verschiedene Arten von Exports, die jeweils der oben angegebene Syntax entsprechen:</p>
+
+<ul>
+ <li>Benannte Exports:
+ <pre class="brush: js">export { myFunction }; // exportiert eine Funktion, die zuvor deklariert wurde
+export const foo = Math.sqrt(2); // exportiert eine Konstante</pre>
+ </li>
+ <li>Default-Exports (nur einer je Script):
+ <pre class="brush: js">export default function() {} // oder 'export default class {}'
+// hier ist kein Semikolon</pre>
+ </li>
+</ul>
+
+<p>Benannte Exports sind nützlich um mehrere Werte zu exportieren. Beim Import kann man den selben Namen verwenden um auf den entsprechenden Wert zu verweisen.</p>
+
+<p>Bezüglich Default-Export: es kann nur einen einzigen Default-Export pro Modul geben. Ein Default-Export kann eine Funktion sein, eine Klasse, ein Objekt oder irgendetwas anderes. Da dieser Wert am einfachsten importiert werden kann wird er als der "Haupt-Export" des Moduls angesehen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benannte_Exports">Benannte Exports</h3>
+
+<p>Im Modul können wir den folgenden Code verwenden:</p>
+
+<pre class="brush: js">// Modul "my-module.js"
+function cube(x) {
+ return x * x * x;
+}
+const foo = Math.PI + Math.SQRT2;
+export { cube, foo };
+</pre>
+
+<p>Daraufhin könnten wir nun in einem anderen Script (cf. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>) wie folgt vorgehen:</p>
+
+<pre class="brush: js">import { cube, foo } from 'my-module';
+console.log(cube(3)); // 27
+console.log(foo); // 4.555806215962888</pre>
+
+<h3 id="Standard-Export">Standard-Export</h3>
+
+<p>Wenn wir nur einen einzelnen Wert exportieren wollen, oder einen Fallback-Wert für unser Modul zur Verfügung haben möchten, können wir einen Default-Export verwenden:</p>
+
+<pre class="brush: js">// Modul "my-module.js"
+export default function cube(x) {
+ return x * x * x;
+}
+</pre>
+
+<p>In einem anderen Script kann dieser Default-Export dann unkompliziert importiert werden:</p>
+
+<pre class="brush: js">import myFunction from 'my-module';
+console.log(myFunction(3)); // 27
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Spezifikation</th>
+ <th scope="col">Status</th>
+ <th scope="col">Kommentar</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td>
+ <td>{{Spec2('ES2015')}}</td>
+ <td>Initiale Definition.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</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 von Jason Orendorff</li>
+ <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's Buch: "Exploring JS: Modules"</a></li>
+</ul>