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

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

2025-07-22 20:27:19 0浏览收藏

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《用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">
      <input type="text" />
      <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 与数据同步，避免出现不一致的情况。
代码的健壮性非常重要，比如处理空输入，错误输入等情况。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

PHP配置SMTP发邮件教程详解

上一篇: PHP配置SMTP发邮件教程详解

下一篇: PHP分页获取PostgreSQL数据详解

查看更多