JavaScript 中如何使用 import 语句

在JavaScript中，使用import语句可以从模块中加载函数、对象或原始类型的值。这为代码的模块化和复用提供了极大的便利。关键使用方式包括： 导入整个模块、导入特定的成员、重命名导入的成员、以及动态导入模块等。导入整个模块是其中最基本的形式，它允许你将整个模块作为一个对象引入，从而可以访问该模块导出的所有成员。

一、导入整个模块

导入整个模块通常用于当你需要该模块内多个成员时。这种方式的语法是import * as myModule from 'module_path';。这样导入后，你可以通过myModule变量来访问模块中所有导出的成员。

示例代码：

// 假设 math.js 中导出了多个数学工具函数
import * as math from './math.js';
console.log(math.sum(1, 2));
console.log(math.multiply(3, 4));

这种方法虽然方便地让你访问了模块中的所有成员，但也可能会导致命名空间的冲突，而且当你只需要模块中的几个成员时，这种过宽泛的导入也可能会造成代码效率的下降。

二、导入特定的成员

当你只需从模块中导入几个特定的成员时，可以使用import { member1, member2 } from 'module_path'的语法。这样可以直接访问这些成员，而不需要像导入整个模块那样通过模块对象去访问。

示例代码：

// math.js 中导出了多个函数，但我们只需要 sum 和 multiply
import { sum, multiply } from './math.js';
console.log(sum(1, 2));
console.log(multiply(3, 4));

这种导入方法增加了代码的可读性和性能，你可以清晰地看到依赖的成员，而且避免了加载未使用的模块成员。

三、重命名导入的成员

有时可能需要将导入的成员重命名，以避免与本地变量冲突或提高代码的可读性。这可以通过import { member as alias } from 'module_path'实现。

示例代码：

// 为了避免命名冲突，将导入的 sum 函数重命名为 add
import { sum as add } from './math.js';
console.log(add(1, 2));

重命名导入的成员提供了更大的灵活性，使得代码在维护性和可读性上都有所增强。

四、动态导入模块

动态导入是ES2020正式加入JavaScript语言规范的一个特性。它允许你在代码执行时而非加载时导入模块。通过import()函数实现，它返回一个Promise对象。

示例代码：

// 按需动态导入 math.js
const mathPath = './math.js';
import(mathPath)
  .then(math => {
    console.log(math.sum(3, 4));
  })
  .catch(error => {
    console.log('导入模块失败', error);
  });

动态导入的最大优势是可以根据条件和场景导入不同的模块，极大地提高了代码的灵活性和效率。

总结起来，理解和掌握import语句的多种用法，对于构建模块化、高效、易维护的JavaScript应用是非常关键的。通过合理地组织和导入模块，开发者可以实现代码的重用、简化依赖管理和提高项目的可维护性。