本文旨在指导开发者使用 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);
}
}要点：
PHP经典实例（第2版）能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边，大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起，足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中，您可以更加方便地找到各种编程问题的解决方案，《PHP经典实例(第2版)》中内容涵盖了：表单处理；Session管理；数据库交互；使用We
立即学习“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 结构：
Document
说明：
- 是 ToDo List 应用的容器。
- 是输入框，用于输入任务。
- 是添加按钮，用于添加任务。
- 和 用于引入 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 应用。这种方法将任务管理和界面渲染分离，使得代码更易于维护和扩展。同时，通过事件监听，我们可以实现用户与应用的交互，从而提供更好的用户体验。在实际开发中，可以根据需求进一步扩展此应用，例如添加任务优先级、截止日期等功能。
