JavaScript ES6中，export與export default

居老師的狗子發表於2019-03-08
JavaScriptExport
自述：
本來是對new Vue（）和export default比較懵的，查了一下，發現我理解錯了兩者的關係，也沒意識到export與export default的區別，先簡單的記錄一下基本概念，後續再繼續瞭解。
一、概述
在 ES6 之前，社群制定了一些模組載入方案，最主要的有 CommonJS 和 AMD 兩種。前者用於伺服器，後者用於瀏覽器。ES6 在語言標準的層面上，實現了模組功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規範，成為瀏覽器和伺服器通用的模組解決方案。
ES6中，在JavaScript ES6中，export與export default均可用於匯出常量、函式、檔案、模組等。
二、export命令

模組功能主要由兩個命令構成：export和import。export命令用於規定模組的對外介面，import命令用於輸入其他模組提供的功能。

一個模組就是一個獨立的檔案。該檔案內部的所有變數，外部無法獲取。如果你希望外部能夠讀取模組內部的某個變數，就必須使用export關鍵字輸出該變數。

下面是一個js檔案，裡面使用export命令來輸出變數，函式或類（class）

//a.js
export var str = "export的內容";
export  var year =2019;
export function message(sth) {
  return sth;
}

除了上述的寫法，還有一種推薦使用的，因為這樣就可以在指令碼尾部，一眼看清楚輸出了哪些變數。

  
//a.js
 var str = "export的內容";
 var year =2019;
 function message(sth) {
  return sth;
}
export {str,year,message};

通常情況下，export輸出的變數就是本來的名字，但是可以使用as關鍵字重新命名。

//a.js
 var str = "export的內容";
 var year =2019;
 function message(sth) {
  return sth;
}
export {
str as newname1,
year as newname2,
message as newname3
};

上面程式碼使用as關鍵字，重新命名了變數str和year，以及函式message的對外介面。

 三、import命令
使用export命令定義了模組的對外介面以後，其他 JS 檔案就可以通過import命令載入這個模組。
//b.js
import { str,year, message } from './a';
 //也可以分開寫兩次，匯入的時候帶花括號，將每個變數函式名寫清楚

上面程式碼的import命令，用於載入a.js檔案,引入後便可以在b.js檔案中使用a.js檔案中的變數、函式或類等。import命令接受一對大括號，裡面指定要從其他模組匯入的變數名。大括號裡面的變數名，必須與被匯入模組（a.js）對外介面的名稱相同。

如果想為輸入的變數重新取一個名字，import命令要使用as關鍵字，將輸入的變數重新命名。
//b.js
import { str as newname1,
year as newname2,
message as newname3
} from './a';

import後面的from指定模組檔案的位置，可以是相對路徑，也可以是絕對路徑，.js字尾可以省略。

如果只是模組名，不帶有路徑，那麼必須有配置檔案，告訴 JavaScript 引擎該模組的位置。

 
//import引入一個依賴包，不需要相對路徑。
import axios from ‘axios’;
//import 引入一個自己寫的js檔案，是需要相對路徑的。
import AppService from ‘./appService’;

四、export default 命令

export default命令用於指定模組的預設輸出。顯然，一個模組只能有一個預設輸出，因此export default命令只能使用一次。所以，import命令後面才不用加大括號，因為只可能唯一對應export default命令。一個檔案內不能有多個export default。

  
//a.js
const str = "export default的內容";
export default str

 

在另一個檔案中的匯入方式： 
//b.js 
import StrFile from 'a'; 
//匯入的時候沒有花括號
//本質上，a.js檔案的export default輸出一個叫做default的變數，然後系統允許你引入的時候為它取任意名字。

五、簡述區別

1.export與export default均可用於匯出常量、函式、檔案、模組等
2.在一個檔案或模組中，export、import可以有多個，export default僅有一個
3.通過export方式匯出，在匯入時要加{ }，export default則不需要，並可以起任意名稱
4.(1) 輸出單個值，使用export default
    (2) 輸出多個值，使用export
    (3) export default與普通的export不要同時使用
 
 
 
 
 
 

相關文章