JS中import和export用法详解

## JS模块化编程：import和export使用详解 还在为JavaScript模块化编程中`import`和`export`的用法感到困惑吗？本文将深入解析JS中`import`和`export`的各种使用场景，助你轻松掌握模块化开发。文章详细讲解了命名导出和默认导出的区别与用法，包括如何通过`export`关键字导出多个变量、函数或对象，以及如何使用`export default`导出单个主要功能或组件。同时，还介绍了混合导入、路径别名配置、按需导入、避免循环依赖和动态导入等实用技巧。掌握这些要点，能有效提升你的JavaScript代码质量和开发效率，让你的项目更易于维护和扩展。

JavaScript中 import 和 export 用于模块化编程，正确使用需注意以下要点：1.命名导出通过 export 关键字导出多个变量、函数或对象，导入时用 {} 按名称引入；2.默认导出使用 export default 导出单个主要功能或组件，导入时可自定义名称；3.混合导入时先写默认导出再写命名导出；4.路径可省略扩展名并支持别名配置；5.按需导入优于全部导入以提升性能；6.避免循环依赖可通过重构代码解决；7.动态导入通过 import() 函数实现延迟加载。

在 JavaScript 中，import 和 export 是模块化编程的核心语法，用于在一个文件中导出变量、函数或对象，并在另一个文件中引入使用。它们的用法并不复杂，但细节容易搞混，尤其是刚开始接触模块化开发的时候。

下面从几个常见使用场景出发，讲讲怎么正确使用 import 和 export。

常见的 export 用法

你可以通过几种不同的方式导出内容，最常用的是命名导出和默认导出。

• 命名导出（Named Export）
  比如你有一个工具文件 utils.js，里面有几个函数：

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

export const PI = 3.14;

或者写成这样更清晰一点：

function add(a, b) {
  return a + b;
}

const PI = 3.14;

export { add, PI };

• 默认导出（Default Export）
  如果你想一个文件只对外暴露一个主要功能或组件，可以用默认导出：

// math.js
export default function multiply(a, b) {
  return a * b;
}

也可以导出一个类、对象或者值，比如 React 组件经常这样写：

// Button.js
export default function Button() {
  return <button>Click me</button>;
}

import 的基本写法

导入的方式要根据导出的方式来决定，否则很容易报错。

• 导入命名导出的内容

// main.js
import { add, PI } from './utils.js';

console.log(add(2, 3)); // 输出 5
console.log(PI);        // 输出 3.14

注意：这里的 {} 中的名字必须和导出时的名称一致。

• 导入默认导出的内容

// main.js
import multiply from './math.js';

console.log(multiply(2, 3)); // 输出 6

默认导出可以随便起名，比如也可以写成：

import calc from './math.js';

• 同时导入多个类型导出的内容

如果你的模块既有命名导出又有默认导出，可以这样写：

// module.js
export default function () { /* ... */ }
export const version = '1.0';

然后导入：

import myFunc, { version } from './module.js';

一些实用技巧和注意事项

• 路径别名和扩展名 在实际项目中，特别是使用构建工具（如 Webpack、Vite）时，可以省略 .js 扩展名：

  import Button from './components/Button';

  有些项目还会配置路径别名，比如用 @ 表示 src/ 目录：

  import Header from '@/components/Header';

• 按需导入 vs 全部导入 可以一次性导入所有命名导出内容：

  import * as Utils from './utils.js';
  
  console.log(Utils.add(1, 2));
  console.log(Utils.PI);

  这样虽然方便，但在大型项目中可能会影响性能，建议按需导入。

• 避免循环依赖 如果两个模块互相引用，可能会导致某些变量为 undefined。这时候需要重构代码结构，或者延迟调用。

• 动态导入（Dynamic Import）
  如果你想按需加载某个模块（比如点击按钮才加载），可以用 import() 函数：

  button.addEventListener('click', async () => {
    const module = await import('./lazyModule.js');
    module.doSomething();
  });

基本上就这些。刚开始用的时候容易混淆命名导出和默认导出的区别，多练几次就熟悉了。只要注意名字对齐、路径正确、合理使用默认导出，问题就不大。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。