【ES6】模組化Module — import & export
模組化Module
在ES6
之前，社群制定了一些模組載入方案，最主要的有CommonJS
和AMD
兩種。前者用於伺服器，後者用於瀏覽器。ES6
在語言標準的層面上，實現了模組功能，而且實現得相當簡單，完全可以取代CommonJS
和AMD
規範，成為瀏覽器和伺服器通用的模組解決方案。
ES6
的模組化的基本規則或特點：
JS export
模組功能主要由兩個命令構成：export
和import
。export
命令用於規定模組的對外介面，import
命令用於輸入其他模組提供的功能。
// ES6模組
import { stat, exists, readFile } from 'fs';
export
命令
一個模組就是一個獨立的檔案。該檔案內部的所有變數，外部無法獲取。如果你希望外部能夠讀取模組內部的某個變數，就必須使用export
關鍵字輸出該變數。
- 使用命名匯出
使用命名匯出語法如下，可匯出變數、函式、class
（類）
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName() {...}
export class ClassName {...}
匯出資料，變數前面加上export
關鍵字
export var firstName = 'Michael';
export let lastName = 'Jackson';
export const year = 1958;
// 上面的等價於下面的寫法,以下這種是常見寫法
var firstName = 'Michael';
let lastName = 'Jackson';
const year = 1958;
export {firstName, lastName, year}
匯出函式，函式前面加上export
關鍵字
function multiply(x, y) {
return x * y;
}
export multiply;
// 上面的等價於下面的寫法
export function multiply(x, y) {
return x * y;
};
匯出類，類前面加上export
關鍵字
export class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
- 使用預設匯出
因為export default
命令其實只是輸出一個叫做default
的變數，所以它後面不能跟變數宣告語句，使用預設匯出語法如下，
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
預設匯出（函式）
export default function() {}
預設匯出（類）
export default class {}
-
export default和export區別
-
export與export default均可用於匯出常量、函式、檔案、模組等， 但export default後不可直接跟var、let、const，也就是其後面不能直接跟變數宣告語句 ；
// 正確 export var a = 1; // 正確 var a = 1; export default a; // 將變數a的值賦給變數default // 錯誤 export default var a = 1;
-
因為
export default命令的本質是將後面的值，賦給default變數，所以可以直接將一個值寫在export default之後，但export卻不能。
// 正確
export default 42;
// 報錯（因為沒有指定對外的介面）
export 42;
// 正確
var m = 42;
export {m};
-
可以在其它檔案或模組中通過
import+(常量 | 函式 | 檔案 | 模組)名的方式，將其匯入，以便能夠對其進行使用； -
使用
export default命令，為模組指定預設輸出，這樣就不需要知道所要載入模組的變數名，匯入時可以任意為其取名字。但使用export時，在匯入時必須與被匯入模組對外介面的名稱相同； -
在一個檔案或模組中，
export、import可以有多個，export default僅有一個； -
通過
export方式匯出，在匯入時要加{ }，export default則不需要；
// 使用 export
export const str = "blablabla~";
export function log(sth) {
return sth;
}
// 對應的匯入方式：
import { str, log } from 'a'; //也可以分開寫兩次，匯入的時候帶花括號
// 使用export default
const str = "blablabla~";
export default str;
// 對應的匯入方式：
import str from 'a'; //匯入的時候沒有花括號
- 模組的整體載入
除了指定載入某個輸出值，還可以使用整體載入，即用星號（*
）指定一個物件，所有輸出值都載入在這個物件上面。
// circle.js
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
現在，載入這個模組。
// main.js
import { area, circumference } from './circle';
console.log('圓面積：' + area(4));
console.log('圓周長：' + circumference(14));
上面寫法是逐一指定要載入的方法，整體載入的寫法如下。
import * as circle from './circle';
console.log('圓面積：' + circle.area(4));
console.log('圓周長：' + circle.circumference(14));
import
命令
使用export
命令定義了模組的對外介面以後，其他JS
檔案就可以通過import命令載入這個模組。
- 匯入整個模組的內容
import * as myModule from '/modules/my-module.js';
- 匯入單個匯出
import {myExport} from '/modules/my-module.js';
- 匯入多個匯出
import {foo, bar} from '/modules/my-module.js';
- 匯入帶有別名的匯出
import {reallyLongModuleExportName as shortName} from '/modules/my-module.js';
- 匯入時重新命名多個匯出
import {
reallyLongModuleMemberName as shortName,
anotherLongModuleName as short
} from "my-module";
- 匯入預設值
// 直接匯入預設值
import myDefault from "my-module";
// 與名稱空間匯入或命名匯入一起使用
import myDefault, * as myModule from "my-module";
// 或者
import myDefault, {foo, bar} from "my-module";
參考文章
- JavaScript/">JavaScript/Reference/Statements/export" target="_blank" rel="nofollow,noindex">export | MDN
- import | MDN
- Module的語法 - 阮一峰