export和import的用法總結

ES6中export通常的用法有兩種

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

我在github
https://github.com/zhuanyongx...