本文将引导你使用 JavaScript 类构建一个简单的待办事项列表。我们将创建两个类：List 用于管理任务列表，Render 用于处理用户界面交互和渲染。通过学习本文，你将掌握如何使用面向对象编程的思想来组织和管理前端代码，并了解如何处理用户输入和动态更新页面内容。
待办事项列表的实现
以下是如何使用 JavaScript 类实现待办事项列表的详细步骤和代码示例。
1. HTML 结构
首先，我们需要一个 HTML 结构来容纳我们的待办事项列表。创建一个包含输入框、添加按钮和用于显示任务列表的
元素的
To-Do List div { margin: 80px auto; text-align: center; } input { width: 20%; }
2. List 类
List 类负责管理待办事项列表。它包含一个 toDo 数组来存储任务，以及 addTask 和 removeTask 方法来添加和删除任务。
立即学习“Java免费学习笔记（深入）”；
// List.jsclass 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); }}
代码解释：
toDo：一个数组，用于存储待办事项。constructor(render)：构造函数，接收一个 Render 实例作为参数，并调用 renderList 方法来初始化列表的显示。addTask(task)：添加任务到 toDo 数组，并调用 renderList 方法来更新列表的显示。removeTask(task)：从 toDo 数组中删除任务，并调用 renderList 方法来更新列表的显示。 这里使用了 filter 方法创建了一个新的数组，其中不包含要删除的 task，然后将新的数组赋值给 this.toDo。
3. Render 类
Render 类负责处理用户界面交互和渲染待办事项列表。它包含事件监听器，用于监听添加按钮的点击事件和删除按钮的点击事件，并调用 renderList 方法来更新列表的显示。
// Render.jsclass 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 类构建一个简单的待办事项列表。你了解了如何使用面向对象编程的思想来组织和管理前端代码，以及如何处理用户输入和动态更新页面内容。这个例子可以作为你构建更复杂前端应用的起点。
以上就是使用 JavaScript 类构建一个简单的待办事项列表的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1510834.html
微信扫一扫 
支付宝扫一扫 
