概念

ES6模块化是 ECMAScript 6（简称ES6）中引入的一种新的模块化规范，旨在解决 JavaScript 在模块化方面的缺陷和限制。ES6模块化提供了一种可靠、可扩展和易于维护的方式来组织和管理代码，同时提高了代码的可重用性和可测试性。 本文我们学习ES6模块化，如何从模块中导出变量、函数、类并在其他模块中重用。

注意：ES6 模块即为在严格模式下执行的JavaScript文件。意味着模块中声明的变量和函数不会自动增加至全局作用域中

特点

1. 声明式：使用 import 和 export 关键字来声明模块的依赖关系和导出的变量或函数，使得模块化代码更加清晰和易于理解。
2. 静态：模块的导入和导出关系是静态的，即在代码解析阶段就已经确定了。这意味着模块依赖关系不会受到代码的执行顺序和上下文环境的影响。
3. 每个模块都是独立的：每个模块都有自己的作用域，模块内部的变量和函数不会与其他模块发生冲突，从而避免了全局命名空间的污染。
4. 支持循环依赖：ES6模块化支持循环依赖，即模块之间可以相互依赖，从而提高了代码的复用性和灵活性。
5. 编译时加载：ES6模块化是编译时加载，即在代码执行之前就会将所有的依赖关系和导出的变量或函数加载进来，这可以提高代码的性能和效率。

ES6模块化的语法如下：

 // 导出单个变量或函数
 export const name = 'John';
 export function sayHello() {
   console.log('Hello, World!');
 }
 ​
 // 导出多个变量或函数
 export { name, sayHello };
 ​
 // 导出默认值
 export default function() {
   console.log('This is the default function.');
 }
 ​
 // 导入单个变量或函数
 import { name } from './module';
 ​
 // 导入多个变量或函数
 import { name, sayHello } from './module';
 ​
 // 导入默认值
 import defaultFunction from './module';

除了上述语法外，ES6模块化还支持以下特性：

1. 命名空间导入：可以使用 import * as 语法将整个模块作为命名空间导入，从而避免了命名冲突。

 import * as utils from './utils';
 console.log(utils.add(1, 2)); // 3
 console.log(utils.substract(5, 3)); // 2

1. 动态导入：可以使用 import() 语法动态地导入模块，这样可以延迟加载模块，从而提高了应用程序的性能和响应速度。

 const modulePath = './module.js';
 import(modulePath)
   .then(module => {
     // 使用 module 中的变量或函数
   })
   .catch(error => {
     // 处理导入模块失败的情况
   });

1. 导入导出别名：可以使用 as 关键字给导入或导出的变量或函数取别名，这样可以增强代码的可读性和可维护性。

 // 给导入的变量取别名
 import { name as personName } from './person';
 ​
 // 给导出的函数取别名
 function sayHello() {
   console.log('Hello, World!');
 }
 export { sayHello as greeting };

总之，ES6模块化提供了一种现代化的、可靠的、灵活的模块化机制，可以帮助开发人员更好地组织和管理代码，从而提高了代码的可重用性和可测试性。

其他的特性

1. 循环导入检测：ES6模块化支持循环依赖，但是如果循环依赖过深或出现循环依赖的死循环，会导致应用程序崩溃。为了避免这种情况的发生，ES6模块化引入了循环导入检测机制，可以在编译时检测出循环依赖的错误，从而提高了代码的可靠性。
2. 非严格模式下的默认值：在非严格模式下，如果模块的默认导出值为 undefined，那么导入该模块的变量会取到 undefined 值。
3. 动态模块绑定：ES6模块化支持动态模块绑定，即可以在运行时根据条件动态地加载模块，从而提高了应用程序的灵活性和可扩展性。
4. 顶级 await：ES6模块化允许在模块顶层使用 await 关键字，这样可以在导入模块时立即执行异步操作，从而简化了异步编程的代码。