本文将指导你如何使用 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 结构：
Document div { margin: 80px auto; text-align: center; } input { width: 20%; }
注意事项:
立即学习“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 与数据同步，避免出现不一致的情况。代码的健壮性非常重要，比如处理空输入，错误输入等情况。
以上就是使用 JavaScript 类构建可交互的 ToDo List的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/135898.html
微信扫一扫 
支付宝扫一扫 
