文件夹中的脚本 src - Javascript

在项目中，我们通常会需要将一些 Javascript 的代码放到一个单独的文件夹中，以提高代码的可维护性。这个文件夹即为 src 文件夹，其中的脚本就是我们所说的“文件夹中的脚本”。

为什么要将脚本放到 src 文件夹中？

将脚本放到 src 文件夹中有以下几个优点：

• 代码结构更清晰：将脚本分门别类地放到一个文件夹中，可以让我们更容易地找到自己需要的代码。
• 可维护性更高：将一些通用的功能封装成一个模块，并复用这些模块，可以提高代码的复用性，减少代码的冗余。
• 便于打包和发布：在将代码打包和发布时，我们只需要将 src 文件夹中的脚本打包即可，而不需要打包整个项目，这样可以提高打包和发布的效率。

如何使用 src 文件夹中的脚本？

使用 src 文件夹中的脚本非常简单，只需要按照以下几个步骤即可：

1. 在 HTML 文件中引入脚本

在 HTML 文件中，我们需要使用 <script> 标签来引入脚本，例如：

<script src="./src/utils.js"></script>

这里我们引入了 src 文件夹中的一个名为 utils.js 的脚本。

2. 编写脚本

在 src 文件夹中，我们可以编写各种功能的脚本，例如实现 DOM 操作、封装 HTTP 请求、封装本地存储等。

下面是一个简单的示例：

// utils.js
export function add(a, b) {
  return a + b;
}

这里我们编写了一个名为 add 的函数，用于实现两个数字相加的功能。我们使用 export 关键字将该函数导出，以便在其他文件中使用。

3. 在其他文件中使用脚本

在其他文件中，我们可以通过 import 关键字来导入 src 文件夹中的脚本，并使用导出的函数。

下面是一个简单的示例：

// main.js
import { add } from "./src/utils.js";

const result = add(1, 2);
console.log(result); // 输出 3

这里我们在另一个名为 main.js 的文件中，使用 import 关键字导入了 utils.js 文件中导出的 add 函数，并使用该函数计算出 1 + 2 的结果。最终将结果输出到控制台。

总结

在项目中，将脚本放到 src 文件夹中有助于提高代码的可维护性和复用性，以及提高项目的打包和发布效率。我们可以通过在 HTML 文件中引入脚本，编写脚本并导出需要暴露的函数或变量，以及在其他文件中通过 import 关键字来导入脚本并使用导出的函数或变量。