前端模块化

在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种，前者用于服务器，后者用于浏览器，ES6在语法层面上实现了模块功能，成为浏览器和服务器通用的模块解决方案。

ES6模块的设计思想是尽量静态化，使得编译时就能确定模块的依赖关系，以及输入输出变量。CommonJS和AMD模块都只能在运行时确定这些东西。

CommonJS模块是对象，输入时必须查找对象属性。通过整体加载fs模块，运行时加载。
ES6模块不是对象，而是通过export命令显示指定输出的代码，输入时也采用静态命令的形式。
编译时加载效率高很多。

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。一个模块就是一个独立文件。该模块内部的所有变量，外部无法获取。
export命令除了输出变量，还可以输出函数或类。export输出的变量就是本来的名字，但可以使用as关键字重命名。
export命令可出现在模块的任意位置，只要处于模块顶层即可。export输出的值是动态绑定的，绑定其所在的模块。

import命令具有提升效果，会提升到整个模块的头部首先执行。

export default为模块指定默认输出，import可以为该匿名函数指定任意名字。

ES6模块输出的是值的引用。CommonJS模块输出的是一个值的拷贝。
ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时不会去执行模块，只会生成一个动态的只读引用，等到真正用到的时候，再到模块中取值。因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

CommonJS模块的加载原理：CommonJS的一个模块就是一个脚本文件，require命令第一次加载该脚本就会执行整个脚本，然后在内存中生成一个对象。以后要用到这个模块时，就会到exports属性上取值，即使再次执行require命令，也不会再次执行该模块，而是到缓存中取值。