Wat is “standaard exporteren” in JavaScript?

Bestand: SafeString.js

// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}
SafeString.prototype.toString = function() {
  return "" + this.string;
};
export default SafeString;

Ik heb nog nooit eerder export defaultgezien. Zijn er gelijkwaardige dingen voor export defaultdie gemakkelijker te begrijpen zijn?

Antwoord 1, autoriteit 100%

Het maakt deel uit van het ES6-modulesysteem, hier beschreven. Er is een nuttig voorbeeld in die documentatie, ook:

Als een module een standaard export definieert:

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

dan kun je die standaard export importeren door de accolades weg te laten:

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

Update:vanaf juni 2015 is het modulesysteem gedefinieerd in §15.2en de exportsyntaxis in het bijzonder is gedefinieerd in §15.2.3van de ECMAScript 2015-specificatie.

Antwoord 2, autoriteit 38%

export defaultwordt gebruikt om een ​​enkele klasse, functie of primitief uit een scriptbestand te exporteren.

De export kan ook worden geschreven als

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

Dit wordt gebruikt om deze functie te importeren in een ander scriptbestand

Zeg in app.js , u kunt

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

een beetje over export

Zoals de naam zegt, wordt het gebruikt om functies, objecten, klassen of uitdrukkingen uit scriptbestanden of modules

te exporteren

utiliites.js

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

Dit kan worden geïmporteerd en gebruikt als

app.js

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

of

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

Wanneer exportinstelling wordt gebruikt, is dit veel eenvoudiger. Scriptbestanden exporteren slechts één ding.
CUBE.JS

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

en gebruikt als
app.js

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

Antwoord 3, autoriteit 17%

export default function(){}kan worden gebruikt als de functie geen naam heeft. Er kan slechts één standaardexport in een bestand zijn. Het alternatief is een benoemde export.

Deze paginabeschrijft export defaultin detail, evenals andere details over modules die ik erg nuttig vond.

Antwoord 4, autoriteit 15%

Wat is “standaard exporteren” in JavaScript?

In standaard export is de naamgeving van import volledig onafhankelijk en kunnen we elke gewenste naam gebruiken.

Ik zal deze regel illustreren met een eenvoudig voorbeeld.

Stel dat we drie modules hebben en een index.html-bestand:

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

Bestand modul.js

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

Bestand 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!");
}

Bestand 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>

De uitvoer is:

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!

Dus de langere uitleg is :

‘Export Standaard’ wordt gebruikt als u een enkel ding voor een module wilt exporteren.

Dus het ding dat belangrijk is is “import blabla van ‘./modul3.js'” – we kunnen in plaats daarvan zeggen:

“Import Pamelanderson van ‘./modul3.js” en dan pamelanderson();. Dit zal prima werken wanneer we ‘exporteerstandaard’ gebruiken en eigenlijk is dit het – Hiermee kunnen we het noemen wat we leuk vinden als het standaard is.

PS: Als u het voorbeeld wilt testen – maak eerst de bestanden, en laat u CORS in de browser – & GT; Als u Firefox-type gebruikt in de URL van de browser: Over: Config – & GT; Zoek naar “privacy.file_unique_origin” – & GT; verander het naar “false” – & GT; Open Index.html – & GT; Druk op F12 om de console te openen en zie de uitvoer – & GT; Geniet en vergeet niet om de instellingen van de COR’s terug te sturen.

P.S.2: Sorry voor de dwaze variabele naamgeving

Meer informatie staat in link2mediumen link2mdn.

Antwoord 5, autoriteit 4%

Zoals uitgelegd op deze MDN-pagina

Er zijn twee verschillende soorten export, genaamd en standaard. Jij kan
meerdere benoemde exports per module hebben, maar slechts één standaard
export[…]Benoemde exports zijn handig om meerdere waarden te exporteren. Gedurende
de import, is het verplicht om dezelfde naam te gebruiken van de corresponderende
object.Maar een standaardexport kan met elke naam worden geïmporteerd

Bijvoorbeeld:

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

Antwoord 6, autoriteit 2%

Naar mijn mening is het belangrijkevan de standaardexport dat deze kanworden geïmporteerd met elkenaam!

Als er een bestand is, foo.js, dat standaard exporteert:

export default function foo(){}

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'

export default class DefaultExport1 { }
// Import class
import DefaultExport1 from 'path-to-file' // No curly braces - {}

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

//file functions.js
export default function subtract(x, y) {
  return x - y;
}
//importing subtract in another file in the same directory
import myDefault from "./functions.js";