ES6 模块

在早期版本的 JavaScript 中，只有全局作用域和函数作用域，没有模块作用域。这就意味着，如果你有一个变量或函数定义了多次，后面的定义会覆盖前面的定义。另外，JavaScript 没有原生支持模块化，这导致了编写和维护大型应用程序时非常困难。

ES6 引入了模块化，这是现代 JavaScript 中最强大和最受欢迎的功能之一。使用 ES6 模块可以轻松地编写可重用、可维护和可扩展的代码，它们还可以让你轻松地将代码拆分成小块，以便可以按需加载。

导出一个模块

我们使用 export 关键字将函数、变量或对象导出为模块。这样做会将它们暴露给其他模块，并使它们可访问。下面是一个简单的示例：

// myModule.js
export const message = 'Hello World!';
export function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

在上述代码中，我们声明了一个名为 message 的常量和一个名为 sayHello 的函数，并将它们导出为模块。该模块可以在其他文件中使用。

导入一个模块

要在其他文件中使用导出的变量和函数，我们需要使用 import 关键字将它们导入到我们的文件中。

// main.js
import { message, sayHello } from './myModule.js';

console.log(message);
sayHello('Tom');

在上述代码中，我们使用 import 语句导入了 message 和 sayHello。我们可以将它们从文件 ./myModule.js 中引入，并在 main.js 中使用它们。这里，我们将 message 打印到控制台并调用 sayHello 函数。

默认导出

除了导出函数、变量和对象之外，我们还可以使用默认导出来导出一个模块。顾名思义，一个模块只能有一个默认导出，而其他的导出需要使用 {} 括号包裹。

// myModule.js
function sayGoodbye(name) {
  console.log(`Goodbye, ${name}!`);
}

export default sayGoodbye;

在上述代码中，我们将 sayGoodbye 函数作为默认导出，并将其导出为模块。该模块可以在其他文件中使用。

// main.js
import sayGoodbye from './myModule.js';

sayGoodbye('Tom');

在上述代码中，我们导入了默认导出，并使用它在 main.js 中调用了 sayGoodbye 函数。

ES6 模块的好处

ES6 模块的一些重要好处包括：

• 命名空间：ES6 模块定义了一个模块级别的作用域，使模块中的变量和函数不与全局作用域中的变量和函数发生冲突，从而避免了命名冲突的问题。
• 模块可重用：模块可以在应用程序的多个地方重用，从而减少了代码的冗余和复制粘贴的问题。
• 模块可扩展：模块是可扩展的，可以添加、删除和更新它们中的代码，从而使应用程序更加灵活和易于维护。
• 按需加载：只有当需要时才会加载和执行，从而减少了应用程序的加载时间和启动时间。

综上所述，ES6 模块是现代 JavaScript 中最强大和最受欢迎的功能之一，它对于编写和维护大型应用程序非常有帮助。