ES6中export default 命令的詳解
export default{}這是在複用元件的時候用到的。假設我們寫了一個單頁面元件 A 檔案,而在另一個檔案 B 裡面需要用到它,那麼就要用 ES6 的 import/export 語法 ,在檔案 A 中定義輸出介面 export ,在檔案 B 中引入 import,把引入的元件用起來,這樣就可以複用元件 A 去配合檔案 B 生成 html 頁面了。
為了加深印象特在此總結如下
使用import命令的時候,使用者需要知道所要載入的變數名或函式名,否則無法載入。但是,使用者肯定希望快速上手,未必願意閱讀文件,去了解模組有哪些屬性和方法。
1、基本用法例如
//export-default.js 這是一個模組檔案export-default.js,它的預設輸出是一個函式
export default function () {
console.log('foo');
}
- 1
- 2
- 3
- 4
//import-default.js
import customName from './export-default';
customName(); //'foo'
//這是的import命令,可以用任意名稱指向export-default.js輸出的方法,這時就不需要知道原模組輸出的函式名。
需要注意的是,這時import 命令後面,不使用大括號。
- 1
- 2
- 3
- 4
- 5
其他模組載入該模組時,import命令可以為該匿名函式指定任意名字。
2、export default命令用在非匿名函式前
// export-default.js
export default function foo() {
console.log('foo');
}
// 或者寫成
function foo() {
console.log('foo');
}
export default foo;
//上面程式碼中,foo函式的函式名foo,在模組外部是無效的。載入的時候,視同匿名函式載入。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
3、export 加default和加的區別
// 第一組
export default function crc32() { // 輸出
// ...
}
import crc32 from 'crc32'; // 輸入
// 第二組
export function crc32() { // 輸出
// ...
};
import {crc32} from 'crc32'; // 輸入
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
第一組是使用export default時,對應的import語句不需要使用大括號;
第二組是不使用export default時,對應的import語句需要使用大括號。
export default命令用於指定模組的預設輸出。顯然,一個模組只能有一個預設輸出,因此export default命令只能使用一次。所以,import命令後面才不用加大括號,因為只可能唯一對應export default命令。
4、export default就是輸出一個叫做default的變數或方法,然後系統允許你為它取任意名字
// 正確
export var a = 1;
// 正確
var a = 1;
export default a;
// 錯誤
export default var a = 1;
//上面程式碼中,export default a的含義是將變數a的值賦給變數default。所以,最後一種寫法會報錯。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
5、因為export default 命令的本質是將後面的值,賦給default變數,所以可以直接將一個值寫在export default之後
// 正確
export default 42;
// 報錯 原因這一句報錯是因為沒有指定對外的介面,而前一句指定外對介面為default。
export 42;
- 1
- 2
- 3
- 4
- 5
6、export default命令,輸入模組時就非常直觀了,以輸入 lodash 模組為例
import _ from 'lodash';
- 1
如果想在一條import語句中,同時輸入預設方法和其他介面,可以寫成下面這樣
import _, { each, each as forEach } from 'lodash';
- 1
對應上面程式碼的export語句如下。
export default function (obj) {
// ···
}
export function each(obj, iterator, context) {
// ···
}
export { each as forEach };//暴露出forEach介面,預設指向each介面,即forEach和each指向同一個方法。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
7、export default也可以用來輸出類
// MyClass.js
export default class { ... }
// main.js
import MyClass from 'MyClass';
let o = new MyClass();
- 1
- 2
- 3
- 4
- 5
- 6