本文档将指导你如何使用 JavaScript 类来构建一个简单的待办事项列表应用。通过面向对象编程 (OOP) 的方式，我们将创建 List 和 Render 两个类，分别负责管理任务数据和渲染任务列表。本文将提供完整的代码示例，并解释关键步骤，助你理解 OOP 在前端开发中的应用。
待办事项列表的类结构
我们将使用两个类来构建我们的待办事项列表：
List 类: 负责管理待办事项的数据，包括添加、删除任务等操作。Render 类: 负责将待办事项列表渲染到 HTML 页面上，并处理用户交互事件。
List 类
List 类包含一个 toDo 数组，用于存储待办事项。它还包含以下方法：
constructor(render): 构造函数，接收一个 Render 实例作为参数，并初始化 toDo 数组。addTask(task): 将一个新的待办事项添加到 toDo 数组中，并调用 Render 实例的 renderList 方法来更新页面。removeTask(task): 从 toDo 数组中删除指定的待办事项，并调用 Render 实例的 renderList 方法来更新页面。
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 数组存储的是待办事项的文本内容。renderList 方法用于更新页面显示。
Render 类
Render 类负责处理与 HTML 页面交互相关的逻辑。它包含以下方法：
constructor(input): 构造函数，接收包含待办事项列表相关 HTML 元素的容器作为参数。它会获取输入框、添加按钮和任务列表 ul 元素的引用，并为添加按钮和任务列表绑定事件监听器。renderList(toDo): 接收一个待办事项数组，并将其渲染到 HTML 页面上。它会清空现有的任务列表，然后遍历 toDo 数组，为每个待办事项创建一个 li 元素，并添加一个删除按钮。
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免费学习笔记（深入）”；
addEventListener 方法用于为按钮和任务列表绑定事件监听器。trim() 方法用于去除输入框中的空格。事件委托用于监听任务列表中的删除按钮点击事件。
HTML 结构
以下是待办事项列表的 HTML 结构：
Document div { margin: 80px auto; text-align: center; } input { width: 20%; }
说明：
#to-do-container 是包含所有待办事项列表元素的容器。input 元素用于输入新的待办事项。button 元素用于添加新的待办事项。ul.tasks 元素用于显示待办事项列表。确保 List.js 和 Render.js 文件在 HTML 文件中正确引用。
完整代码
将以上代码片段分别保存为 List.js 和 Render.js 文件，并在 HTML 文件中引用它们。
List.js:
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); }}
Render.js:
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); }); }}const render = new Render(document.querySelector("#to-do-container"));const list = new List(render);
使用方法
在输入框中输入新的待办事项。点击 “Add Task” 按钮添加待办事项。点击待办事项旁边的 “Delete” 按钮删除待办事项。
总结
通过使用 JavaScript 类，我们成功构建了一个简单的待办事项列表应用。这个例子展示了面向对象编程在前端开发中的应用，以及如何将数据和逻辑封装到类中，从而提高代码的可维护性和可重用性。你可以根据这个例子进行扩展，添加更多功能，例如编辑待办事项、标记完成状态等。
以上就是使用 JavaScript 类构建待办事项列表的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1510754.html
微信扫一扫 
支付宝扫一扫 
