当前位置：首页 > 文章列表 > 文章 > 前端 > 用JS打造交互式待办清单教程

用JS打造交互式待办清单教程

2025-07-25 16:00:28 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

想要打造一个交互式待办清单吗？本教程将手把手教你用JavaScript类构建一个实用的ToDo List应用！文章将深入讲解如何运用面向对象编程(OOP)的思想，创建`List`和`Render`两个核心类，分别负责任务数据管理和用户界面渲染及交互。通过学习，你将掌握如何添加、删除任务，并实现UI的动态更新。本文还包含详细的代码示例、注意事项以及HTML结构，助你轻松理解并构建自己的交互式ToDo List，提升你的前端开发技能。快来学习JS构建交互式待办清单吧！

使用 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);
  }
}

注意事项:

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);
    });
  }
}

注意事项:

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

HTML 结构

以下是 ToDo List 的 HTML 结构：

<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">
      &lt;input type=&quot;text&quot; /&gt;
      <button>Add Task</button>
      <ul class="tasks"></ul>
    </div>

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

注意事项:

确保 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);

注意事项:

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

总结

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

关键点:

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

今天关于《用JS打造交互式待办清单教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！

Java开发数字病理：OpenSlide图像解析指南

上一篇: Java开发数字病理：OpenSlide图像解析指南

下一篇: Python读取CSV文件全攻略

查看更多