ES6中export default 命令的詳解

我們知道在學習vue的時候export default{}是不可缺少的，但是它的含義我們必須理解。

export default{}這是在復用元件的時候用到的。假設我們寫了乙個單頁面元件 a 檔案，而在另乙個檔案 b 裡面需要用到它，那麼就要用 es6 的 import/export 語法，在檔案 a 中定義輸出介面 export，在檔案 b 中引入 import，把引入的元件用起來，這樣就可以復用元件 a 去配合檔案 b 生成 html 頁面了。

為了加深印象特在此總結如下

使用import命令的時候，使用者需要知道所要載入的變數名或函式名，否則無法載入。但是，使用者肯定希望快速上手，未必願意閱讀文件，去了解模組有哪些屬性和方法。為了給使用者提供方便，讓他們不用閱讀文件就能載入模組，就要用到export default命令，為模組指定預設輸出。

1、基本用法例如

這是乙個模組檔案export-default.js，它的預設輸出是乙個函式
export default function ()


import customname from './export-default';
customname(); //'foo'
//這是的import命令，可以用任意名稱指向export-default.js輸出的方法，這時就不需要知道原模組輸出的函式名。
需要注意的是，這時import命令後面，不使用大括號。

其他模組載入該模組時，import命令可以為該匿名函式指定任意名字。

2、export default命令用在非匿名函式前

// export-default.js
export default function foo() 
// 或者寫成
function foo() 
export default foo;
//上面**中，foo函式的函式名foo，在模組外部是無效的。載入的時候，視同匿名函式載入。

3、export 加default和加的區別

// 第一組
export default function crc32() 
import crc32 from 'crc32'; // 輸入
// 第二組
export function crc32() ;
import from 'crc32'; // 輸入

第一組是使用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。所以，最後一種寫法會報錯。

5、因為export default 命令的本質是將後面的值，賦給default變數，所以可以直接將乙個值寫在export default之後

// 正確 export default 42; // 報錯原因這一句報錯是因為沒有指定對外的介面，而前一句指定外對介面為default。

export 42;

6、export default命令，輸入模組時就非常直觀了，以輸入 lodash 模組為例

import _ from 'lodash';

如果想在一條import語句中，同時輸入預設方法和其他介面，可以寫成下面這樣

import _,  from 'lodash';

對應上面**的export語句如下。

export default function (obj) 
export function each(obj, iterator, context) 
export ;//暴露出foreach介面，預設指向each介面，即foreach和each指向同乙個方法。

7、export default也可以用來輸出類

// myclass.js
export default class 
// main.js
import myclass from 'myclass';
let o = new myclass();

ES6中export default 命令的詳解

ES6系列 ES6簡介

ES6系列詳解ES6中的Map

ES6學習筆記之ES6中的模組

ES6中export default 命令的詳解

ES6系列 ES6簡介

ES6系列 詳解ES6中的Map

ES6學習筆記之ES6中的模組

相關推薦

ES6系列詳解ES6中的Map