在前端开发中，经常需要将不同的 JavaScript 文件导入到一个项目中。这些文件可能包含函数、类、变量或其他功能，它们可以被使用来构建应用程序。
在本文中，我们将探讨两种常见的文件导入方法：输出和索引。
输出
当我们在一个 JavaScript 文件中定义了一个函数、类或其他实体时，我们要将其输出，以便其他文件可以引用并使用它。输出通常使用 export 关键字完成。例如：
-- -------------------- ---- ------- -- ----------- ------ -------- ------------ - -- --- - ------ ----- -- - ----- ------ ------- ----- ------- - -- --- -
在上面的例子中，我们输出了三个实体：myFunction 函数、PI 常量和 MyClass 类。默认输出只能有一个，而其他输出则必须用 {} 花括号包裹。
现在，我们可以从另一个文件中导入这些实体：
// main.js
import { myFunction, PI } from './myModule.js';
import MyClass from './myModule.js';
myFunction();
console.log(PI);
const obj = new MyClass();在上面的例子中，我们从 myModule.js 文件中导入了 myFunction 函数和 PI 常量，并使用了默认导出的 MyClass 类。
索引
当我们有多个相关的 JavaScript 文件时，我们可以使用索引文件来方便地导入它们。索引文件是一个命名为 index.js（或 index.ts）的文件，它位于包含其他相关文件的目录中。
例如，假设我们有以下目录结构：
├── utils │ ├── arrayUtils.js │ ├── objectUtils.js │ └── index.js └── main.js
我们可以在 utils/index.js 文件中导入所有的实用程序，并将它们重新导出：
// utils/index.js export * from './arrayUtils.js'; export * from './objectUtils.js';
现在，在 main.js 文件中，我们只需要导入 utils 目录，就可以使用所有导出的实用程序：
// main.js
import * as utils from './utils';
const arr = [1, 2, 3];
const obj = { a: 1, b: 2 };
console.log(utils.sum(arr));
console.log(utils.keys(obj));上面的示例演示了如何使用索引文件来方便地导入一组相关的实用程序。
结论
输出和索引是前端开发中常见的文件导入方法。输出允许我们将函数、类和变量等实体从一个文件中导出，并从另一个文件中导入它们。索引允许我们方便地导入一组相关的实体。
在实际应用中，我们应该根据需要选择适当的文件导入方法，以便使代码更加模块化和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11615
