ES6模块化

1. Module

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

2. 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
    };
   

3. 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());
   

4. 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';