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

使用 JavaScript 类构建交互式 ToDo List 应用

霞舞

发布： 2025-07-16 15:36:13

原创

793人浏览过

使用 javascript 类构建交互式 todo list 应用

本文旨在指导开发者使用 JavaScript 类构建一个功能完善的 ToDo List 应用。通过面向对象编程（OOP）的思想，我们将任务管理和界面渲染分离，实现代码的模块化和可维护性。教程将涵盖类的设计、事件处理以及动态更新用户界面等关键步骤，并提供完整的代码示例。

概述

使用面向对象编程（OOP）方法创建 ToDo List 应用，可以更好地组织和管理代码。我们将创建两个主要的类：List 用于管理任务列表，Render 用于处理用户界面的渲染和事件。

List 类：任务管理

List 类负责存储和管理 ToDo List 中的任务。它包含添加、删除任务的方法，并与 Render 类协同，以便在界面上反映任务列表的更改。

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

登录后复制

要点：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

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

toDo 数组用于存储任务列表。
constructor 接收 Render 类的实例，并调用 renderList 方法初始化界面。
addTask 方法向 toDo 数组添加新任务，并更新界面。
removeTask 方法从 toDo 数组中删除任务，并更新界面。注意这里使用了 filter 方法创建了一个新的数组，避免直接修改原数组导致的问题。

Render 类：界面渲染与事件处理

Render 类负责处理用户界面的渲染和事件监听。它监听添加按钮的点击事件，以及删除按钮的点击事件，并调用 List 类的方法来更新任务列表。

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免费学习笔记（深入）”；

constructor 接收包含 ToDo List 元素的容器，并获取输入框、添加按钮和任务列表的引用。
添加按钮的点击事件监听器，用于获取输入框中的任务，并调用 list.addTask 方法添加任务。
任务列表的点击事件监听器，用于监听删除按钮的点击事件，并调用 list.removeTask 方法删除任务。
renderList 方法用于渲染任务列表。它首先清空任务列表，然后遍历 toDo 数组，为每个任务创建一个 li 元素，并添加删除按钮。

HTML 结构

以下是 ToDo List 应用的 HTML 结构：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" />
    <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>

登录后复制

说明：

<div id="to-do-container"> 是 ToDo List 应用的容器。
<input type="text" /> 是输入框，用于输入任务。
<button>Add Task</button> 是添加按钮，用于添加任务。
<ul class="tasks"></ul> 是任务列表，用于显示任务。
<script src="List.js"></script> 和 <script src="Render.js"></script> 用于引入 JavaScript 文件。

初始化

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

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

登录后复制

说明：

document.querySelector("#to-do-container") 获取 ToDo List 应用的容器。
new Render(...) 创建 Render 类的实例，并将容器传递给它。
new List(...) 创建 List 类的实例，并将 Render 类的实例传递给它。

总结

通过使用 JavaScript 类，我们成功构建了一个交互式的 ToDo List 应用。这种方法将任务管理和界面渲染分离，使得代码更易于维护和扩展。同时，通过事件监听，我们可以实现用户与应用的交互，从而提供更好的用户体验。在实际开发中，可以根据需求进一步扩展此应用，例如添加任务优先级、截止日期等功能。

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