用JS打造交互式待办清单教程

想要打造一个交互式待办清单吗？本教程将手把手教你用JavaScript类构建一个实用的ToDo List应用！文章将深入讲解如何运用面向对象编程(OOP)的思想，创建`List`和`Render`两个核心类，分别负责任务数据管理和用户界面渲染及交互。通过学习，你将掌握如何添加、删除任务，并实现UI的动态更新。本文还包含详细的代码示例、注意事项以及HTML结构，助你轻松理解并构建自己的交互式ToDo List，提升你的前端开发技能。快来学习JS构建交互式待办清单吧！

本文将指导你如何使用 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);
  }
}

注意事项:

• 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);
    });
  }
}

注意事项:

• 构造函数中，我们通过 querySelector 方法获取 input 输入框、添加按钮和 ul 列表等元素，并绑定了点击事件监听器。
• 添加按钮的点击事件处理函数会获取输入框中的任务内容，并调用 list.addTask() 方法添加任务。
• renderList 方法会清空 ul 列表，然后根据 toDo 数组中的任务动态生成 li 元素，并添加到 ul 列表中。每个 li 元素都包含一个删除按钮，点击删除按钮会调用 list.removeTask() 方法删除任务。
• trim() 方法用于去除输入框中的空格，避免添加空任务。

HTML 结构

以下是 ToDo List 的 HTML 结构：

  
    
    
    
    
    
  
  
    

      
      Add Task
      

    

    
    
  

注意事项:

• 确保 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);

注意事项:

• 确保在 HTML 文件加载完成后再执行这段代码，否则可能无法获取到 DOM 元素。

总结

通过以上步骤，我们就完成了一个简单的、可交互的 ToDo List 应用。这个示例展示了如何使用 JavaScript 类来组织和管理代码，以及如何使用事件监听器来处理用户交互。你可以根据自己的需求对这个示例进行扩展，例如添加任务优先级、完成状态等功能。

关键点:

• 使用类来组织和管理代码，提高代码的可读性和可维护性。
• 使用事件监听器来处理用户交互，实现动态更新 UI。
• 确保 UI 与数据同步，避免出现不一致的情况。
• 代码的健壮性非常重要，比如处理空输入，错误输入等情况。

今天关于《用JS打造交互式待办清单教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！