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

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

待办事项列表的实现

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

1. HTML 结构

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

元素的
容器。

    
    
    
    


    

        
        Add Task
        

    

    
    

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

代码解释：



精美淘宝客单页面 zblog模板

采用zblog修改的模板，简单方便，直接解压上传到空间即可使用，页面简单，适合SEO，导航，次导航，最新文章列表，随机文章列表全部都有，网站采用扁平结构，非常适用淘宝客类小站，所有文章都在根目录下。所有需要修改的地方在网页上各个地方都有标注说明，一切在网站后台都可以修改，无须修改任何程序代码，是新手的不二选择。后台登陆地址： 域名/login.asp用户名：admin (建议不要修改)密码：adm

下载

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

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