ES6模块化

        Javascript一直没有模块体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。这对开发大型的、复杂的项目形成了巨大障碍。

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

模块化机制：ES6模块化、CommonJS模块化、AMD模块化

一、ES6模块化

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

ES6 模块不是对象，而是一个接口，通过export命令显式指定输出的代码，再通过import命令输入。

ES6模块化的特点是：“编译时加载”或者静态加载，即ES6可以在编译时就完成模块加载，效率比CommonJS模块的加载方式高。

ES6的模块自动采用严格模式，不管有没有在模块头部加上“use strict”;。

     export导出命令： 

var firstName = 'Michael';

var lastName = 'vicky';

export { firstName, lastName }; //列表导出

export { firstName as first, lastName as last}; //重命名导出

export var a = 3; //导出单个属性

export function multiply(x, y) {

    return x * y;

    }; //导出单个属性

//默认导出，一个模块只能有一个默认导出，不能使用 var、let 或 const 用于导出默认值 export default。

export default { }

export default function foo(){ }

错误写法：

var a = 1;

export a;  //报错，因为没有提供对外的接口。应该export var a = 1; 或   者export {a}

     import导入命令：

         静态的import语句用于导入由另一个模块导出的绑定。

import * as person from './person.js'  //导入整个模块内容

import {firstName,lastName} from './person.js'   //导入多个接口

import {firstName as name} from './person.js' //重命名

import '/modules/my-module.js';    //运行整个模块而不导入任何值

import myDefault from './my-module.js'; //导入使用export default导出的模块

 二、CommonJS模块化

CommonJS 和 AMD 模块，都只能在运行时确定模块之间的依赖关系，以及输入输出的变量。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

CommonJS模块化的特点是：“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

     模块化对象：

         Node内部提供一个Module构造函数。所有模块都是Module的实例。每个模块内部，都有一个module对象，代表当前模块。它有以下属性：

module.id 模块的识别符，通常是带有绝对路径的模块文件名。

module.filename 模块的文件名，带有绝对路径。

module.loaded 返回一个布尔值，表示模块是否已经完成加载。

module.parent 返回一个对象，表示调用该模块的模块。

module.children 返回一个数组，表示该模块要用到的其他模块。

module.exports 表示模块对外输出的值。

 CommonJS模块化中使用module.exports用于导出，require函数用于导入。

  三、AMD模块化

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。

它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

   四、ES6模块化与CommonJS模块化的差异

1、CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

      ES6 模块加载的不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

      ES6 模块输出的是值的引用。

2、CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

      CommonJS加载的是一个对象，即module.exports属性，该对象只有在脚本运行完才能生成。

      CommonJS 模块输出的是值的拷贝