如何用JavaScript实现一个待办事项列表_如何管理状态和更新UI？-js教程-PHP中文网

如何用JavaScript实现一个待办事项列表_如何管理状态和更新UI？

紅蓮之龍

发布： 2025-12-16 15:23:39

原创

879人浏览过

待办事项列表的核心是状态与UI同步：状态统一存于todos数组，增删改操作均返回新数组，render函数负责重绘UI，事件委托处理动态元素。

如何用javascript实现一个待办事项列表_如何管理状态和更新ui？

用 JavaScript 实现待办事项列表，核心是让数据（状态）和界面（UI）保持同步：添加、完成、删除任务时，既要更新内部数组，又要实时反映在页面上。关键不在写多少代码，而在理清“状态在哪”“谁负责更新”“怎么触发重绘”。

状态统一存放在一个数组里

别把任务散落在 DOM 节点的属性或多个变量中。用一个干净的数组（比如 todos）集中管理所有任务对象：

let todos = [
  { id: 1, text: '买牛奶', completed: false },
  { id: 2, text: '回邮件', completed: true }
];

登录后复制

每个任务带 id（方便精准定位）、text（内容）、completed（完成状态）。增删改都只操作这个数组，不碰 DOM。

用函数封装 UI 渲染逻辑

写一个 render() 函数，它读取当前 todos 数组，清空容器，再遍历生成所有任务的 HTML 并插入：

立即学习“Java免费学习笔记（深入）”；

function render() {
  const listEl = document.getElementById('todo-list');
  listEl.innerHTML = todos.map(todo => `
    <li data-id="${todo.id}">
      <input type="checkbox" ${todo.completed ? 'checked' : ''}>
      <span ${todo.completed ? 'style="text-decoration: line-through;"' : ''}>
        ${todo.text}
      </span>
      <button class="delete">×</button>
    </li>
  `).join('');
}

登录后复制

每次状态变化后调用 render()，UI 就自动更新。不用手动找节点改文字或加 class —— 整个列表“重画”更可靠。

晓象AI资讯阅读神器

晓象-AI时代的资讯阅读神器

查看详情

事件委托处理动态元素

新添加的任务，其复选框和删除按钮是后来生成的，直接绑事件会失效。用事件委托，在父容器（如 #todo-list）监听，再判断目标：

document.getElementById('todo-list').addEventListener('click', e => {
  const li = e.target.closest('li');
  if (!li) return;

  const id = Number(li.dataset.id);
  if (e.target.classList.contains('delete')) {
    todos = todos.filter(todo => todo.id !== id);
  } else if (e.target.type === 'checkbox') {
    todos = todos.map(todo =>
      todo.id === id ? { ...todo, completed: e.target.checked } : todo
    );
  }
  render(); // 状态变了，立刻重绘
});

登录后复制

添加任务也一样：输入框 + 按钮触发，push 新对象进 todos，再调 render()。