ES6模块化之export和import的用法

个人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