JavaScript `import` 语句的用法

在 JavaScript 中，import 语句用于从其他模块导入功能。不同的 import 语法有不同的用途和行为。下面是这三种常见的 import 语法的区别：

1. import * as name from 'module'

• 用途：导入一个模块的所有导出，并将它们放在一个命名空间对象中。

• 行为：所有导出的变量、函数或类都可以通过这个命名空间对象访问。

• 示例：

  import * as myModule from './myModule';
  
  // 使用时需要通过命名空间对象来访问
  myModule.someFunction();
  console.log(myModule.someVariable);
  

• 优点：可以一次性导入模块中的所有内容，并且避免了命名冲突。

• 缺点：使用时需要通过命名空间对象来访问，稍微繁琐一些。

2. import { export1, export2 } from 'module'

• 用途：从模块中导入特定的导出项（命名导出）。

• 行为：可以直接访问这些导入的变量、函数或类。

• 示例：

  import { someFunction, someVariable } from './myModule';
  
  // 直接使用导入的内容
  someFunction();
  console.log(someVariable);
  

• 优点：可以直接访问导入的内容，代码更简洁。

• 缺点：如果导入的内容较多，可能会导致命名冲突。

3. import defaultExport from 'module'

• 用途：从模块中导入默认导出项。

• 行为：可以直接访问默认导出的内容。

• 示例：

  import myDefaultExport from './myModule';
  
  // 直接使用默认导出的内容
  myDefaultExport();
  

• 优点：可以直接访问默认导出的内容，代码简洁。

• 缺点：每个模块只能有一个默认导出，不能有多个。

组合使用

你也可以组合使用这些 import 语法来满足不同的需求。例如：

import myDefaultExport, { someFunction, someVariable } from './myModule';
import * as allExports from './myModule';

// 使用默认导出
myDefaultExport();

// 使用命名导出
someFunction();
console.log(someVariable);

// 使用命名空间对象
allExports.someFunction();
console.log(allExports.someVariable);

总结

• import * as name from 'module'：导入模块的所有导出，并将其放在一个命名空间对象中。
• import { export1, export2 } from 'module'：从模块中导入特定的命名导出。
• import defaultExport from 'module'：从模块中导入默认导出。

选择哪种方式取决于你的具体需求和模块的导出方式。