ES6 export，import和export default用法

1. export命令

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个JS文件，里面使用export命令输出该变量。

export var firstName = 'Michael'
export var lastName = 'Jackson'
export var year = 1958

ES6将其视为一个模块，里面用export命令对外部输出三个变量。

var firstName = 'Michael'
var lastName = 'Jackson'
var year = 1958

export { firstName, lastName, year }

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

function v1() {...}

function v2() {...}

export {

    v1 as streamV1,
    v2 as streamV2
}

export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错。

2. import命令

使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块。

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。

如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。

import 'lodash'
import 'lodash'

上面代码加载了两次lodash，但是只会执行一次。

import { foo } from 'my_module'
import { bar } from 'my_module'

//等同于
import { foo, bar } from 'my_module'

3. 模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号(*)指定一个对象，所有输出值都加载在这个对象上面。

// circle.js


exoport function area(radius) {
    return Math.PI * radius * radius
}

export function circumference(radius) {
    return 2 * Math.PI * radius
}

现在，加载这个模块。 

// main.js

import {area, circumference} from './circle'

console.log('圆面积: ' + area(4))


console.log('圆周长: ' + circumference(14))

上面的写法是逐一指定要加载的方法，整体加载的写法如下。

import * as circle from './circle'

console.log('圆面积: ' + circle.area(4))

console.log('圆周长: ' + circle.circumference(14))

 3. export default

export default用于给模块指定默认输出。

export default function() {
    console.log('foo');
}

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

import customName from './export-default'

customName()

需要注意的是，import命令后面，不使用大括号。

export default命令用于非匿名函数前，也是可以的。

export default function foo() {
    console.log('foo')
}

上面代码中，foo只在该模块有用。当加载这个函数进入其他模块时，将其视为匿名函数加载。