一、项目简介本项目使用原生HTML、CSS 和 JavaScript实现一个 TodoMVC 待办事项应用实现了任务添加、完成、删除、全选、筛选以及数据保存等功能。项目主要通过todos数组保存任务数据再通过render()函数将数据显示到页面中。二、核心功能1. 任务数据使用数组保存任务let todos [];每个任务包含任务名称和完成状态{ title: 学习 JavaScript, completed: false }其中completed用来判断任务是否完成。2. render() 页面渲染render()是自己定义的函数主要作用是根据todos中的数据重新生成任务列表。当添加、删除或修改任务后调用render();页面就会根据最新数据进行更新。3. 数组常用方法项目中使用了几个非常重要的数组方法todos.forEach(...)用于遍历所有任务。todos.filter(...)用于筛选任务例如统计未完成任务。todos.some(...)用于判断是否存在已经完成的任务。三、localStorage 解决刷新数据丢失如果只把任务保存到let todos [];刷新页面后数据会重新初始化因此需要使用localStorage保存数据。保存时localStorage.setItem( todos, JSON.stringify(todos));刷新页面后再读取todos JSON.parse( localStorage.getItem(todos));读取数据后还需要执行render();否则虽然数据已经恢复但是页面不会自动显示任务。因此整个过程是保存数据 → localStorage 读取数据 → todos 显示数据 → render()四、All、Active、Completed 筛选底部的All Active Completed通过 URL 的hash判断当前筛选状态。例如#active使用this.hash.substring(1);可以得到active然后修改filter再调用render();根据不同条件显示对应任务。同时使用classList.add(selected); classList.remove(selected);控制当前筛选按钮的 CSS 样式。五、底部任务数量使用todos.filter(todo !todo.completed).length;可以计算未完成任务数量。例如2 items left其中textContent可以修改页面中的文字。项目还使用count.nextSibling获取数字后面的文本节点从而实现1 item left 2 items left的区别。六、下箭头显示控制输入框左侧的下箭头需要根据任务数量显示。没有任务时toggle.style.display none;有任务时toggle.style.display block;因此可以根据todos.length判断是否显示。七、项目中遇到的问题在实现过程中主要遇到了三个问题问题一刷新后任务消失原因是没有使用localStorage保存数据。问题二刷新后数据存在但任务列表不显示原因是数据虽然从localStorage中恢复了但没有立即调用render();问题三CSS 样式没有生效主要检查HTML 中的class是否正确CSS 选择器是否正确HTML 嵌套结构是否符合选择器是否存在优先级更高的 CSS。八、总结通过 TodoMVC 项目我掌握了原生 JavaScript 中比较重要的 DOM 和数组操作方法。整个项目的核心逻辑可以概括为用户操作 ↓ 修改 todos ↓ localStorage 保存数据 ↓ render() ↓ 更新页面其中todos保存任务数据localStorage实现刷新后数据保存render()根据数据更新页面filter()筛选任务forEach()遍历任务some()判断是否存在完成任务classList控制 CSS 样式querySelector()获取 DOM 元素通过这个项目可以进一步理解JavaScript 如何操作 DOM以及数据变化后如何同步更新页面。