ES6 export和import

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

 

示例1、

  导出文件  ( flashMessage.js )

export default function(message){
   alert(message);
}

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。 

 

  导入文件

import flashMessage from './flast-message';

flashMessage("Hello");

 

示例2、

  导出文件 ( flashMessage.js )

function alertMessage(message) {
   alert(message);
}

function logMessage(message) {
   console.log(message);
}

export {alertMessage, logMessage};

 

  导入文件

import {alertMessage, logMessage} from './flash-message';

alertMessage("Hello");
logMessage("Hello");

 

示例3、

  导出文件

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

上面代码使用as关键字，重命名了函数v1和v2的对外接口。重命名后，v2可以用不同的名字输出两次。

 

示例4、

 导出文件

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

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

 

导入文件

import * as circle from './circle';

// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};

 模块整体加载所在的那个对象（上例是circle），应该是可以静态分析的，所以不允许运行时改变

 

示例5、

export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代码输出变量foo，值为bar，500 毫秒之后变成baz