【转】[JavaScript] import 和 export 的用法

转自：kimi.ai

在 JavaScript 中，import 和 export 是 ES6（ECMAScript 2015）引入的模块化语法，用于在不同的文件或模块之间共享代码。它们使得代码更加模块化、可维护，并且可以避免全局变量的污染。以下是 import 和 export 的基本用法和一些常见场景。

---

1. export 的用法

export 用于将模块中的变量、函数或类导出，以便在其他模块中使用。

默认导出（Default Export）

每个模块只能有一个默认导出，通常用于导出模块的主要功能。

JavaScript复制

// myModule.js
const myFunction = () => {
  console.log("Hello, World!");
};

export default myFunction;

命名导出（Named Export）

可以导出多个命名的变量、函数或类。每个命名导出都有一个唯一的标识符。

JavaScript复制

// myModule.js
export const name = "Kimi";
export const age = 25;

function greet() {
  console.log("Hello, I am Kimi.");
}

export { greet };

混合使用默认导出和命名导出

JavaScript复制

// myModule.js
export const name = "Kimi";
export const age = 25;

const myFunction = () => {
  console.log("Hello, World!");
};

export default myFunction;

---

2. import 的用法

import 用于导入其他模块中导出的内容。

导入默认导出（Default Import）

JavaScript复制

// main.js
import myFunction from "./myModule.js";

myFunction(); // 输出: Hello, World!

导入命名导出（Named Import）

JavaScript复制

// main.js
import { name, age, greet } from "./myModule.js";

console.log(name); // 输出: Kimi
console.log(age);  // 输出: 25
greet();           // 输出: Hello, I am Kimi.

导入所有命名导出（Namespace Import）

如果需要导入模块中的所有命名导出，可以使用命名空间方式：

JavaScript复制

// main.js
import * as myModule from "./myModule.js";

console.log(myModule.name); // 输出: Kimi
console.log(myModule.age);  // 输出: 25
myModule.greet();           // 输出: Hello, I am Kimi.

同时导入默认导出和命名导出

JavaScript复制

// main.js
import myFunction, { name, age } from "./myModule.js";

myFunction(); // 输出: Hello, World!
console.log(name); // 输出: Kimi
console.log(age);  // 输出: 25

---

3. 重命名导入/导出

有时可能需要重命名导入或导出的内容，以避免命名冲突或更清晰地表达意图。

导入时重命名

JavaScript复制

// main.js
import { name as myName, age as myAge } from "./myModule.js";

console.log(myName); // 输出: Kimi
console.log(myAge);  // 输出: 25

导出时重命名

JavaScript复制

// myModule.js
const myName = "Kimi";
const myAge = 25;

export { myName as name, myAge as age };

---

4. 动态导入（Dynamic Import）

动态导入允许在运行时动态加载模块，通常用于按需加载代码，以优化性能。

JavaScript复制

// main.js
async function loadModule() {
  const myModule = await import("./myModule.js");
  myModule.myFunction();
}

loadModule(); // 动态加载 myModule 并调用 myFunction

---

5. 注意事项

• 模块路径：在 import 时，路径需要正确指向模块文件，通常需要包含文件扩展名（如 .js）。
• 默认导出和命名导出的区别：默认导出需要使用 export default，而命名导出需要使用 export 或 export { ... }。
• 模块化工具：在实际项目中，通常会使用构建工具（如 Webpack、Rollup）来处理模块化代码，以便在浏览器中运行。

---

import 和 export 是现代 JavaScript 开发中非常重要的特性，它们使得代码更加模块化和可维护。希望这些内容对你有所帮助！