ES6模組規範

1.1 ES6規範說明

歷史上，JavaScript 一直沒有模組（module）體系，無法將一個大程式拆分成互相依賴的小檔案，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的require、Python 的import，甚至就連 CSS 都有@import，但是 JavaScript 任何這方面的支援都沒有，這對開發大型的、複雜的專案形成了巨大障礙。

自從ES6的推出，ES6定義了自己的模組化規範，使用export和import匯出匯入實現模組化管理

1.2 基本語法

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

1.21暴露模組

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

export：它是用來定義模組的，可以匯出物件、函式、類、字串等等

（1）單獨匯出資料

export var name = 'guo';

export function foo(x, y){}

（2）或者直接匯出一個物件(推薦使用)

// person.js

const name = 'guo';

const age = '18';

const addr = '過青年';

export { name, age, addr };
 

（3）使用as重新命名，並且可以利用它將資料暴露多次

// person.js

const name = 'guo';

const age = '18';

export {

	name as firstName,

	age as oneAge,

    age as twoAge

}

（4）使用export default匯出資料；export default其實是匯出一個叫做default的變數，所以其後面不能跟變數宣告語句；

​ 預設暴露只能暴露一次，暴露多次，後面的預設暴露覆蓋前面的預設暴露

// guo.js

// export default var name = 'guo'   錯誤
 

export default name = 'guo';

1.22引入模組

1）一般用法

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

（2）As用法

import { name as personName } from './person.js';

import命令具有提升效果，會提升到整個模組的頭部，首先執行；如下也不會報錯：

getName();

import { getName } from 'person_module';

（3）整體模組載入 *

//person.js

export name = 'xixi';

export age = 23;

//逐一載入

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

//整體載入

import * as person from './person.js';

console.log(person.name);

console.log(person.age);

（4）載入export default 匯出的資料，不需要加{}號

import guo from './person.js';

總結

• 使用export和export default向外暴露資料，使用import獲取資料
• 使用as重新命名，使用*符號整體載入
• import命令具有提升效果，會提升到整個模組的頭部
• export default以最後一次暴露為準，且暴露的資料載入時，不需要加入{ }號