本文旨在指导开发者使用 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); }}
要点：
立即学习“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 div { margin: 80px auto; text-align: center; } input { width: 20%; }
说明：
是任务列表，用于显示任务。 和 用于引入 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 应用。这种方法将任务管理和界面渲染分离，使得代码更易于维护和扩展。同时，通过事件监听，我们可以实现用户与应用的交互，从而提供更好的用户体验。在实际开发中，可以根据需求进一步扩展此应用，例如添加任务优先级、截止日期等功能。
以上就是使用 JavaScript 类构建交互式 ToDo List 应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/136032.html
微信扫一扫
支付宝扫一扫
