1.8 模块化

由于前端代码规模逐渐庞大，代码逻辑逐渐复杂，模块化概念逐渐引入到前端工程中。通过script标签引入代码块的方式会造成一个很大的问题就是变量污染，所以在ES5标准中会采取AMD、CMD来实现前端的模块化。比较典型的框架就是sea.js以及require.js。在ES6标准出现后，提供了自己的模块化方式。当然如果要使用ES6标准中的模块化工具，必须在script标签里声明type=＂module＂。代码如下：

1.8.1 导入导出基本使用

在ES6标准中导出用关键字export或者export default；导入用import……from……。代码如下：

上述代码中，a模块中导出了变量a的同时默认导出了obj对象。这里需要注意，export导出是可以导出多个的，然后export default在每个模块中只能导出一个。导入的对应关系也需要注意，通过export导出的需要通过大括号解构变量，如代码中的{a}。然而通过export default导出的可以自定义变量来接收参数，如代码中的A变量对应的就是导出的obj对象。

1.8.2 导入导出变式写法

除了上面描述的模块的基本写法之外，导入导出当然还有很多变式写法。在导出的过程中可以导出多个，并且可以通过as来默认导出。如下：

同样在导入导出时都可以通过“as”关键字来起别名，代码如下：

上述代码中将a变量以c变量的名称导出，同时导入的过程中将c起别名d来导入。在导入过程中也可以通过通配符将所有导出全部获取，代码如下：

1.8.3 按需导入

在使用ES6模块化导入模块的时候，会发现在页面加载的时候就会加载导入的模块文件。很多情况下需要延迟导入，当需要加载的时候再加载对应的模块来节约性能。这时可以通过import()函数来实现，代码如下：

import()函数会返还一个promise对象，所以可以调取then方法通过回调拿到导出的结果。同样可以通过async和await改造上述写法：