Xuất khẩu mặc định là gì trong javascript?

Tệp: SafeString.js

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

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

export default SafeString;

Tôi chưa bao giờ nhìn thấy export defaulttrước đây. Có bất kỳ công cụ tương đương cho export defaultđiều đó có thể dễ hiểu hơn?

Đây là một phần của hệ thống mô-đun ES6, được mô tả ở đây . Có một ví dụ hữu ích trong tài liệu đó, cũng:

Nếu một mô-đun xác định xuất mặc định:

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

sau đó bạn có thể nhập xuất mặc định đó bằng cách bỏ qua các dấu ngoặc nhọn:

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

Cập nhật: Kể từ tháng 6 năm 2015, hệ thống mô-đun được xác định trong §15.2 và exportđặc biệt cú pháp được xác định trong §15.2.3 của đặc tả ECMAScript 2015.

export default được sử dụng để xuất một lớp, hàm hoặc nguyên thủy từ tệp script.

Xuất khẩu cũng có thể được viết là

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

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

Điều này được sử dụng để nhập chức năng này trong một tập tin kịch bản khác

Nói trong app.js , bạn có thể

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

Một chút về xuất khẩu

Như tên đã nói, nó được sử dụng để xuất các hàm, đối tượng, lớp hoặc biểu thức từ tệp tập lệnh hoặc mô-đun

Utiliites.js

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

Điều này có thể được nhập khẩu và sử dụng như

App.js

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

Hoặc là

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

Khi xuất mặc định được sử dụng, điều này đơn giản hơn nhiều. Tập tin script chỉ xuất một thứ. cube.js

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

và được sử dụng như App.js

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

export default function(){}có thể được sử dụng khi hàm không có tên. Chỉ có thể có một xuất mặc định trong một tệp. Thay thế là xuất khẩu có tên.

Đây trang mô tả export defaultmột cách chi tiết cũng như các chi tiết khác về module mà tôi tìm thấy rất hữu ích.

Tôi đang viết bài này bởi vì (tôi cho rằng tôi mệt mỏi) Tôi không hiểu lắm về MDN, cũng không phải người khác mô tả và cách tốt nhất để hiểu điều gì đó là dạy nó cho người khác. Chỉ là tôi không thấy một câu trả lời đơn giản cho câu hỏi.

Xuất khẩu mặc định là gì trong javascript?

Trong xuất khẩu mặc định, việc đặt tên nhập là hoàn toàn độc lập và chúng tôi có thể sử dụng bất kỳ tên nào chúng tôi muốn.

Tôi sẽ minh họa dòng này với một ví dụ đơn giản.

Hãy nói rằng chúng tôi có 3 mô-đun và một 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>

Đầu ra là:

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!

Vì vậy, lời giải thích dài hơn là :

'xuất mặc định' được sử dụng nếu bạn muốn xuất một thứ duy nhất cho mô-đun.

Vì vậy, điều quan trọng là "nhập blabla từ './modul3.js'" - chúng ta có thể nói thay thế:

"nhập pamelanderson từ './modul3.js" và sau đó pamelanderson (); Điều này sẽ hoạt động tốt khi chúng tôi sử dụng 'xuất mặc định' và về cơ bản đây là nó - nó cho phép chúng tôi đặt tên cho nó bất cứ điều gì chúng tôi thích khi nó được mặc định .

Ps Nếu bạn muốn kiểm tra ví dụ - tạo các tệp trước, sau đó cho phép CORS trong trình duyệt -> nếu bạn đang sử dụng loại firefox trong url của trình duyệt: about: config -> Tìm kiếm "Privacy.file_unique_origin" -> thay đổi nó thành "false" -> mở index.html -> nhấn F12 để mở bàn điều khiển và xem đầu ra -> Thưởng thức và đừng quên trả lại cài đặt cors về mặc định.

Ps2 Xin lỗi vì đặt tên biến ngớ ngẩn

Thêm thông tin @ link2medium , link2mdn1 , link2mdn2

Như đã giải thích trên trang MDN này

Có hai loại xuất khác nhau, được đặt tên và mặc định. Bạn có thể có nhiều xuất khẩu được đặt tên cho mỗi mô-đun nhưng chỉ một xuất khẩu mặc định [...] Xuất khẩu được đặt tên là hữu ích để xuất một số giá trị. Trong quá trình nhập, bắt buộc phải sử dụng cùng tên của đối tượng tương ứng. Nhưng xuất khẩu mặc định có thể được nhập với bất kỳ tên nào

Ví dụ:

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

Theo ý kiến ​​của tôi, điều quan trọng về xuất khẩu mặc định là nó có thể được nhập với bất kỳ tên nào!

nếu có tệp foo.js xuất mặc định:

export default function foo(){}

nó có thể được nhập vào bar.js bằng cách sử dụng:

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

Có hai loại xuất khác nhau, được đặt tên và mặc định . Bạn có thể có nhiều lần xuất được đặt tên cho mỗi mô-đun nhưng chỉ có một lần xuất mặc định. Mỗi loại tương ứng với một trong những điều trên. Nguồn: MDN

Xuất khẩu có tên

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'

Xuất mặc định

export default class DefaultExport1 { }

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

// bạn có thể sử dụng một tên khác cho nhập mặc định

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

xuất mặc định được sử dụng để xuất một lớp, hàm hoặc nguyên thủy.

Hàm mặc định xuất () {} có thể được sử dụng khi hàm không có tên. Chỉ có thể có một xuất mặc định trong một tệp.

đọc thêm