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

export命令

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

// export.js

export var firstName = 'UZI';

export var lastName = 'WUZI';

等同如下写法

var firstName = 'UZI';

var lastName = 'WUZI';

export { firstName , lastName };

export命令除了输出变量，还可以输出函数或类(class)

export function add(x,y){

    return x + y;

};

可以使用as关键字重命名

function v1() { ... }

function v2() { ... }

export {

    v1 as oneV1,

    v2 as twoV2,

}

export命令规定的是对外的接口，必须与模块内部的变量简历一一对应关系

// 写法一

export var m = 1;

// 写法二

var m = 1;

export { m };

// 写法三

var n = 1;

export { n as m }

import命令

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

// import.js

import { firstName , lastName } from './export.js'

function setName(element) {

    element.textContent = fitstName + ' ' + lastName;

}

上面代码的import命令，用于加载export.js文件，并从中输入变量。import命令接收一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须于被导入模块export.js对外接口的名词相同

export default命令

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

// export-default.js

export default function foo(){

    console.log('foo');

}

// 或者写成

function foo(){

    console.log('foo')

};

export default foo;

import 命令可以为该匿名函数指定任意名字

// import-default.js

import customName from './export-default'

customName();

比较默认输出和正常输出

// 第一组

export default function foo(){ // 输出

    // ...

}

import foo from 'foo' // 输入

// 第二组

export function foo(){  // 输出

    // ...

}

import { foo } from 'foo' // 输入

第一组使用export default，对应的import语句不需要使用大括号；第二组不使用export default，对应的import语句需要使用大括号