使用 JavaScript 类构建一个简单的待办事项列表-js教程-PHP中文网

使用 JavaScript 类构建一个简单的待办事项列表

DDD

发布： 2025-07-16 16:32:12

原创

868人浏览过

使用 javascript 类构建一个简单的待办事项列表

本文将引导你使用 JavaScript 类构建一个简单的待办事项列表。我们将创建两个类：List 用于管理任务列表，Render 用于处理用户界面交互和渲染。通过学习本文，你将掌握如何使用面向对象编程的思想来组织和管理前端代码，并了解如何处理用户输入和动态更新页面内容。

待办事项列表的实现

以下是如何使用 JavaScript 类实现待办事项列表的详细步骤和代码示例。

1. HTML 结构

首先，我们需要一个 HTML 结构来容纳我们的待办事项列表。创建一个包含输入框、添加按钮和用于显示任务列表的 <ul> 元素的 <div> 容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</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>

登录后复制

2. List 类

List 类负责管理待办事项列表。它包含一个 toDo 数组来存储任务，以及 addTask 和 removeTask 方法来添加和删除任务。

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

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

登录后复制

代码解释：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

toDo：一个数组，用于存储待办事项。
constructor(render)：构造函数，接收一个 Render 实例作为参数，并调用 renderList 方法来初始化列表的显示。
addTask(task)：添加任务到 toDo 数组，并调用 renderList 方法来更新列表的显示。
removeTask(task)：从 toDo 数组中删除任务，并调用 renderList 方法来更新列表的显示。这里使用了 filter 方法创建了一个新的数组，其中不包含要删除的 task，然后将新的数组赋值给 this.toDo。

3. Render 类

Render 类负责处理用户界面交互和渲染待办事项列表。它包含事件监听器，用于监听添加按钮的点击事件和删除按钮的点击事件，并调用 renderList 方法来更新列表的显示。

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

登录后复制

代码解释：

constructor(input)：构造函数，接收包含待办事项列表元素的容器作为参数。它获取输入框、添加按钮和 <ul> 元素的引用，并添加事件监听器。
添加按钮的点击事件监听器：当点击添加按钮时，它会获取输入框中的文本，如果文本不为空，则调用 list.addTask(task) 方法将任务添加到列表中，并清空输入框。
<ul> 元素的点击事件监听器：当点击 <ul> 元素中的任何元素时，它会检查点击的元素是否是删除按钮。如果是删除按钮，则获取其前一个兄弟节点的文本内容（即任务文本），并调用 list.removeTask(task) 方法从列表中删除任务。
renderList(toDo)：此方法接收待办事项列表数组作为参数，并更新 <ul> 元素的显示。它首先清空 <ul> 元素的内容，然后遍历 toDo 数组，为每个任务创建一个 <li> 元素，并创建一个删除按钮。将任务文本和删除按钮添加到 <li> 元素，然后将 <li> 元素添加到 <ul> 元素。

4. 初始化

最后，我们需要创建 Render 和 List 类的实例，并将 Render 实例传递给 List 类的构造函数。

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

登录后复制

注意事项

代码组织： 将 List 和 Render 类分别放在单独的 JavaScript 文件中，并在 HTML 文件中引用它们。
错误处理： 在实际应用中，应该添加错误处理机制，例如，当输入框中的文本为空时，给出提示信息。
样式： 可以使用 CSS 来美化待办事项列表的样式。
数据持久化： 可以使用 Local Storage 或其他存储机制来实现数据的持久化，以便在刷新页面后仍然保留待办事项。

总结

通过本文，你学习了如何使用 JavaScript 类构建一个简单的待办事项列表。你了解了如何使用面向对象编程的思想来组织和管理前端代码，以及如何处理用户输入和动态更新页面内容。这个例子可以作为你构建更复杂前端应用的起点。

以上就是使用 JavaScript 类构建一个简单的待办事项列表的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

解决Google Tag Manager CSS选择器点击触发器不一致问题实现CSS图片循环动画并避免页面滚动条的教程 CSS动画实现图片循环横向移动并避免页面滚动 CSS动画：实现图片无限循环左右滑动并避免页面滚动掌握CSS定位与布局：实现网页头部全宽及内容精确对齐