教你es6 模块。

ES6模块是ECMAScript 2015（ES7）引入的一种新的模块系统，它提供了一种更简洁、更灵活的方式来组织和管理JavaScript代码，ES6模块使用`import`和`export`关键字来实现模块之间的导入和导出，使得代码更加模块化、可维护性和可重用性更高。

## ES6模块的基本用法

### 1. 导出模块

要导出一个模块，可以使用`export`关键字，有以下几种导出方式：

– 导出整个模块：

// module.js
export default function() {
  console.log(\'Hello, ES6!\');
}

– 导出单个变量或函数：

// module.js
const name = \'John\';
export function sayHello() {
  console.log(`Hello, ${name}!`);
}

– 导出多个变量或函数：

// module.js
const name = \'John\';
const age = 30;
export function sayHello() {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}
export function sayGoodbye() {
  console.log(`Goodbye, ${name}!`);
}

### 2. 导入模块

要导入一个模块，可以使用`import`关键字，有以下几种导入方式：

– 导入整个模块：

// main.js
import myModule from \'./module.js\';
myModule(); // 输出 "Hello, ES6!"

– 导入单个变量或函数：

// main.js
import { name } from \'./module.js\';
console.log(name); // 输出 "John"

– 导入多个变量或函数：

// main.js
import { name, sayHello } from \'./module.js\';
console.log(name); // 输出 "John"
sayHello(); // 输出 "Hello, John!"

### 3. 默认导出和命名导出的混合使用

在一个模块中，可以同时使用默认导出和命名导出，默认导出使用`default`关键字，而命名导出使用花括号括起来的变量名。

// module.js (mixed export)
const name = \'John\';
const age = 30;
export default function() {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}
export function sayGoodbye() {
  console.log(`Goodbye, ${name}!`);
}

在导入时，需要使用`* as`语法来同时导入默认导出和命名导出：

// main.js (mixed import)
import myFunction, { name } from \'./module.js\';
myFunction(); // 输出 "Hello, John! You are 30 years old."
console.log(name); // 输出 "John"

## ES6模块的优势和特点

1. **静态分析**：ES6模块在编译阶段就确定了依赖关系，而不是在运行时确定，这使得代码更加稳定，减少了运行时的错误。

2. **更好的性能**：由于ES6模块是预编译的，所以在浏览器中加载时不需要再进行编译，从而提高了加载速度，ES6模块只加载当前需要的模块，而不是一次性加载所有模块，这有助于减少浏览器的内存占用。