Apa itu "standar ekspor" dalam javascript?

File: SafeString.js

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

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

export default SafeString;

Saya belum pernah melihat export defaultsebelumnya. Apakah ada hal yang setara untuk export defaultitu yang lebih mudah dimengerti?

Itu bagian dari sistem modul ES6, dijelaskan di sini . Ada contoh bermanfaat dalam dokumentasi itu, juga:

Jika modul mendefinisikan ekspor standar:

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

maka Anda dapat mengimpor ekspor default itu dengan menghilangkan kurung kurawal:

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

Pembaruan: Pada Juni 2015, sistem modul didefinisikan dalam §15.2 dan exportsintaksis secara khusus didefinisikan dalam §15.2.3 dari spesifikasi ECMAScript 2015.

export default digunakan untuk mengekspor satu kelas, fungsi atau primitif dari file skrip.

Ekspor juga dapat ditulis sebagai

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

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

Ini digunakan untuk mengimpor fungsi ini dalam file skrip lain

Katakan di app.js , Anda bisa

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

Sedikit tentang ekspor

Seperti namanya, ini digunakan untuk mengekspor fungsi, objek, kelas atau ekspresi dari file skrip atau modul

Utiliites.js

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

Ini dapat diimpor dan digunakan sebagai

App.js

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

Atau

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

Ketika standar ekspor digunakan, ini jauh lebih sederhana. File skrip hanya mengekspor satu hal. cube.js

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

dan digunakan sebagai App.js

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

export default function(){}dapat digunakan saat fungsi tidak memiliki nama. Hanya ada satu ekspor standar dalam file. Alternatifnya adalah ekspor bernama.

Halaman ini menjelaskan export defaultsecara mendetail serta perincian lainnya tentang modul yang menurut saya sangat membantu.

Saya menulis posting ini karena (saya menganggap saya lelah) saya tidak mengerti atau MDN, atau deskripsi orang lain dan cara terbaik untuk memahami sesuatu adalah dengan mengajarkannya kepada orang lain. Hanya saja saya tidak melihat jawaban sederhana dari pertanyaan itu.

Apa itu "standar ekspor" dalam javascript?

Dalam ekspor default, penamaan impor sepenuhnya independen dan kami dapat menggunakan nama apa pun yang kami suka.

Saya akan menggambarkan garis ini dengan contoh sederhana.

Katakanlah kita memiliki 3 modul dan 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>

Outputnya adalah:

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!

Jadi penjelasan yang lebih panjang adalah :

'export default' digunakan jika Anda ingin mengekspor satu hal untuk sebuah modul.

Jadi hal yang penting adalah "impor blabla dari './modul3.js'" - kita bisa mengatakan sebaliknya:

"impor pamelanderson dari './modul3.js" dan kemudian pamelanderson (); Ini akan berfungsi dengan baik ketika kita menggunakan 'default ekspor' dan pada dasarnya ini dia - memungkinkan kita untuk menamainya apa pun yang kita suka ketika itu default .

Ps Jika Anda ingin menguji contoh - membuat file terlebih dahulu, maka izinkan CORS di browser -> jika Anda menggunakan tipe firefox di url browser: about: config -> Search for "privacy.file_unique_origin" -> ubah ke "false" -> open index.html -> tekan F12 untuk membuka konsol dan lihat hasilnya -> Nikmati dan jangan lupa untuk mengembalikan pengaturan kors ke default.

Ps2 Maaf untuk penamaan variabel konyol

Info lebih lanjut @ link2medium , link2mdn1 , link2mdn2

Seperti yang dijelaskan di halaman MDN ini

Ada dua jenis ekspor, bernama dan default. Anda dapat memiliki beberapa ekspor bernama per modul tetapi hanya satu ekspor standar [...] Ekspor yang dinamai berguna untuk mengekspor beberapa nilai. Selama impor, itu wajib untuk menggunakan nama yang sama dari objek yang sesuai. Tapi ekspor standar dapat diimpor dengan nama apa pun

Sebagai contoh:

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

Menurut pendapat saya yang penting tentang ekspor default adalah, bahwa BISA diimpor dengan nama APAPUN!

jika ada file foo.js yang mengekspor default:

export default function foo(){}

itu dapat diimpor di bar.js menggunakan:

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

Ada dua jenis ekspor, bernama dan default . Anda dapat memiliki beberapa ekspor bernama per modul tetapi hanya satu ekspor standar. Setiap jenis sesuai dengan salah satu di atas. Sumber: MDN

Ekspor Bernama

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'

Ekspor Default

export default class DefaultExport1 { }

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

// Anda dapat menggunakan nama yang berbeda untuk impor default

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

standar ekspor digunakan untuk mengekspor satu kelas, fungsi atau primitif.

ekspor fungsi default () {} dapat digunakan ketika fungsi tidak memiliki nama. Hanya ada satu ekspor standar dalam file.

Baca lebih banyak