本文将指导你如何使用 JavaScript 类来构建一个简单的、可交互的 ToDo List 应用。我们将创建两个类：List 用于管理任务列表，Render 用于处理用户界面 (UI) 的渲染和交互。通过本文，你将学习如何使用面向对象编程 (OOP) 的思想来组织和管理你的代码，并实现一个功能完善的 ToDo List。
ToDo List 类的设计与实现
我们将使用两个类来构建 ToDo List：List 类负责管理任务数据，Render 类负责渲染 UI 和处理用户交互。
List 类
List 类负责存储和管理 ToDo List 中的任务。它包含以下方法：
- constructor(render): 构造函数，接收 Render 类的实例作为参数，用于在任务列表发生变化时通知 UI 进行更新。
- addTask(task): 添加新的任务到 toDo 数组中，并调用 render.renderList() 更新 UI。
- removeTask(task): 从 toDo 数组中移除指定的任务，并调用 render.renderList() 更新 UI。
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);
}
}注意事项:
立即学习“Java免费学习笔记（深入）”；
- toDo 数组用于存储任务列表。
- addTask 和 removeTask 方法都会调用 render.renderList() 来确保 UI 与数据同步。
- removeTask 方法使用了 filter 方法创建一个新的数组，其中不包含要删除的任务。 word !== task 这里使用了严格的不等运算符，确保类型和值都不同，避免出现意外情况。
Render 类
Render 类负责处理 UI 的渲染和用户交互。它包含以下方法：
- constructor(input): 构造函数，接收包含 ToDo List UI 元素的 DOM 元素作为参数，并绑定事件监听器。
- renderList(toDo): 接收 toDo 数组作为参数，并根据数组中的任务动态生成 HTML 元素，更新 UI。
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免费学习笔记（深入）”；
- 构造函数中，我们通过 querySelector 方法获取 input 输入框、添加按钮和 ul 列表等元素，并绑定了点击事件监听器。
- 添加按钮的点击事件处理函数会获取输入框中的任务内容，并调用 list.addTask() 方法添加任务。
- renderList 方法会清空 ul 列表，然后根据 toDo 数组中的任务动态生成 li 元素，并添加到 ul 列表中。每个 li 元素都包含一个删除按钮，点击删除按钮会调用 list.removeTask() 方法删除任务。
- trim() 方法用于去除输入框中的空格，避免添加空任务。
HTML 结构
以下是 ToDo List 的 HTML 结构：
Dbsite企业网站管理系统V1.5.0 秉承"大道至简 邦达天下"的设计理念,以灵巧、简单的架构模式构建本管理系统。可根据需求可配置多种类型数据库（当前压缩包支持Access）.系统是对多年企业网站设计经验的总结。特别适合于中小型企业网站建设使用。压缩包内包含通用企业网站模板一套，可以用来了解系统标签和设计网站使用。QQ技术交流群：115197646 系统特点：1.数据与页
Document
注意事项:
立即学习“Java免费学习笔记（深入）”；
- 确保 List.js 和 Render.js 文件已正确引入。
- to-do-container div 包含了 ToDo List 的所有 UI 元素。
- tasks ul 列表用于显示任务列表。
初始化
最后，我们需要创建 List 和 Render 类的实例，并将它们关联起来：
const render = new Render(document.querySelector("#to-do-container"));
const list = new List(render);注意事项:
立即学习“Java免费学习笔记（深入）”；
- 确保在 HTML 文件加载完成后再执行这段代码，否则可能无法获取到 DOM 元素。
总结
通过以上步骤，我们就完成了一个简单的、可交互的 ToDo List 应用。这个示例展示了如何使用 JavaScript 类来组织和管理代码，以及如何使用事件监听器来处理用户交互。你可以根据自己的需求对这个示例进行扩展，例如添加任务优先级、完成状态等功能。
关键点:
- 使用类来组织和管理代码，提高代码的可读性和可维护性。
- 使用事件监听器来处理用户交互，实现动态更新 UI。
- 确保 UI 与数据同步，避免出现不一致的情况。
- 代码的健壮性非常重要，比如处理空输入，错误输入等情况。
