如何用 JavaScript 实现一个动态 To-Do List 应用

阿茂本人
121 阅读5分钟

如何用 JavaScript 实现一个动态 To-Do List 应用

（我是纯小白，正在假装专业人员写一篇文章，希望读者别被我误导QAQ，而且由于过于简单，我就不放图片了。小小吐槽：青训营文章要有自己的原创思考，这完全不现实啊。。。）

在现代互联网公司的开发工作中，JavaScript 是不可或缺的一部分。它不仅仅是一门编程语言，更是我们构建用户交互体验的核心工具。今天我将通过一个完整的项目示例，带你一步一步地实现一个功能完备的动态 To-Do List 应用。我们将实现一个可以添加、删除、标记完成的任务清单，并通过这个例子深入理解 JavaScript 在实际项目中的应用。

项目简介

To-Do List 是一个典型的 JavaScript 项目，它帮助用户记录待办事项。这个应用功能包括：

  1. 添加新的任务。
  2. 删除现有的任务。
  3. 标记任务为完成状态。

我们会使用 HTML 来定义页面结构，CSS 来做样式设计，而 JavaScript 则负责实现页面的动态交互行为。这个项目能帮助你理解 DOM 操作、事件处理以及如何在浏览器中实现简单的数据管理。

1. 准备工作

首先，我们需要创建一个基本的 HTML 结构，以便 JavaScript 能够挂载和操作。以下是我们 HTML 的骨架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>To-Do List</title>
</head>
<body>
    <div id="app">
        <h1>My To-Do List</h1>
        <input type="text" id="taskInput" placeholder="Add a new task...">
        <button id="addTaskButton">Add Task</button>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

这个 HTML 文件定义了一个输入框用于添加任务，一个按钮用于触发任务添加，以及一个空的 <ul> 列表用于显示任务。

2. CSS 样式

为了让我们的应用看起来更美观，我们可以写一些简单的 CSS。以下是一个简单的样式：

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

#app {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#taskList {
    list-style: none;
    padding: 0;
}

.task {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.completed {
    text-decoration: line-through;
    color: #aaa;
}

这个 CSS 主要是为了让任务列表更加直观，我们添加了一些样式来美化任务列表的显示和每个任务的状态。

3. JavaScript 功能实现

接下来，我们来实现这个 To-Do List 的核心功能。首先，在 script.js 文件中编写代码：

document.addEventListener("DOMContentLoaded", () => {
    const taskInput = document.getElementById("taskInput");
    const addTaskButton = document.getElementById("addTaskButton");
    const taskList = document.getElementById("taskList");

    // 添加任务功能
    addTaskButton.addEventListener("click", () => {
        const taskText = taskInput.value.trim();
        if (taskText !== "") {
            addTask(taskText);
            taskInput.value = "";
        }
    });

    // 添加任务函数
    function addTask(taskText) {
        const taskItem = document.createElement("li");
        taskItem.className = "task";
        taskItem.textContent = taskText;

        // 创建完成按钮
        const completeButton = document.createElement("button");
        completeButton.textContent = "Complete";
        completeButton.addEventListener("click", () => {
            taskItem.classList.toggle("completed");
        });

        // 创建删除按钮
        const deleteButton = document.createElement("button");
        deleteButton.textContent = "Delete";
        deleteButton.addEventListener("click", () => {
            taskList.removeChild(taskItem);
        });

        // 将按钮添加到任务项中
        taskItem.appendChild(completeButton);
        taskItem.appendChild(deleteButton);

        // 将任务项添加到任务列表中
        taskList.appendChild(taskItem);
    }
});
代码详解

  1. DOMContentLoaded 事件监听: 我们首先确保所有 DOM 元素加载完成，然后再运行 JavaScript 代码。这可以避免在元素还未创建之前对其进行操作的错误。

  2. 添加任务: 监听“添加任务”按钮的点击事件，获取输入框中的文本内容并通过 addTask 函数创建新的任务项。如果输入为空字符串，我们不会添加任务。

  3. addTask 函数: 这个函数的作用是创建新的任务列表项（<li>），并为每个任务添加两个按钮：

    • 完成按钮：点击后，任务将被标记为完成（加上删除线），通过 classList.toggle("completed") 来实现状态的切换。
    • 删除按钮：点击后，任务会从列表中移除。

  4. 动态生成按钮和列表项：在每次调用 addTask 时，我们通过 JavaScript 创建新的 HTML 元素，这样就可以根据用户输入动态地修改页面内容。

4. 项目测试与优化

完成初步开发之后，运行 HTML 文件即可看到我们的 To-Do List 应用。在测试过程中，我们可以确认以下几点：

  • 能否成功添加新的任务。
  • 点击“Complete”按钮能否正确切换任务的完成状态。
  • “Delete”按钮能否正常删除任务。
优化建议
  1. 输入验证：目前的实现中，只是简单地去除输入的前后空格，可以考虑进一步验证输入，比如限制任务长度或检查是否有重复任务。
  2. 本地存储：可以使用浏览器的 localStorage，让用户刷新页面后任务列表也能被保留下来。这样，用户的待办事项可以持续存在。

5. 小结

通过这个项目，我们展示了如何使用 JavaScript 来实现一个简单的动态 To-Do List 应用。这个应用涉及了基础的 DOM 操作、事件监听、动态元素创建等内容，这些都是前端开发中常见的任务。虽然这个应用功能简单，但它却涵盖了 JavaScript 中最为常用的编程技巧。

当你学会如何构建这样的简单应用后，就可以逐渐挑战更复杂的项目，比如加入用户验证、结合后端 API 或是使用框架（如 React）来进一步提升项目的功能和结构。

希望这篇文章能对你有所帮助，继续保持编程的热情吧！

avatar
文章
阅读
粉丝