首页 > 文章 > 前端

用JavaScript创建待办事项列表教程

时间：2025-07-23 23:48:42 191浏览收藏

推广推荐

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

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《用 JavaScript 构建待办事项列表教程》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

使用 JavaScript 类构建待办事项列表

本文档将指导你如何使用 JavaScript 类来构建一个简单的待办事项列表应用。通过面向对象编程 (OOP) 的方式，我们将创建 List 和 Render 两个类，分别负责管理任务数据和渲染任务列表。本文将提供完整的代码示例，并解释关键步骤，助你理解 OOP 在前端开发中的应用。

待办事项列表的类结构

我们将使用两个类来构建我们的待办事项列表：

List 类: 负责管理待办事项的数据，包括添加、删除任务等操作。
Render 类: 负责将待办事项列表渲染到 HTML 页面上，并处理用户交互事件。

List 类

List 类包含一个 toDo 数组，用于存储待办事项。它还包含以下方法：

constructor(render): 构造函数，接收一个 Render 实例作为参数，并初始化 toDo 数组。
addTask(task): 将一个新的待办事项添加到 toDo 数组中，并调用 Render 实例的 renderList 方法来更新页面。
removeTask(task): 从 toDo 数组中删除指定的待办事项，并调用 Render 实例的 renderList 方法来更新页面。

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 数组存储的是待办事项的文本内容。
renderList 方法用于更新页面显示。

Render 类

Render 类负责处理与 HTML 页面交互相关的逻辑。它包含以下方法：

constructor(input): 构造函数，接收包含待办事项列表相关 HTML 元素的容器作为参数。它会获取输入框、添加按钮和任务列表 ul 元素的引用，并为添加按钮和任务列表绑定事件监听器。
renderList(toDo): 接收一个待办事项数组，并将其渲染到 HTML 页面上。它会清空现有的任务列表，然后遍历 toDo 数组，为每个待办事项创建一个 li 元素，并添加一个删除按钮。

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

注意：

addEventListener 方法用于为按钮和任务列表绑定事件监听器。
trim() 方法用于去除输入框中的空格。
事件委托用于监听任务列表中的删除按钮点击事件。

HTML 结构

以下是待办事项列表的 HTML 结构：

<!DOCTYPE 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>

说明：

#to-do-container 是包含所有待办事项列表元素的容器。
input 元素用于输入新的待办事项。
button 元素用于添加新的待办事项。
ul.tasks 元素用于显示待办事项列表。
确保 List.js 和 Render.js 文件在 HTML 文件中正确引用。

完整代码

将以上代码片段分别保存为 List.js 和 Render.js 文件，并在 HTML 文件中引用它们。

List.js:

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

Render.js:

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

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

使用方法

在输入框中输入新的待办事项。
点击 "Add Task" 按钮添加待办事项。
点击待办事项旁边的 "Delete" 按钮删除待办事项。

总结

通过使用 JavaScript 类，我们成功构建了一个简单的待办事项列表应用。这个例子展示了面向对象编程在前端开发中的应用，以及如何将数据和逻辑封装到类中，从而提高代码的可维护性和可重用性。你可以根据这个例子进行扩展，添加更多功能，例如编辑待办事项、标记完成状态等。

以上就是《用JavaScript创建待办事项列表教程》的详细内容，更多关于的资料请关注golang学习网公众号！