在JavaScript的世界里，ES6（也称为ECMAScript 2015）引入了模块化，使得代码的组织和复用变得更加容易。ES6模块化允许开发者将代码分割成多个文件，并在需要的时候导入它们。以下是三种常见的ES6导入JS文件的方式。
1. import 语句
import 语句是ES6模块化中最常用的导入方式。它允许你从另一个模块中导入单个或多个导出的变量、函数或类。
示例
假设我们有一个名为 math.js 的文件，它导出了一个名为 add 的函数：
// math.js
export function add(a, b) {
return a + b;
}
在另一个文件中，我们可以这样导入 add 函数：
// main.js
import { add } from './math';
console.log(add(5, 3)); // 输出 8
注意事项
- 使用
import语句时，必须使用export语句在导出的模块中声明可导出的变量或函数。 - 导入的模块名后面可以跟一个路径，路径可以是相对路径或绝对路径。
2. export 语句
export 语句用于在模块中导出变量、函数或类。它可以是单独的语句，也可以是默认导出或命名导出。
示例
// math.js
function add(a, b) {
return a + b;
}
// 命名导出
export { add };
// 默认导出
export default function subtract(a, b) {
return a - b;
}
在导入时，默认导出的模块不需要花括号：
// main.js
import subtract from './math';
console.log(subtract(5, 3)); // 输出 2
3. 动态导入（import()）
动态导入允许你按需导入模块，这对于异步加载和分割代码特别有用。
示例
// main.js
async function loadModule() {
const module = await import('./math');
console.log(module.add(5, 3)); // 输出 8
}
loadModule();
动态导入返回一个 Promise 对象，这使得它非常适合在异步场景中使用。
注意事项
- 动态导入不支持默认导出。
- 动态导入可以与 Webpack 等打包工具结合使用，以实现代码分割和懒加载。
通过以上三种方式，你可以轻松地在ES6中导入JS文件。选择哪种方式取决于你的具体需求和模块的结构。记住，模块化不仅可以提高代码的可维护性，还可以提高性能和用户体验。