跳到主要内容

代码组织：使你的项目可维护

现在你已经构建了一个工作的应用，让我们谈论如何组织你的代码。一个组织良好的项目更容易理解、调试和扩展。这是与一个团队合作或处理更大项目的关键技能。

关注点分离​

这是软件工程的一个核心原则。它意味着你的代码的不同部分应该负责不同的事情。在我们的任务管理应用中，我们可以分离：

  • HTML（结构）： 定义页面上的元素。
  • CSS（表现）： 定义元素如何看起来。
  • JavaScript（逻辑）： 定义元素如何行为。

我们已经通过使用单独的 .html、.css 和 .js 文件做到了这一点。

模块化代码：函数和文件​

随着你的JavaScript文件增长，它可能变成一个单一的、巨大的代码块。我们可以通过将其分解为较小的、可重用的函数来组织它。例如，在我们的任务管理器中，我们可能有：

  • loadTasks()
  • saveTasks()
  • createTaskElement()
  • addTask()

对于更大的项目，你可以将你的JavaScript分解为多个文件（模块）。你可以向AI询问这个：

"我如何可以将我的JavaScript代码分解为多个文件并在我的 index.html 中使用它们？向我解释JavaScript模块。"

命名规范​

为你的变量、函数和文件选择清晰、一致的名称。这使你的代码具有自我说明性。

  • 不好： let x = ...;

  • 好： let taskList = ...;

  • 不好： function a(t) { ... }

  • 好： function addTask(taskText) { ... }

使用AI进行文档化​

好的文档解释 为什么 你的代码以某种方式编写。AI可以在生成文档方面提供很大帮助。

"为以下JavaScript函数生成注释块，说明它做什么、它的参数是什么以及它返回什么。

// [粘贴你的函数这里]
```"

轮到你了：重构任务管理器​

回到你构建的任务管理器项目。你的目标是重构它以获得更好的组织。

  1. 确保你的HTML、CSS和JavaScript在单独的文件中。
  2. 在你的 main.js 中，将代码分解为较小的、命名良好的函数。
  3. 使用你的AI为每个新函数生成注释。
  4. 检查你的变量名称。它们都清晰和描述性吗？

这个重构现有代码的过程被称为 重构，它是开发者工作的一个关键部分。