Що таке "експорт за замовчуванням" у JavaScript?

Файл: SafeString.js

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

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

export default SafeString;

Я ніколи export defaultраніше не бачив . Чи є якісь подібні речі для export defaultцього, що може бути простіше зрозуміти?

Це частина модульної системи ES6, описана тут . У цій документації є корисний приклад:

Якщо модуль визначає експорт за замовчуванням:

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

то ви можете імпортувати цей експорт за замовчуванням, опустивши фігурні дужки:

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

Оновлення: Станом на червень 2015 року система модулів визначена у § 15.2, а exportсинтаксис, зокрема, визначений у § 15.2.3 специфікації ECMAScript 2015.

export default використовується для експорту одного класу, функції або примітиву з файлу сценарію.

Експорт також може бути записаний як

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

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

Це використовується для імпорту цієї функції в інший файл сценарію

Скажіть у app.js , ви можете

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

Трохи про експорт

Як випливає з назви, він використовується для експорту функцій, об'єктів, класів або виразів із файлів скриптів або модулів

Utiliites.js

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

Це можна імпортувати і використовувати як

App.js

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

Або

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

Коли використовується експорт за замовчуванням, це набагато простіше. Файли сценаріїв просто експортують одне. cube.js

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

і використовується як App.js

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

export default function(){}може використовуватися, коли функція не має імені. У файлі може бути лише один експорт за замовчуванням. Альтернативою є названий експорт.

На цій сторінці детально export defaultописані, а також інші подробиці про модулі, які мені здаються дуже корисними.

Я пишу цей пост, тому що (я припускаю, що я втомився) я не зовсім зрозумів ані MDN, ані опис інших людей, а найкращий спосіб зрозуміти щось - навчити його іншим людям. Просто я не бачу простої відповіді на питання.

Що таке "експорт за замовчуванням" у JavaScript?

У експорті за замовчуванням назва імпорту абсолютно незалежна, і ми можемо використовувати будь-яке ім’я, яке нам подобається.

Проілюструю цей рядок простим прикладом.

Скажімо, у нас є 3 модулі та 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>

Вихід:

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!

Тож довше пояснення :

"експортувати за замовчуванням" використовується, якщо потрібно експортувати одну модуль для модуля.

Отже, що важливо - це "імпорт блабла з" ./modul3.js '"- ми могли б сказати замість цього:

"імпортувати pamelanderson з './modul3.js", а потім pamelanderson (); Це буде добре працювати, коли ми використовуємо "експортувати за замовчуванням", і в основному це все - це дозволяє нам називати це все, що нам подобається, коли це за замовчуванням .

Ps Якщо ви хочете перевірити приклад - спершу створіть файли, а потім увімкніть CORS у браузері -> якщо ви використовуєте тип firefox в URL-адресі браузера: about: config -> Пошук "privacy.file_unique_origin" -> змінити це "false" -> відкрити index.html -> натиснути F12, щоб відкрити консоль і побачити вихід -> Насолоджуйтесь і не забудьте повернути настройки заздалегідь за замовчуванням.

Ps2 Вибачте за нерозумні імена змінної

Більше інформації @ link2medium , link2mdn1 , link2mdn2

Як пояснено на цій сторінці MDN

Є два різні типи експорту, іменовані та за замовчуванням. Ви можете мати кілька імпортованих експортів на модуль, але лише один експорт за замовчуванням [...] Іменований експорт корисний для експорту кількох значень. Під час імпорту обов'язково потрібно використовувати те саме ім'я відповідного об'єкта. Але експорт за замовчуванням можна імпортувати з будь-яким ім'ям

Наприклад:

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

На мою думку, важливим щодо експорту за замовчуванням є те, що його МОЖНО імпортувати з будь-яким ім'ям!

якщо є файл foo.js, який експортує за замовчуванням:

export default function foo(){}

його можна імпортувати в bar.js, використовуючи:

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

Є два різні типи експорту, іменовані та за замовчуванням . Ви можете мати кілька імпортованих експортів на модуль, але лише один експорт за замовчуванням. Кожному типу відповідає одне з перерахованих вище. Джерело: MDN

Названий експорт

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.

експорт за замовчуванням використовується для експорту одного класу, функції або примітиву.

функція експорту за замовчуванням () {} може використовуватися, коли функція не має імені. У файлі може бути лише один експорт за замовчуванням.

читати більше