本文档将指导你如何使用 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
说明：
- #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 类，我们成功构建了一个简单的待办事项列表应用。这个例子展示了面向对象编程在前端开发中的应用，以及如何将数据和逻辑封装到类中，从而提高代码的可维护性和可重用性。你可以根据这个例子进行扩展，添加更多功能，例如编辑待办事项、标记完成状态等。
