"ค่าเริ่มต้นการส่งออก" ใน 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!

อัปเดต:ณ เดือนมิถุนายน 2558 ระบบโมดูลถูกกำหนดใน§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!

ดังนั้นคำอธิบายที่ยาวกว่าคือ :

'การส่งออกเริ่มต้น' จะใช้หากคุณต้องการส่งออกสิ่งเดียวสำหรับโมดูล

ดังนั้นสิ่งที่สำคัญคือ "import blablaจาก './modul3.js'" - เราสามารถพูดแทน:

"นำเข้าpamelandersonจาก './modul3.js" และจากนั้น pamelanderson (); นี้จะทำงานได้ดีเมื่อเราใช้ 'เริ่มต้นการส่งออกและพื้นนี้ก็คือ - มันช่วยให้เราสามารถตั้งชื่อมันว่าสิ่งที่เราชอบเมื่อมันเป็นค่าเริ่มต้น

ปล. หากคุณต้องการทดสอบตัวอย่าง - สร้างไฟล์ก่อนจากนั้นอนุญาตCORSในเบราว์เซอร์ -> ถ้าคุณใช้ประเภท firefox ใน url ของเบราว์เซอร์: about: config -> ค้นหา "privacy.file_unique_origin" -> change เป็น "false" -> open index.html -> กด F12 เพื่อเปิดคอนโซลและดูผลลัพธ์ -> สนุกและอย่าลืมคืนค่า cors กลับไปเป็นค่าเริ่มต้น

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.

การส่งออกเริ่มต้นจะใช้ในการส่งออกชั้นเดียวฟังก์ชั่นหรือดั้งเดิม

ฟังก์ชั่นเริ่มต้นการส่งออก () {} สามารถใช้เมื่อฟังก์ชั่นไม่มีชื่อ สามารถส่งออกเริ่มต้นหนึ่งไฟล์เท่านั้น

อ่านเพิ่มเติม