js import from 、export的用法

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

命名導出（Named exports）
默認導出（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