import和export的用法

問題來了

在平常開發中，HMS常常會遇到如下這些語句

import {xxx, xxxx} from 'xxx'
import xxx from 'xxx'
import('../xxx')

let xxx = 'x'; export {xxx}
export class xxx {}
export default {}
exports.post()
module.exports.init = init;

那麼問題來了，這些import和export語句表示什麼意思？有什麼區別呢？

背景知識

1. ES6模塊

import和export是ES6模塊中的兩個命令。

ES6模塊功能主要有兩個命令構成：export和import。export命令用於規定模塊的對外接口，import命令用於輸入其餘模塊提供的功能。

在ES6前，模塊加載最主要的有 CommonJS 和 AMD兩種。前者用於服務器，後者用於瀏覽器。
ES6 模塊的設計思想是儘可能的靜態化，使得編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。

2. export

export命令用於規定模塊的對外接口。即輸出模塊內部變量（方法、類）。

• 基本用法

// 1. 直接輸出變量（方法、類）
export var m = 1;
export function multiply(x, y) {
  return x * y;
};

// 2. 使用大括號指定所要輸出的一組變量（方法、類）
var m = 1;
export { m };

// 3. as關鍵字重命名
// 重命名後，v2能夠用不一樣的名字輸出兩次
function v1() { ... }
function v2() { ... }
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

• 注意項

1. export語句輸出的接口，與其對應的值是動態綁定關係，即經過該接口，能夠取到模塊內部實時的值。
2. export命令能夠出如今模塊的任何位置，只要處於模塊頂層就能夠。

3. import

使用export命令定義了模塊的對外接口之後，其餘 JS 文件就能夠經過import命令加載這個模塊。
import命令接受一對大括號，裏面指定要從其餘模塊導入的變量名。大括號裏面的變量名，必須與被導入模塊對外接口的名稱相同。

• 基本用法

// 1. 引入變量（方法、類）-（逐一加載）
import { firstName, lastName, year } from './profile.js';

// 2. as關鍵字重命名
import { lastName as surname } from './profile.js';

// 3. 總體加載
import * as circle from './circle';

• 注意項

1. 引入變量只讀，引入對象屬性可改寫
2. from後面是文件路徑（相對路徑、絕對路徑都可，可省略.js猴嘴；模塊名，已配置模塊位置）
3. import命令提高至頂部先執行（編譯階段執行）
4. import命令靜態執行，不能使用表達式和變量
5. 重複執行同一句import命令，只會執行一次

4. export default

export default就是輸出一個叫作default的變量或方法，系統容許自定義命名

• 基本用法

// 默認輸出一個函數
export default function () {
  console.log('foo');
}
// 引用並指定名字
import customName from './export-default';

export default命令的本質是將後面的值，賦給default變量，因此能夠直接將一個值寫在export default以後

5. import()

爲了實如今運行中加載模塊，引入了import()函數，實現了動態加載。

• 基本用法

import('./myModule.js')
.then(({export1, export2}) => {
  // ...
});

• 其餘

import()和import主要區別爲前者是動態加載。
import()返回一個Promise對象，import()加載模塊成功之後，這個模塊會做爲一個對象，看成then方法的參數。
import()相似於Node的require方法，區別主要是前者是異步加載，後者是同步加載
import()一般用於按需加載、條件加載、動態的模塊路徑

問題解答

// 1. 
// 引入模塊的某些變量（方法、類），配合四、5使用
import {xxx, xxxx} from 'xxx'  

// 2. 
// 引入模塊的默認變量（方法、類），配合6使用
import xxx from 'xxx' 

// 3.
// 實現動態加載，適用於按需加載等
import('../xxx') 

// 4.
// 輸出模塊的變量（方法、類），對應引入方法爲1
let xxx = 'x'; export {xxx}
// 5.
// 輸出模塊的變量（方法、類），對應引入方法爲1
export class xxx {}
// 6.
// 輸出模塊默認的變量（方法、類），對應引入方法爲2
export default {}
// 7.
// 待更新
exports.post()
// 8.
// 待更新
module.exports.init = init;

參考文章

《ECMAScript 6 入門——阮一峯》