ES6模組化之export和import的用法

磚用冰西瓜發表於2019-03-04
ExportImport

我的github github.com/zhuanyongxi…

ES6中export和import一般的用法有兩種

  1. 命名匯出（Named exports）
  2. 預設匯出（Default exports）

命名匯出（Named exports）

就是每一個需要匯出的資料型別都要有一個name，統一引入一定要帶有{}，即便只有一個需要匯出的資料型別。這種寫法清爽直觀，是推薦的寫法。

//------ lib.js ------
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function diag(x, y) {
    return sqrt(square(x) + square(y));
}

export {sqrt, square, diag}

//------ main.js ------
import { square, diag } from `lib`;				
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
複製程式碼

把export直接加到宣告前面就可以省略{}

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from `lib`;				
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
複製程式碼

無論怎樣匯出，引入的時候都需要{}。

別名引入（Aliasing named imports）

當從不同模組引入的變數名相同的時候

import {speak} from `./cow.js`
import {speak} from `./goat.js`	
複製程式碼

這些寫法顯然會造成混亂

正確的方法是這樣的

import {speak as cowSpeak} from `./cow.js`
import {speak as goatSpeak} from `./goat.js`
複製程式碼

可是，當從每個模組需要引入的方法很多的時候，這種寫法就顯得十分的繁瑣、冗長，例如

import {
  speak as cowSpeak,
  eat as cowEat,
  drink as cowDrink
} from `./cow.js`

import {
  speak as goatSpeak,
  eat as goatEat,
  drink as goatDrink
} from `./goat.js`

cowSpeak() // moo
cowEat() // cow eats
goatSpeak() // baa
goatDrink() // goat drinks
複製程式碼

解決方案就是名稱空間引入了

名稱空間引入（Namespace imports）

import * as cow from `./cow.js`
import * as goat from `./goat.js`

cow.speak() // moo
goat.speak() // baa
複製程式碼

十分的簡潔優雅

預設匯出（Default exports）

預設匯出就不需要name了，但是一個js檔案中只能有一個export default。

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from `myFunc`;
myFunc();
複製程式碼

其實這種匯出方式可以看成是命名到處的變種，只不過把命名寫成了default。

雖然export default只能有一個，但也可以匯出多個方法。

export default {
  speak () {
    return `moo`
  },
  eat () {
    return `cow eats`
  },
  drink () {
    return `cow drinks`
  }
}
複製程式碼

引入與名稱空間引入類似

import cow from `./default-cow.js`
import goat from `./default-goat.js`

cow.speak() // moo
goat.speak() // baa
複製程式碼

如果我們在編寫模組的時候使用的匯出方法不統一，那麼引入的時候就需要考慮不同模組引入的方式。這種麻煩可以通過自引用的方法消除。方法如下

編寫兩種引入方式通用的模組

import * as myself from `./ambidextrous-cow.js` // import this file into itself

// this module`s own namespace is its default export
export default myself

export function speak () {
  console.log(`moo`)
}
複製程式碼

這樣在引入的時候就不需要考慮引入方式了。

import cow from `./ambidextrous-cow`
import * as alsocow from `./ambidextrous-cow`

cow.speak() // moo
alsocow.speak() // moo
複製程式碼

兩種引入方法均可。

這種方法也有一個小缺點，就是在我們編寫的模組中，有一個function是常用的，我們想預設匯出，可export default已經使用了，而我們知道export default在一個模組中只能使用一次。這時就要使用Object.assign

import * as myself from `./ambidextrous-cow.js` 

export default Object.assign(speak, myself) 

export function speak () {
  console.log(`moo`)
}
複製程式碼

需要注意的是，Object.assign只能用於function。

對應引入的例子

import cow from `./ambidextrous-cow`
import * as alsocow from `./ambidextrous-cow`

cow() // moo
cow.speak() // moo
alsocow.speak() // moo
複製程式碼

參考文章

1.[es6] import, export, default cheatsheet

2.詳解JavaScript ES6中export import與export default的用法和區別

3.ES Modules: Using named exports as the default export

4.export in MDN

相關文章