2018-08-07

看 React 的代码拆分时，回顾一下 ES6 的模块。

• ES6 模块？
  答：一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。
  ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。
  由于 ES6 模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。

• export 命令？
  答：export 命令用于规定模块的对外接口。
  一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。
  在 export 命令后面，使用大括号指定所要输出的一组变量。例如 export {variable1, variable2}。
  export 命令除了输出变量，还可以输出函数或类（class）

• import 命令？
  答：import 命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。
  如果想为输入的变量重新取一个名字，import命令要使用 as 关键字，将输入的变量重命名。
  import 命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。如果 a 是一个对象，改写a的属性是允许的。
  由于 import 是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。
  note：这里让我想到了宏是静态语法，所以宏是里面是不允许有运行时才能的到的语法。
  import 命令具有提升效果，会提升到整个模块的头部，首先执行。

• 模块的整体加载？
  答：即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。例如：import * as circle from './circle';。模块整体加载所在的那个对象（上例是circle），应该是可以静态分析的，所以不允许运行时改变。
  note：这个功能适合工具类模块。

• export default ？
  答：export default命令，为模块指定默认输出。

// export-default.js
function foo() {
  console.log('foo');
}

export default foo;

这时 import 命令后面，不使用大括号。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

foo 函数的函数名 foo，在模块外部是无效的。加载的时候，视同匿名函数加载。
export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。

• import() ？
  答：固然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载就不可能实现。如果 import 命令要取代 Node 的 require 方法，这就形成了一个障碍。因为require 是运行时加载模块，import 命令无法取代 require 的动态加载功能。有一个提案，建议引入import()函数，完成动态加载。

• CommonJS 动态加载 VS ES6 静态加载？
  答：为CommonJS加载的是一个对象（即module.exports属性），该对象只有在脚本运行结束时才会生成。而ES6模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
  ES6模块的运行机制与CommonJS不一样。JS引擎对脚本静态分析的时候，遇到模块加载命令import就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用到被加载的模块中取值。
  Node对ES6模块的处理比较麻烦，因为它有自己的CommonJS模块格式，与ES6模块格式是不兼容的。目前的解决方案是，将两者分开，ES6模块和CommonJS采用各自的加载方案。