1. 程式人生 > >es6模組命令

es6模組命令

es6的模組命令分為export命令和import命令,其中export命令用於匯出變數,import命令用於引入變數。

1.1

a檔案:

export var name = "name";
export var age = 1;

以上a檔案中使用export命令匯出了name和age變數。下面,將在b檔案中使用import命令進行引入

b檔案:

import {name,age} from './a.js';

console.log(name) //name
console.log(age) //1

以上b檔案中使用import命令引入變數,變數需要放在花括號當中,from關鍵字後面指定檔案的路徑。.js字尾可省略。

1.2 第二種更加常用的變數匯出的寫法

a檔案:

var name = "name";
var age = 1;

export {name,age};

即使用花括號包裝起要輸入的變數。

1.3 使用as關鍵字重新命名

export {name as myName,age as myName};

import {myName,myName} from './a.js';

如上所示,使用as關鍵字可以對匯出的變數進行重新命名,對於匯入的變數,同樣也可以使用as命令

export {name,age};

import {name aas name1,age as age1} from './a.js';

1.4 錯誤的變數匯出方式:

var age = 1;
export age; 錯誤
export 1; 錯誤
export var age = 1; 正確
export {age}; 正確

function fn () {}
export fn; 錯誤
export function fn () {} 正確
export {fn} 正確

1.5 模組匯出的變數具有動態性

a檔案:

var name = "name";
export {name};
setTimeout(() => name = "age", 1000);

b檔案:

import {name} from './a.js';
console.log(name) //name
setTimeout(() => console.log(name),1500) //age

上面程式碼中,a檔案中的變數在匯出後被修改了,而b檔案中依然能夠獲取到改變後的值。

1.6 變數匯出的位置

變數的匯出應該在模組的頂層作用域中。

var name = "name";

function fn () {
	export {name} //錯誤
}

fn()

如上在函式內匯出變數,將報錯。

1.7 變數提升效果

console.log(name) //name
import {name} from './a.js';

以上程式碼不會報錯。因為import會最先被執行。

1.8、使用*字元引入變數。

使用*字元可以將模組中所有匯出的變數匯入到指定的變數中。

a檔案:

var name = "name";
var age = "age";
var sex = "sex";
export {name,age,sex}

b檔案:

import * as varibles from './a.js';

console.log(varibles.name) //name
console.log(varibles.age) //age
console.log(varibles.sex) //sex

需要注意的是,不可對varibles進行修改,否則將報錯,如下:

varibles.name = 1; 錯誤

1.9、export default命令

export default命令與export命令一樣用於匯出變數。不同的是,export可以使用多次。在匯入變數的時候,需要知道輸入的變數名稱才能進匯入,而export default只能使用一次,在匯入變數的時候,使用者不需要知道模組內部匯出的變數名稱。

a檔案:

var name = "name";
export default name;

b檔案:

import varibles from './a.js';
console.log(varibles) //name

可見,export default在匯出變數的時候,不需要像export一樣使用花括號。在引入變數的時候也一樣。
export default命令最大的好處就是不需要知道模組內部匯出的變數名是什麼,可以直接使用自己定義的變數名。這樣就不需要麻煩地去檢視檔案中匯出的變數名了。

需要注意的是,export default後面不能跟宣告變數的語句,因為export default命令實質上是輸出了一個叫default的變數,然後允許你在引入的時候為這個變數取任意名稱。

export default var name = 1; //錯誤
export default 1; 正確

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

2.0 同時引入一個模組中使用export default和export匯出的變數。

a檔案:

var name = "name";
var age = 1;
export default name;
export {age};

b檔案:

import varibles, {age} from './a.js';
console.log(age) //1
console.log(varibles) //name

2.1 import和export的複合寫法

export {name,age} from 'xxx';

上面的寫法等同於:

import {name,age} from 'xxx';

export {name, age};

2.2 整體輸出

export * from 'xxx';	

2.3 預設介面

export {default} from 'xxx';

2.4 具名介面改為預設介面

export {name as default} from 'xxx';

等同於:

import {name} from 'xxx';
export default name;

2.5 import不可動態載入模組

var path = './' + fileName;
import xxx from path; 錯誤!

if (true) {
  import xxx from 'xxx' 錯誤!
}

function fn () {
  import xxx from xxxx; 錯誤!
}

執行上面的程式碼都將報錯,因為引擎處理import語句是在編譯時,而不是在程式碼執行的時候,所以這些import語句都毫無意義,會直接報錯。如果需要使用動態載入,可以考慮使用node的require方法。而目前有一個提案,提案提供了import()方法讓es6的模組功能實現動態載入。