ES6笔记--module语法

在es6以前存在AMD(浏览器)和CommonJS(服务器)模块加载方案，而ES6的模块加载方案使其成为通用方案。ES6的模块加载机制在编译时就能肯定模块的依赖关系，而AMD和CommonJS规范则在运行时才能肯定加载依赖，所以ES6的模块规范是静态化的，编译时直接加载对应模块，具备自然的编译优点。

自动采用严格模式，在模块头部自动添加 "use strict"，export和import必须在模块顶层，不能再块级做用域中。

ES6中的_import_(输入其余模块的功能) 和 export(对外提供接口)

Export

_ 输出一组变量：_

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};// profile.js

输出函数或类（class）：

export function multiply(x, y) {
  return x * y;
};

使用as关键字重命名：

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

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

export对外的接口，必须与模块内部的变量创建一一对应关系

错误写法：

// 报错
export 1;

// 报错
var m = 1;
export m;

正确写法：

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

Import命令具备提高效果，会提高到整个模块的头部，首先执行。路径中能够是相对路径和绝对路径，不带有路径必须经过配置，告诉引擎怎么取到这个模块。因为ES6中的模块加载时静态执行过程，所以不容许表达式。

输入变量

// main.js  注意须要与export中的暴露的接口名称保持一致
import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

使用总体加载，即用星号（*）指定一个对象，全部输出值都加载在这个对象上面。

// circle.js  export暴露接口

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

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

// main.js import总体加载

import * as circle from './circle';

console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

export default命令输出的是模块默认值，import该模块时不须要大括号{}！！！

export default命令其实只是输出一个叫作default的变量，因此它后面不能跟变量声明语句。

// 正确
export var a = 1;

// 正确
var a = 1;
export default a;

// 错误
export default var a = 1;