Was ist "Export Standard" in Javascript?

Datei: SafeString.js

// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

export default SafeString;

Ich habe noch nie gesehen export default. Gibt es gleichwertige Dinge export default, die leichter zu verstehen sind?

Es ist Teil des hier beschriebenen ES6-Modulsystems . In dieser Dokumentation finden Sie auch ein hilfreiches Beispiel:

Wenn ein Modul einen Standardexport definiert:

export default function() { console.log("hello!") }

Anschließend können Sie diesen Standardexport importieren, indem Sie die geschweiften Klammern weglassen:

import foo from "foo";
foo(); // hello!

Update: Ab Juni 2015 ist das Modulsystem in §15.2 definiert und die exportSyntax insbesondere in §15.2.3 der ECMAScript 2015-Spezifikation.

export default wird verwendet, um eine einzelne Klasse, Funktion oder ein Grundelement aus einer Skriptdatei zu exportieren.

Der Export kann auch als geschrieben werden

export default function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

Dies wird verwendet, um diese Funktion in eine andere Skriptdatei zu importieren

Sagen Sie in app.js , Sie können

import SafeString from './handlebars/safe-string';

Ein wenig über den Export

Wie der Name schon sagt, werden damit Funktionen, Objekte, Klassen oder Ausdrücke aus Skriptdateien oder -modulen exportiert

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

Dies kann importiert und als verwendet werden

App.js.

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

Oder

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

Wenn die Export-Standardeinstellung verwendet wird, ist dies viel einfacher. Skriptdateien exportieren nur eine Sache. cube.js

export default function cube(x) {
  return x * x * x;
};

und als App.js verwendet

import Cube from 'cube';
console.log(Cube(3)); // 27

export default function(){}kann verwendet werden, wenn die Funktion keinen Namen hat. Es kann nur einen Standardexport in einer Datei geben. Die Alternative ist ein benannter Export.

Diese Seite beschreibt export defaultausführlich sowie andere Details zu Modulen, die ich sehr hilfreich fand.

Ich schreibe diesen Beitrag, weil ich (ich nehme an, ich bin müde) weder MDN noch die Beschreibung anderer Leute verstanden habe und der beste Weg, etwas zu verstehen, darin besteht, es anderen Leuten beizubringen. Ich sehe nur keine einfache Antwort auf die Frage.

Was ist "Export Standard" in Javascript?

Beim Standardexport ist die Benennung des Imports völlig unabhängig und wir können einen beliebigen Namen verwenden.

Ich werde diese Zeile anhand eines einfachen Beispiels veranschaulichen.

Nehmen wir an, wir haben 3 Module und eine index.html:

• modul.js
• modul2.js
• modul3.js
• index.html

modul.js

export function hello() {
    console.log("Modul: Saying hello!");
}

export let variable = 123;

modul2.js

export function hello2() {
    console.log("Module2: Saying hello for the second time!");
}

export let variable2 = 456;

modul3.js

export default function hello3() {
    console.log("Module3: Saying hello for the third time!");
}

index.html

<script type="module">
import * as mod from './modul.js';
import {hello2, variable2} from './modul2.js';
import blabla from './modul3.js'; //! Here is the important stuff - we name the variable for the module as we like

mod.hello();
console.log("Module: " + mod.variable);

hello2();
console.log("Module2: " + variable2);

blabla();
</script>

Die Ausgabe ist:

modul.js:2:10   -> Modul: Saying hello! 
index.html:7:9  -> Module: 123 
modul2.js:2:10  -> Module2: Saying hello for the second time! 
index.html:10:9 -> Module2: 456 
modul3.js:2:10  -> Module3: Saying hello for the third time!

Die längere Erklärung lautet also :

'Standard exportieren' wird verwendet, wenn Sie eine einzelne Sache für ein Modul exportieren möchten.

Wichtig ist also "import blabla from './modul3.js'" - wir könnten stattdessen sagen:

"importiere pamelanderson von './modul3.js" und dann pamelanderson (); Dies funktioniert einwandfrei, wenn wir 'Standard exportieren' verwenden, und im Grunde ist es das - es ermöglicht uns, es zu benennen, was immer wir wollen, wenn es Standard ist .

Ps Wenn Sie das Beispiel testen möchten - zuerst die Dateien erstellen, dann CORS im Browser zulassen -> wenn Sie Firefox verwenden, geben Sie die URL des Browsers ein: about: config -> Suchen Sie nach "privacy.file_unique_origin" -> change es auf "false" -> index.html öffnen -> F12 drücken, um die Konsole zu öffnen und die Ausgabe anzuzeigen -> Genießen Sie und vergessen Sie nicht, die Cors-Einstellungen auf die Standardeinstellungen zurückzusetzen.

Ps2 Entschuldigung für die dumme Benennung der Variablen

Weitere Informationen unter link2medium , link2mdn1 , link2mdn2

Wie dazu erklärt MDN-Seite

Es gibt zwei verschiedene Exportarten: Name und Standard. Sie können mehrere benannte Exporte pro Modul haben, aber nur einen Standardexport [...] Benannte Exporte sind nützlich, um mehrere Werte zu exportieren. Während des Imports muss unbedingt derselbe Name des entsprechenden Objekts verwendet werden. Ein Standardexport kann jedoch mit einem beliebigen Namen importiert werden

Zum Beispiel:

let myVar; export default myVar = 123; // in file my-module.js

import myExportedVar from './my-module' //  we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export

console.log(myExportedVar);        // will log 123

Meiner Meinung nach ist es wichtig , dass der Standardexport mit JEDEM Namen importiert werden kann!

Wenn es eine Datei foo.js gibt, die standardmäßig exportiert:

export default function foo(){}

Es kann in bar.js importiert werden mit:

import bar from 'foo'
import Bar from 'foo' //or ANY other name you wish to assign to this import

Es gibt zwei verschiedene Exportarten: Name und Standard . Sie können mehrere benannte Exporte pro Modul haben, aber nur einen Standardexport. Jeder Typ entspricht einem der oben genannten. Quelle: MDN

Benannter Export

export class NamedExport1 { }

export class NamedExport2 { }

// import class
import { NamedExport1 } from 'path-to-file'
import { NamedExport2 } from 'path-to-file'

// OR you can import all at once
import * as namedExports from 'path-to-file'

Standardexport

export default class DefaultExport1 { }

// import class
import DefaultExport1 from 'path-to-file' // no curly braces {}

// Sie können einen anderen Namen für den Standardimport verwenden

import Foo from 'path-to-file' // this will assign any default export to Foo.

Die Standardeinstellung export wird verwendet, um eine einzelne Klasse, Funktion oder ein Grundelement zu exportieren.

export default function () {} kann verwendet werden, wenn die Funktion keinen Namen hat. Es kann nur einen Standardexport in einer Datei geben.

Weiterlesen