es6 -- export和import

• 模块功能主要由两个命令构成：export和import
  export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
• 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
  export写法：
  第一种：

config.js:

export const PROJECT = {
  guosuan: {
    home: {
      bgColor: 'background: #ECFAF8',
      top: 'xxx'
    }
  }
}

第二种：

config.js:

const PROJECT = {
  guosuan: {
    home: {
      bgColor: 'background: #ECFAF8',
      top: 'xxx'
    }
  }
},
const a = {...}
export { PROJECT, a }  //不论一个接口或多个接口必须加大括号

应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量

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

index.vue
import { PROJECT } from "../../config";
import {firstName, lastName, year} from './profile.js';

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

• 模块的整体加载

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

//现在，加载这个模块。
import { area, circumference } from './circle';  //逐一加载
//整体加载的写法如下：
import * as circle from './circle';

• export default

config.js
export default function(){}
或者写成：
function foo(){}
export default foo;        //注意import后面foo，不使用大括号
//现在，加载这个模块
import customName from './config.js' //注意import后面，不使用大括号

上面代码是一个模块文件export-default.js，它的默认输出是一个函数。
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

• 下面比较一下默认输出和正常输出:

//第一组
export default function foo(){...}   //输出
import foo from './config'    //输入
//第二组
export function foo(){...}   //输出
import { foo } from './config'    //输入

上面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号。
export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次
本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。