ES6新特性：使用export和import实现模块化详解

下面我将为你详细讲解如何使用 export 和 import 实现 JavaScript 模块化。首先，我们需要了解 ES6 新特性中的模块化规范。

ES6 新特性：模块化规范

ES6 引入了一种新的模块化规范，不再依赖于传统的全局命名空间，而是将功能划分为一个个独立的模块，通过 export 导出模块中的功能，通过 import 引入其他模块的功能。这样可以有效避免命名空间冲突，提高代码可维护性、可复用性和可测试性。

使用 export 导出模块

在一个模块中，通过 export 导出指定的函数、变量或对象，以供其他模块使用。下面是一个示例说明：

// example.js 模块
export function add(a, b) {
  return a + b;
}

export const pi = 3.1415926;

export default function sayHello() {
  console.log('Hello!');
}

可以将 export 分为两种方式：

1. export function xxx()：导出一个函数
2. export const xxx：导出一个变量

另外，通过 export default 导出的功能，可以在其他模块中用任意名称引用，被默认调用的模块只能有一个。上面的示例中，sayHello() 函数使用了 export default 导出。

使用 import 引入模块

在需要使用其他模块的功能时，通过 import 引入指定的函数、变量或对象。下面是一个示例说明：

// index.js 入口文件

import { add, pi } from './example.js';

console.log(add(1, 2)); // 输出 3
console.log(pi); // 输出 3.1415926

import sayHi from './example.js';

sayHi(); // 输出 "Hello!"

可以使用以下方式引入模块的内容：

1. import { xxx } from './example.js'：引入一个具名的函数、变量或对象
2. import xxx from './example.js'：引入默认导出的函数、变量或对象

注意，路径指向的是相对于当前文件的相对路径。在实际使用时，通常会使用 Webpack 等模块打包工具来统一管理模块依赖。

一个完整的示例

下面是一个完整的使用 export 和 import 实现模块化的示例：

// math.js 模块
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

// app.js 入口文件
import { add } from './math.js';

console.log(add(1, 2)); // 输出 3

在 math.js 模块中，我们定义了三个函数并通过 export 导出，以便其他模块使用。在 app.js 入口文件中，我们通过 import 引入 add 函数，最终输出计算结果 3。

总结

通过使用 export 和 import 实现模块化，可以将代码功能按照模块来划分，在开发和维护过程中提高代码的可读性和可维护性，减少命名空间冲突等问题。