ES6模块化

Module

ES6的Class只是面向对象编程的语法糖， 升级了ES5的构造函数的原型链继承的写法， 并没有解决模块化问题。 Module功能就是为了解决这个问题而提出的。
在ES6之前， 社区制定了一些模块加载方案， 最主要的有CommonJS和AMD两种。 前者用于服务器， 后者用于浏览器。 ES6在语言规格的层面上， 实现了模块功能， 而且实现得相当简单， 完全可以取代现有的CommonJS和AMD规范， 成为浏览器和服务器通用的模块解决方案。

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

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

 //或者
 var firstName = 'Michael';
 var lastName = 'Jackson';
 var year = 1958;
 export {firstName, lastName, year};

 //还可以输出方法和类
 export function multiply(x, y) {
     return x * y;
 };

 //通常情况下， export输出的变量就是本来的名字， 但是可以使用as关键字重命名。
 function v1() { ... }
 function v2() { ... }
 export {
     v1 as streamV1,
     v2 as streamV2,
     v2 as streamLatestVersion
 };

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

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

 //模块的整体加载
 import * as man from './profile';
 console.log('姓： ' + man .firstName());
 console.log('名： ' + man .lastName());

export default
使用import命令的时候， 用户需要知道所要加载的变量名或函数名， 否则无法加载。 但是， 用户肯定希望快速上手， 未必愿意阅读文档， 去了解模块有哪些属性和方法。
为了给用户提供方便， 让他们不用阅读文档就能加载模块， 就要用到export default命令， 为模块指定默认输出。

 export default function foo() {
     console.log('foo');
 }
 //或者写成
 function foo() {
     console.log('foo');
 }
 export default foo;
 //本质上， export default就是输出一个叫做default的变量或方法， 然后系统允许你为它取任意名字。

 //比较两种方式
 //default
 export default function crc32() {} 
 import crc32 from 'crc32';
 //普通
 export function crc32() {};
 import {crc32} from 'crc32';