使用 JavaScript 类构建可交互的 ToDo List-js教程-PHP中文网

使用 JavaScript 类构建可交互的 ToDo List

心靈之曲

发布： 2025-07-16 15:44:02

原创

857人浏览过

使用 javascript 类构建可交互的 todo list

本文将指导你如何使用 JavaScript 类来构建一个简单的、可交互的 ToDo List 应用。我们将创建两个类：List 用于管理任务列表，Render 用于处理用户界面 (UI) 的渲染和交互。通过本文，你将学习如何使用面向对象编程 (OOP) 的思想来组织和管理你的代码，并实现一个功能完善的 ToDo List。

ToDo List 类的设计与实现

我们将使用两个类来构建 ToDo List：List 类负责管理任务数据，Render 类负责渲染 UI 和处理用户交互。

List 类

List 类负责存储和管理 ToDo List 中的任务。它包含以下方法：

constructor(render): 构造函数，接收 Render 类的实例作为参数，用于在任务列表发生变化时通知 UI 进行更新。
addTask(task): 添加新的任务到 toDo 数组中，并调用 render.renderList() 更新 UI。
removeTask(task): 从 toDo 数组中移除指定的任务，并调用 render.renderList() 更新 UI。

class List {
  toDo = [];
  constructor(render) {
    this.render = render;
    this.render.renderList(this.toDo);
  }

  addTask(task) {
    this.toDo.push(task);
    this.render.renderList(this.toDo);
  }

  removeTask(task) {
    this.toDo = this.toDo.filter((word) => word !== task);
    this.render.renderList(this.toDo);
  }
}

登录后复制

注意事项:

立即学习“Java免费学习笔记（深入）”；

toDo 数组用于存储任务列表。
addTask 和 removeTask 方法都会调用 render.renderList() 来确保 UI 与数据同步。
removeTask 方法使用了 filter 方法创建一个新的数组，其中不包含要删除的任务。 word !== task 这里使用了严格的不等运算符，确保类型和值都不同，避免出现意外情况。

Render 类

Render 类负责处理 UI 的渲染和用户交互。它包含以下方法：

constructor(input): 构造函数，接收包含 ToDo List UI 元素的 DOM 元素作为参数，并绑定事件监听器。
renderList(toDo): 接收 toDo 数组作为参数，并根据数组中的任务动态生成 HTML 元素，更新 UI。

class Render {
  constructor(input) {
    this.input = input;
    const taskInput = this.input.querySelector("input");
    const addButton = this.input.querySelector("button");
    const ul = this.input.querySelector(".tasks");

    addButton.addEventListener("click", () => {
      const task = taskInput.value.trim();
      if (task !== "") {
        list.addTask(task);
        taskInput.value = "";
      }
    });

    ul.addEventListener("click", (event) => {
      if (event.target.tagName === "BUTTON") {
        const task = event.target.previousSibling.textContent;
        list.removeTask(task);
      }
    });
  }

  renderList(toDo) {
    const ul = this.input.querySelector(".tasks");
    ul.innerHTML = "";
    toDo.forEach((task) => {
      const li = document.createElement("li");
      li.textContent = task;
      const deleteButton = document.createElement("button");
      deleteButton.textContent = "Delete";
      li.appendChild(deleteButton);
      ul.appendChild(li);
    });
  }
}

登录后复制

注意事项:

立即学习“Java免费学习笔记（深入）”；

构造函数中，我们通过 querySelector 方法获取 input 输入框、添加按钮和 ul 列表等元素，并绑定了点击事件监听器。
添加按钮的点击事件处理函数会获取输入框中的任务内容，并调用 list.addTask() 方法添加任务。
renderList 方法会清空 ul 列表，然后根据 toDo 数组中的任务动态生成 li 元素，并添加到 ul 列表中。每个 li 元素都包含一个删除按钮，点击删除按钮会调用 list.removeTask() 方法删除任务。
trim() 方法用于去除输入框中的空格，避免添加空任务。

HTML 结构

以下是 ToDo List 的 HTML 结构：

Swapface人脸交换

一款创建逼真人脸交换的AI换脸工具

查看详情

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        margin: 80px auto;
        text-align: center;
      }
      input {
        width: 20%;
      }
    </style>
  </head>
  <body>
    <div id="to-do-container">
      <input type="text" />
      <button>Add Task</button>
      <ul class="tasks"></ul>
    </div>

    <script src="List.js"></script>
    <script src="Render.js"></script>
  </body>
</html>

登录后复制

注意事项:

立即学习“Java免费学习笔记（深入）”；

确保 List.js 和 Render.js 文件已正确引入。
to-do-container div 包含了 ToDo List 的所有 UI 元素。
tasks ul 列表用于显示任务列表。

初始化

最后，我们需要创建 List 和 Render 类的实例，并将它们关联起来：

const render = new Render(document.querySelector("#to-do-container"));
const list = new List(render);

登录后复制

注意事项:

立即学习“Java免费学习笔记（深入）”；

确保在 HTML 文件加载完成后再执行这段代码，否则可能无法获取到 DOM 元素。

总结

通过以上步骤，我们就完成了一个简单的、可交互的 ToDo List 应用。这个示例展示了如何使用 JavaScript 类来组织和管理代码，以及如何使用事件监听器来处理用户交互。你可以根据自己的需求对这个示例进行扩展，例如添加任务优先级、完成状态等功能。

关键点:

使用类来组织和管理代码，提高代码的可读性和可维护性。
使用事件监听器来处理用户交互，实现动态更新 UI。
确保 UI 与数据同步，避免出现不一致的情况。
代码的健壮性非常重要，比如处理空输入，错误输入等情况。

以上就是使用 JavaScript 类构建可交互的 ToDo List的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JS如何精准获取视口内元素数据以供AI提问？优化AI工作负载：性能和可伸缩性策略 AI驱动的代码生成：软件开发的未来如何将兰链用于AI工作流程自动化最后，我找到了最好的AI IDE！（这可能会让您感到惊讶）