ES6之module语法

历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby的require、Python的import，甚至连CSS都有@import，但是JavaScript任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大的障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。\r\n

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

一、export命令

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

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

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export ｛ firstName，lastName，year｝；

在export命令后面，使用大括号指定所要输出的一组变量.他与前一种写法是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼就看清楚了输出了那些变量

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

export function multiply(x, y) {

 return x * y;

};

对外输出一个函数multiply

提倡情况下 export输出的变量就是本来的名字，但是可以使用as关键字重命名\r\n

function v1() { ... }
function v2() { ... }
export {v1 as streamV1,v2 as streamV2,v2 as streamLatestVersion};

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

二、import命令

义了模块的对外接口以后，其他js文件可以通过import命令加载这个模块

main.js
import { firstName, lastName, year } from './profile.js';
function setName(element) {
   element.textContent = firstName + '' + lastName;
}

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

三、模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
下面是一个circle.js文件，它输出两个方法area和circumference。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

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

现在，加载这个模块。

import * as circle from './circle';

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

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

四、export default 命令

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

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

  export default { 
    you: '你今年多大了', 
    me : '我出去玩了', 
    he : '他在上班',  
  }

现在我们加载这个模块

import hex from './model/text.js'	
console.log(hex)

声明：文章系参考与借鉴于阮一峰老师的ES6相关教程。