JS 导入导出 - Javascript

Javascript 是一种广泛应用于网页开发的脚本语言。在开发大型应用程序时，代码的拆分和模块化管理是非常重要的。导入和导出语法允许我们将代码分成独立的模块，并在不同文件中引用和共享这些模块。

导出

使用 export 关键字可以将一个函数、变量、类或多个实体导出到其他模块中。

导出变量

要将一个变量导出到其他模块中，可以使用 export 关键字：

// 模块A
export const PI = 3.14159;
export let name = "John";
export var age = 25;

// 模块B
import { PI, name, age } from './moduleA';

console.log(PI);   // 输出 3.14159
console.log(name); // 输出 "John"
console.log(age);  // 输出 25

导出函数

要导出一个函数，可以使用 export 关键字：

// 模块A
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

// 模块B
import { greet } from './moduleA';

greet("John"); // 输出 "Hello, John!"

导出类

要导出一个类，也可以使用 export 关键字：

// 模块A
export class Calculator {
  add(a, b) {
    return a + b;
  }
}

// 模块B
import { Calculator } from './moduleA';

const calc = new Calculator();
console.log(calc.add(5, 10)); // 输出 15

默认导出

除了按名称导出的实体，还可以使用 export default 语法来导出一个模块的默认实体：

// 模块A
export default function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

// 模块B
import sayHello from './moduleA';

sayHello("John"); // 输出 "Hello, John!"

导入

使用 import 关键字可以从其他模块中导入实体。

导入单个实体

要导入一个实体，可以使用 import 加实体名称的语法：

// 模块A
export const PI = 3.14159;

// 模块B
import { PI } from './moduleA';

console.log(PI); // 输出 3.14159

导入多个实体

要导入多个实体，可以使用逗号将它们分隔开：

// 模块A
export const PI = 3.14159;
export const E = 2.71828;

// 模块B
import { PI, E } from './moduleA';

console.log(PI); // 输出 3.14159
console.log(E);  // 输出 2.71828

重命名导入

导入时，可以使用关键字 as 来重命名实体：

// 模块A
export const name = "John";

// 模块B
import { name as myName } from './moduleA';

console.log(myName); // 输出 "John"

导入默认实体

导入默认实体时，不需要使用大括号：

// 模块A
export default function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

// 模块B
import sayHello from './moduleA';

sayHello("John"); // 输出 "Hello, John!"

导入所有实体

要导入一个模块的所有实体，可以使用 * 符号：

// 模块A
export const PI = 3.14159;
export const E = 2.71828;

// 模块B
import * as math from './moduleA';

console.log(math.PI); // 输出 3.14159
console.log(math.E);  // 输出 2.71828

总结

通过使用导入和导出语法，可以更好地组织和管理大型 Javascript 项目的代码。导入实体时，可以按需导入、重命名实体，甚至导入整个模块。导出实体时，可以按需导出、默认导出函数、变量、类等。这种模块化的开发方式使得代码更易于维护、共享和重用。