关于module

一:概述

1.在 ES6 之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。

CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

这种加载称为“运行时加载”

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

可做到“静态加载”或“编译时加载”

二:严格模式

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

2.严格模式主要有以下限制【查阅官方文档】

3.其中，尤其需要注意 this 的限制。ES6 模块之中，顶层的 this 指向 undefined ，即不应该在顶层代码使用 this 。

三:export 命令

1.模块功能主要由两个命令构成：

export和import 。 export 命令用于规定模块的对外接口， import 命令用于输入其他模块提供的功能。

2.一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。

3.export 的写法:

export 命令对外部输出三个变量。

export 命令后面，使用大括号指定所要输出的一组变量

4.export 命令除了输出变量，还可以输出函数或类（class）。

通常情况下， export 输出的变量就是本来的名字，但是可以使用 as 关键字重命名 

5.需要特别注意的是， export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

6.另外， export 语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

7.这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存，不存在动态更新。

8.最后， export 命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的 import 命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷

四:import 命令

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

2.如果想为输入的变量重新取一个名字， import 命令要使用 as 关键字，将输入的变量重命名。

3.import 命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。但是，如果 a 是一个对象，改写 a 的属性是允许的。a 的属性可以成功改写，并且其他模块也可以读到改写后的值。不过，这种写法很难查错，建议凡是输入的变量，都当作完全只读，不要轻易改变它的属性

4.import 后面的 from 指定模块文件的位置，可以是相对路径，也可以是绝对路径， .js 后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

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

这种行为的本质是， import 命令是编译阶段执行的，在代码运行之前。

由于 import 是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

五:模块的整体加载

1.除了指定加载某个输出值，还可以使用整体加载，即用星号（ * ）指定一个对象，所有输出值都加载在这个对象上面。

2.注意，模块整体加载所在的那个对象，应该是可以静态分析的，所以不允许运行时改变

六:export default 命令

1.为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到 export default 命令，为模块指定默认输出。

2.其他模块加载该模块时， import 命令可以为该匿名函数指定任意名字。

3.第一组是使用 export default 时，对应的 import 语句不需要使用大括号；第二组是不使用 export default 时，对应的 import 语句需要使用大括号

4.export default 命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此 export default 命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应 export default 命令。

5.本质上， export default 就是输出一个叫做 default 的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的