diff options
Diffstat (limited to 'files/de/web/javascript/reference/statements/export/index.html')
-rw-r--r-- | files/de/web/javascript/reference/statements/export/index.html | 126 |
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> |