JavaScript ES6中，export與export default

自述：

本來是對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不要同時使用