es6 import 與 export

一、export 命令

export 命令用於規定模塊的對外接口。

一個模塊就是一個獨立的文件。該文件內部全部的變量，外部沒法獲取。要想外部可以讀取模塊內部的某個變量，就必須使用 export 關鍵字輸出該變量。

 

語法：

 1 export { name1, name2, …, nameN };
 2 export { variable1 as name1, variable2 as name2, …, nameN };
 3 export let name1, name2, …, nameN; // also var
 4 export let name1 = …, name2 = …, …, nameN; // also var, const
 5 
 6 export default expression;
 7 export default function (…) { … } // also class, function*
 8 export default function name1(…) { … } // also class, function*
 9 export { name1 as default, … };
10 
11 export * from …;
12 export { name1, name2, …, nameN } from …;
13 export { import1 as name1, import2 as name2, …, nameN } from …;

nameN ---> 導出的標識符（用來被其它腳本的 import 導入）

//aa.js

export var firstName = "Muhan"
export var lastName = "Wu"
export var year = 2017

在 aa.js 文件中，保存了用戶信息，es6 將其視爲一個模塊，用 export 命令對外輸出 3 個變量。咱們還能夠用另一種寫法來實現

//aa.js

var firstName = "Muhan"
var lastName = "Wu"
var year = 2017

export {firstName, lastName, year}

這種寫法在 export 命令後面使用大括號指定所要輸出的一組變量，應該被優先考慮，由於這樣就能夠在腳本尾部，一眼看清楚輸出了哪些變量

 

export 命令除了輸出變量，還能夠輸出函數或類（Class）

在 my-module.js 模塊裏，咱們能夠這樣導出

// my-module.js

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

const foo = Math.PI + Math.SQRT2
export {foo}

在其它腳本，咱們能夠這樣導入：

import {cube, foo} from './my-module.js'

console.log( cube(3) ) // 27
console.log( foo )  // 4.555806215962888

一般狀況下，export 輸出的變量就是原本的名字，可是可使用 as 關鍵字來重命名

// my-module.js

function aa () {
  console.log('My name is Kobe Bryant')
}

function bb () {
  console.log('I am one of the best players in NBA history')
}

export {
  aa as personName,
  bb as selfIntro,
  bb as selfEvaluation

上面代碼使用 as 關鍵字，重命名了函數 aa 和 bb 的對外接口。重命名後，bb 能夠用不一樣的名字輸出兩次

import {personName, selfIntro, selfEvaluation} from './my-module'

personName()  // My name is Kobe Bryant
selfIntro()   // I am one of the best players in NBA history
selfEvaluation()   // I am one of the best players in NBA history

 

注意：

（1）、export 命令規定的對外接口，必須與模塊內部的變量創建一一對應的關係

// 報錯，SyntaxError
export 1

// 報錯，SyntaxError
var m = 1
export m

/* ================================= */

// 正確寫法一
export var m = 1


// 正確寫法二
var m = 1
export {m}


// 正確寫法三
var m = 1
export {m as num}

// 報錯
function myFun () {
  // ...
}

export myFun


// 正確寫法一
export function myFun () {
  // ...
}


// 正確寫法二
function myFun () {
  // ...
}

export {myFun}

（2）、export 命令能夠出如今模塊的任何位置，只要處於模塊頂層就能夠。若是處於塊級做用域內，就會報錯（一樣適用於 import 命令）

function foo() {
  export default 'bar' // SyntaxError
}
foo()

// Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level 

 

二、import 命令

import 用於從一個已經導出的外部模塊或另外一個腳本中導入函數，對象或原始類型

使用 export 命令定義了模塊的對外接口之後，其它 js 文件就能夠經過 import 命令加載這個模塊

 

語法：

1 import defaultMember from "module-name"; 
2 import * as name from "module-name"; 
3 import { member } from "module-name"; 
4 import { member as alias } from "module-name"; 
5 import { member1 , member2 } from "module-name"; 
6 import { member1 , member2 as alias2 , [...] } from "module-name"; 
7 import defaultMember, { member [ , [...] ] } from "module-name"; 
8 import defaultMember, * as name from "module-name"; 
9 import "module-name";

defaultMember

將引用從模塊默認導出的名稱

 

module-name

要導入的模塊的名稱

 

name

是將引用導出成員的名稱，指向導入模塊的對象的名稱

 

member，memberN

指定獨立成員，將要導入的導出成員的名稱

 

alias，aliasN

將引用命名導入的名稱

 

// my-module.js

var firstName = "Muhan",
    lastName = "Wu",
    year = 2017;

export {firstName, lastName, year}


// 引用模塊
import {firstName, lastName, year} from './my-module'

console.log('My name is '+firstName+lastName+ ', I am '+year+' years old!')   // My name is MuhanWu, I am 2017 years old!

同 export 命令同樣，若是想爲輸入的變量從新取一個名字，import 命令要使用 as 關鍵字，將輸入的變量重命名

// my-module.js

var aa = "Kobe Bryant"

export {aa}

---------------------------------------------------------------

import {aa as name} from './my-module'

console.log('My name is '+ name)   // My name is Kobe Bryant

注意：

（1）、import 命令具備提高效果，會提高到整個模塊的頭部，首先執行

// my-module.js

var aa = "Kobe Bryant"

export {aa}

------------------------------------------------------

console.log('My name is '+ aa)   // My name is Kobe Bryant

import {aa } from './my-module'

上面的代碼沒有報錯，由於 import 的執行早於 aa的調用

（2）、因爲 import 是靜態執行，因此不能使用表達式和變量，這些只有在運行時才能獲得結果的語法結構

// 報錯
import { 'f' + 'oo' } from 'my_module';

// 報錯
let module = 'my_module';
import { foo } from module;

// 報錯
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

（3）、若是屢次重複執行同一句 import 語句，那麼只會執行一次，不會執行屢次

import { foo } from 'my_module';
import { bar } from 'my_module';

// 等同於
import { foo, bar } from 'my_module';

 

三、export default 命令

從前面的例子能夠看出，使用import命令的時候，用戶須要知道所要加載的變量名或函數名，不然沒法加載。可是，用戶確定但願快速上手，未必願意閱讀文檔，去了解模塊有哪些屬性和方法。

爲了給用戶提供方便，讓他們不用閱讀文檔就能加載模塊，就要用到export default命令，爲模塊指定默認輸出

// my-module.js    默認輸出是一個函數

export default function () {
  console.log('export default')
}

------------------------------------------------------------

// 其餘模塊加載該模塊時，import命令能夠爲該匿名函數指定任意名字

import aaa from './my-module'

aaa()   // export default

上面的 import 命令，能夠用任意名稱指向 my-module.js 輸出的方法，這時就不須要知道原模塊輸出的函數名。須要注意的是，這時 import 命令後面，不適用大括號

export default 命令用在非匿名函數前，也是能夠的

// my-module.js    默認輸出是一個函數

export default function myFun () {
  console.log('Hello World!')
}

// 或者寫成
function myFun () {
  console.log('Hello World!')
}

export default myFun

----------------------------------------------------------------

import myFun from './my-module'

myFun()   // Hello World!

上面代碼中，foo函數的函數名foo，在模塊外部是無效的。加載的時候，視同匿名函數加載。

下面比較一下默認輸出和正常輸出

// 第一組
export default function crc32() { // 輸出
  // ...
}

import crc32 from 'crc32'; // 輸入

// 第二組
export function crc32() { // 輸出
  // ...
};

import {crc32} from 'crc32'; // 輸入

上面代碼的兩組寫法，第一組是使用export default時，對應的import語句不須要使用大括號；第二組是不使用export default時，對應的import語句須要使用大括號

 

一個模塊只能有一個默認輸出，因此 export default 命令只能使用一次，正由於如此，import 命令後面才能夠不用加大括號。本質上，export default就是輸出一個叫作default的變量或方法，而後系統容許你爲它取任意名字。因此，下面的寫法是有效的。

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同於
// export default add;

// app.js
import { default as xxx } from 'modules';
// 等同於
// import xxx from 'modules';

下面代碼中，export default a的含義是將變量a的值賦給變量default。因此，最後一種寫法會報錯。

// 正確
export var a = 1;

// 正確
var a = 1;
export default a;

// 錯誤
export default var a = 1;

一樣地，由於export default本質是將該命令後面的值，賦給default變量之後再默認，因此直接將一個值寫在export default以後

// 正確
export default 42;  // 指定對外接口爲 default

// 報錯
export 42;  // 沒有指定對外的接口

 

注意：import 和 export 目前沒法直接在瀏覽器中實現，而是須要經過轉換器，如：Traceur Compiler、Babel、RollUp或 Webpack